需求是点击文件上传按钮,上传Excel文件,然后页面的tab表格可以对上传的文件进行预览,
预览题之后再点击确认按钮将文件传给后端,用到的插件是xlsl,首先下载插件并在页面引入
import * as xlsx from 'xlsx',表格用v-for遍历出来dataName(表格抬头)
/ 导入表格数据
handleChange(file) {
this.importFile = file;
const _this = this;
_this.importTabData = [];
_this.fileName = file.name;
console.log(file, "文件");
// _this.formName = file.name;
const reader = new FileReader();
//提取excel中文件内容
reader.readAsArrayBuffer(file.raw);
reader.onload = function () {
const buffer = reader.result;
const bytes = new Uint8Array(buffer);
const length = bytes.byteLength;
let binary = "";
for (let i = 0; i < length; i++) {
binary += String.fromCharCode(bytes[i]);
}
const XLSX = require("xlsx");
const wb = XLSX.read(binary, {
type: "binary",
});
_this.dataName = Object.keys(_this.importTabData[0]);//获取抬头
const outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
outdata.forEach((i) => {
_this.importTabData.push(i);
});
};
},