[Vue] .txt 파일 저장하기 및 .txt 불러와 data에 바인딩하기

Vue에서 text파일 .txt로 저장하고 text로된 .txt파일을 불러와서 Vue의 data영역의 데이터에 바인딩을 하기 위해 만든 코드입니다.

<template>
  <div style="height:100px;">
    <!-- txt 파일 불러오기 버튼 -->
    <button @click="importTextFile">불러오기</button>
    <!-- txt 파일 저장하기 버튼 -->
    <button @click="exportTextFile">저장</button>
    <br>
    <!-- text 영역-->
    <textarea id="text-data" v-model="textData" rows="8" cols="100"></textarea>
  </div>
</template>
 
<script>
export default {
  name: 'TextFile',
  data() {
    return {
      /**
       * textarea에 보여줄 텍스트
       * @type {String}
       */
      textData: '',
    };
  },
  methods: {
    /**
     * txt파일을 불러온다
     */
    importTextFile() {
      const input = document.createElement('input');
      input.type = 'file';
      input.accept = 'text/plain'; // 확장자가 xxx, yyy 일때, ".xxx, .yyy"
      // this 접근을 위해 선언 필요
      const self = this;
      input.onchange = function () {
        const file = new FileReader();
        file.onload = () => {
          document.getElementById('text-data').textContent = file.result;
          self.$data.textData = file.result;
        };
        file.readAsText(this.files[0]);
      };
      input.click();
    },
    /**
     * textData를 txt 파일로 저장한다.
     */
    exportTextFile() {
      const text = document.getElementById('text-data').value;
      // 저장하고자하는 파일명
      const filename = '텍스트파일명';
      const element = document.createElement('a');
      element.setAttribute('href', 'data:text/plain;charset=utf-8, ' + encodeURIComponent(text));
      element.setAttribute('download', filename);
      document.body.appendChild(element);
      element.click();
    },
  },
};
</script>
<style lang="scss" scoped></style>
 

불러오기를 누르면 txt파일을 불러와 textarea에 바인딩

지정한 파일명으로 저장됩니다

불러올 .txt도 만들어서 테스트 해봅니다.

임의 생성한 테스트 .txt

잘 바인딩됩니다

스타일 적인 부분들 제외하고 Vue에서 javascript로 Vue의 v-model에 바인딩되어 있는 데이터를 .txt로 바인딩 하기 위한 코드로 참고 해주시면 될 것 같습니다.

 

 

 

 

 

 

참고

https://www.delftstack.com/ko/howto/javascript/javascript-download/

JavaScript를 사용하여 파일 다운로드

http://www.gisdeveloper.co.kr/?p=5566 

웹에서 Javascript 만으로 텍스트 파일 읽기 – GIS Developer