概要
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/