使用的库js-xlsx 纯JS即可读取和导出excel的工具库https://github.com/SheetJS/js-xlsx

安装

直接下载dist目录下有很多个JS文件，一般情况下用xlsx.core.min.js就够了，xlsx.full.min.js则是包含了所有功能模块。直接通过script引用即可。

npm安装  npm install xlsx

在main.js中引引入 import XLSX from "xlsx/dist/xlsx.full.min";

在所需页面引入  import XLSX from "xlsx";

使用

这里使用的是element组件

accept=".xlsx"

:auto-upload="false"

:show-file-list="false"

:on-change="uploadChg"

>

导入

readWorkbookFromLocalFile(file, callback) {

// console.log('file', file)

let reader = new FileReader();

// onload 文件读取成功完成时触发

reader.onload = function(e) {

let data = e.target.result;

// 读取excel主要是通过XLSX.read(data, {type: type});方法来实现

// binary: BinaryString格式(byte n is data.charCodeAt(n)); 日期格式需要加上 cellDates: true 参数

let workbook = XLSX.read(data, { type: "binary", cellDates: true });

if (callback) callback(workbook);

};

// readAsBinaryString file 将文件读取为二进制码

reader.readAsBinaryString(file);

}

// 导入

uploadChg(file) {

console.log(file);

this.readWorkbookFromLocalFile(file.raw, workbooks => {

console.log("workbooks", workbooks);

let sheetNames = workbooks.SheetNames;

let worksheet = workbooks.Sheets[sheetNames[0]]; // 取第一张表

// sheet_to_json 输出json格式

// defval: "" 值为空时 key缺失

const dataJson = XLSX.utils.sheet_to_json(worksheet, {

row: false,

defval: ""

});

this.tableTitle = [];

for (let i in dataJson[0]) {

this.tableTitle.push(i); // 表头

}

console.log("tableTitle", this.tableTitle);

console.log("dataJson", dataJson);

// !merges s: 开始 e: 结束 r: 行 c: 列

if (worksheet["!merges"]) {

let temp = [];

worksheet["!merges"].forEach(item => {

let colspan =

item.e.r - item.s.r === 0 ? 1 : item.e.r - item.s.r + 1;

let rowspan =

item.e.c - item.s.c === 0 ? 1 : item.e.c - item.s.c + 1;

let a = { row: item.s.r - 1, colspan: colspan, rowspan: rowspan };

temp.push(a);

});

console.log("temp", temp);

temp.forEach(o => {

Object.assign(dataJson[o.row], o);

});

console.log("dataJson", dataJson);

this.tableData = dataJson;

} else {

this.tableData = dataJson;

}

});

}

{{ o }}

{{ item[o] }}