Vuetifyのv-file-inputでのテキストファイル文字化け対応法

概要

Vuetifyのv-file-inputコンポーネントを使って、shift-jisの文字コードで保存したcsvやtextファイルを単純に読み込んだ場合、文字化けしてしまうのでその対応法についてまとめました

方法

文字化けへの対応方法としては文字コード変換を行うencode.jsを使用し、importしたテキストファイルのエンコード処理をしています。

ソース

事前にencode.jsはimportしてください。

html

<div id="app">
  <v-app>
    <v-row>
      <v-col>
        <v-file-input
          label="テキストファイルを選択"
          @change="getFileContent"
        />
      </v-col>
      <v-col>
        {{ content }}
      </v-col>    
    </v-row>
  </v-app>
</div>

js

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
       content: ''
    }
  },
  methods: {
    async getFileContent (file) {
      try {
        const content = await this.readFileAsync(file)  
        this.content = content

      } catch (e) {
        console.log(e)
      }
    },
    readFileAsync (file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader()
        reader.onload = () => {
          //文字列をバイト列に変換  
          var sjisArray = new Uint8Array(reader.result);
          //encode.jsを使い、文字コードを自動判別しUNICODEへ変換
          var unicodeArray = Encoding.convert(sjisArray, {
            to: 'UNICODE',
            from: 'AUTO',
            type: 'string'
          });
          resolve(unicodeArray);
        }
        reader.onerror = reject;
        reader.readAsArrayBuffer(file);
      })
    }
  }
})

参考

• v-file-input
  https://vuetifyjs.com/ja/components/file-inputs/

• encode.js
  https://github.com/polygonplanet/encoding.js