一、下载xlsx插件
npm i xlsx
二、通过element-ui组件的upload组件上传文件
<el-upload
class="upload-demo"
action
accept=".xlsx,.xls"
:auto-upload="false"
:show-file-list="false"
:on-change="handleChange"
>
<el-button type="primary">选择文件</el-button>
</el-upload>
三、把选择的Excel文件把文件内容转化为二进制
export function readFile(file) {
return new Promise((resolve, reject) => {
let reader = new FileReader();
reader.readAsBinaryString(file);
reader.onload = (ev) => {
resolve(ev.target.result);
};
});
}
四、通过插件中的xlsx.read()读取二进制数据
const handleChange = async function (e) {
const file = e.raw;
let data = await readFile(file);
let workbook = xlsx.read(data, { type: "binary" });
}
五、通过xlsx.utils.sheet_to_json()把表格一中的数据转化为JSON格式
let worksheet = workbook.Sheets[workbook.SheetNames[0]];
data = xlsx.utils.sheet_to_json(worksheet);
六、把读取的JSON数据转化为可以传递给服务器的数据
let arr = [];
data.forEach((item) => {
let obj = {};
for (let key in character) {
if (!character.hasOwnProperty(key)) break;
let v = character[key],
text = v.text,
type = v.type;
v = item[text] || "";
type === "string" ? (v = String(v)) : null;
type === "number" ? (v = Number(v)) : null;
obj[key] = v;
}
arr.push(obj);
});
await delay(100);
result.tableData = arr;
导出
let arr = result.tableData.map((item) => {
return {
办学层次: item.levels,
备注: item.message,
学校名称: item.schoolName,
所在地: item.address,
};
});
let sheet = xlsx.utils.json_to_sheet(arr);
let book = xlsx.utils.book_new();
xlsx.utils.book_append_sheet(book, sheet, "sheet1");
xlsx.writeFile(book, `user${new Date().getTime()}.xls`);