想利用vue读取xlsx文件内容,通过度娘处得到答案,如下:
<template>
<span>
<input
class="input-file"
type="file"
@change="exportData"
accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
/>
</span>
</template>
<script>
import XLSX from 'xlsx'
export default {
methods: {
exportData (event) {
if (!event.currentTarget.files.length) {
return
}
// const that = this
// 拿取文件对象
var f = event.currentTarget.files[0]
// 用FileReader来读取
var reader = new FileReader()
// 重写FileReader上的readAsBinaryString方法
FileReader.prototype.readAsBinaryString = function (f) {
var binary = ''
var wb // 读取完成的数据
var outdata // 你需要的数据
var reader = new FileReader()
reader.onload = () => {
// 读取成Uint8Array,再转换为Unicode编码(Unicode占两个字节)
var bytes = new Uint8Array(reader.result)
console.log('bytes=', bytes)
var length = bytes.byteLength
for (var i = 0; i < length; i++) {
binary += String.fromCharCode(bytes[i])
}
// 接下来就是xlsx了,具体可看api
wb = XLSX.read(binary, {
type: 'binary'
})
console.log('wb = ' + wb)
outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]])
// 自定义方法向父组件传递数据
console.log('outdata = ' + JSON.stringify(outdata))
}
reader.readAsArrayBuffer(f)
}
reader.readAsBinaryString(f)
}
}
}
</script>
但是经过测试,调试器得到的结果中文却又乱码,如图:
bytes= Uint8Array(869)?[206, 202, 204, 226, 183, 195, 206, 202, 205, 248, 214, 183, 44, 188, 198, 187, 174, 44, 181, 165, 212, 170, 44, 185, 216, 188, 252, 180, 202, 44, 194, 228, 181, 216, 210, 179, 214, 202, 193, 191, 44, 184, 252, 208, 194, 202, 177, 188, 228, 44, 215, 180, 204, 172, 44, 212, 164, 185, 192, 191, 201, 196, 220, 208, 194, 212, 246, 214, 220, 190, 249, 213, 185, 207, 214, 193, 191, 44, 214, 184, 181, 188, 189, 168, 210, 233, 44, 185, 216, 188, 252, 180, 202, 210, 198, 182, 175, 183, 195, 206,?…]
App.vue?234e:44 wb = [object Object]
App.vue?234e:47 outdata = [{"?êìa·??êí??·":"https://aisite.wejianzhan.com/site/shengtingcq.com/d01b9323-781a-42ae-987e-aec0312a6fdf","????":"033-2e?¨-μ???","μ¥?a":"μ???-·??Y2e?¨213¥","1??ü′ê":"???ì·??Y2e?¨213¥","??μ?ò3?êá?":"?T·¨ê?±e","?üD?ê±??":44130.472025462965,"×′ì?":"????íê3é","?¤1à?é?üD????ü?ù?1??á?":"10~20","??μ??¨òé":"##μ±?°1??ü′êó???·??Y2e?¨ó??§?ú?¢D?2e?¨1??¨?¢2e?¨???t??μè′ê12ó?′???μ?ò3£??a??éù?????ü′êó°?ì???÷é÷DT??£??¨òéD?????μ?ò3##
","1??ü′êò??ˉ·??êí??·":"https://aisite.wejianzhan.com/site/shengtingcq.com/d01b9323-781a-42ae-987e-aec0312a6fdf"},{"?êìa·??êí??·":"https://aisite.wejianzhan.com/site/shengtingcq.com/d01b9323-781a-42ae-987e-aec0312a6fdf","????":"031-2e?¨-?óá÷á?","μ¥?a":666,"1??ü′ê":"ot±±??oo2e?¨","??μ?ò3?êá?":"?T·¨ê?±e","?üD?ê±??":44130.472025462965,"×′ì?":"????íê3é","?¤1à?é?üD????ü?ù?1??á?":"10~20","??μ??¨òé":"##μ±?°1??ü′êó???·??Y2e?¨ó??§?ú?¢D?2e?¨1??¨?¢2e?¨???t??μè′ê12ó?′???μ?ò3£??a??éù?????ü′êó°?ì???÷é÷DT??£??¨òéD?????μ?ò3##
","1??ü′êò??ˉ·??êí??·":"https://aisite.wejianzhan.com/site/shengtingcq.com/d01b9323-781a-42ae-987e-aec0312a6fdf"}]
请问如何解决呢?