我正在尝试上传 xlsx excel 文件并在我的 Vue 应用程序中处理它。但它失败了,抛出一个错误。这让我觉得我没有正确使用或导入库,因为在节点项目中工作正常。
我正在使用 xlsx 图书馆。
代码
模板
<template>
<div id="app">
<input type="file" @change="onChange" />
</div>
</template>
脚本import XLSX from "xlsx"
export default {
name: "App",
methods: {
onChange(event) {
this.file = event.target.files ? event.target.files[0] : null;
let workbook = XLSX.readFile(this.file);
console.log('workbook1');
console.log(workbook);
console.log('SheetNames');
console.log(workbook.SheetNames);
},
}
};
在这一点上,如果有一个正确的库,即使被指向一个正确的库,也将非常感激。提前致谢。这是我的问题代码框:
https://codesandbox.io/s/nervous-montalcini-w3qhy?file=/src/App.vue
最佳答案
您首先需要设置一个FileReader并将文件作为二进制字符串读取,以便您可以将其传递给 XLSX。
export default {
methods: {
onChange(event) {
this.file = event.target.files ? event.target.files[0] : null;
if (this.file) {
const reader = new FileReader();
reader.onload = (e) => {
/* Parse data */
const bstr = e.target.result;
const wb = XLSX.read(bstr, { type: 'binary' });
/* Get first worksheet */
const wsname = wb.SheetNames[0];
const ws = wb.Sheets[wsname];
/* Convert array of arrays */
const data = XLSX.utils.sheet_to_json(ws, { header: 1 });
}
reader.readAsBinaryString(this.file);
}
},
}
};
关于javascript - 在vue中上传和处理excel文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61400440/