前言
最近写项目需要读取Excel表格数据,用到了xlsx,很好获取,一开始我也没注意(一直用的就是已经编辑过的表格)这个一下子就获取到了数据,然后就开始处理数据,最后部署完毕,我在其他电脑上试了一下,才发现不能读取未编辑的表格数据,当时给急死了,明天就要交项目,后来解决了这个问题,记录一下,解决方式如下:
一、给项目添加xlsx库
npm install xlsx --save
引入
import * as XLSX from "xlsx";
二、代码部分
<input
class="inpOne"
type="file"
@change="handleChange($event.target.files[0])"
id="selectedFile"
/>
js部分
handleChange(file) {
const reader = new FileReader();
reader.onload = () => {
const workbook = XLSX.read(reader.result, { type: "binary" });
const sheet = workbook.Sheets[workbook.SheetNames[0]];
sheet["!ref"] = "A1:Z5000"; //此处就是一下读取表格中5000行数据,要是数据过大在此更改
const data = XLSX.utils.sheet_to_json(sheet, { header: 1, defval: "" });
// console.log(data, "表一elx表格数据"); //此处已经拿到处理过后的数据data,任由开发者使用
// 例如把提取的数据以对象的形式导入到数组中,供table使用
this.tableData = data.map(item => {
return { name: item[0], shenfen: item[1], wages: item[2], };
});
// let newArray = this.tableData.filter(item => item.name != '' && item.wages != '' && item.shenfen != " ");
//此处是过滤表掉那些为空的数据,因为这种方式是一下子读取5000列数据,把所有数据都读取出来了,自然你的表格不到5000行拿到的数据也是5000行,所以要对数据做一下处理,才能拿到我们需要的数据
// console.log(newArray, "newArray");
};
if (file instanceof File) {
reader.readAsBinaryString(file);
} else if (file instanceof Blob) {
reader.readAsBinaryString(new File([file], file.name));
}
},
以上就是解决vue使用xlsx不能读取未编辑的Excel表格数据的方法
声明:在刚开始用的xlsx的时候借鉴的是前端教父的博客,所以也是也是在他的博客上做的修改,原文出处如下
前端教父原文博客点击进行跳转