首先需要安装xlsx与element-ui
npm install xlsx
npm install element-ui
将js代码封装到js文件中,并且导出函数,使用时需要传入fileName与data
let fileName = "test";
let data = [
{
序号: 1,
测试数据: "test1",
时间: "2022年8月16日"
},
{
序号: 2,
测试数据: "test2",
时间: "2022年8月16日"
},
];
exportExcelFile(fileName, data);
import XLSX from "xlsx"
import { Message } from "element-ui"
export function exportExcelFile(fileName, data) {
var worksheet = XLSX.utils.json_to_sheet(data);
// 调整宽度
let wscols = [];
let keyValueData = _getKeyValueData(data); // 获取Key对应Value的数据
for (let key in keyValueData) { // 循环数据,并获取对应的宽度,并放入到wscols中
let width = _getExcelWidth(keyValueData[key]);
wscols.push({ wch: width });
}
worksheet["!cols"] = wscols;
// 新建空workbook,然后加入到worksheet
var workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, "result");
// 生成xlsx文件
Message.success("正在下载");
let name = `${fileName}.xlsx`;
XLSX.writeFile(workbook, name);
}
获取key对应Value的数据,例如:{ id: [1,2,3], name: [“lisa”, “john”, “james”]}
// 获取key对应Value的数据,例如:{ id: [1,2,3], name: ["lisa", "john", "james"]}
function _getKeyValueData(data) {
let keyValueData = {};
let keys = Object.keys(data[0]); // 获取所有key的名字
for (let key of keys) { // 循环key的名字
for (let item of data) { // 循环传入的数据
if (keyValueData[key]) { // 如果有对应的key,则放入list中,否则创建list
keyValueData[key].push(item[key]);
} else {
keyValueData[key] = [item[key]];
}
}
}
return keyValueData;
}
根据数据获取Excel表的宽度
// 根据数据获取Excel表的宽度
function _getExcelWidth(dataList) {
let maxLength = 0;
for (let item of dataList) {
item = item.toString();
if (item.length > maxLength) maxLength = item.length;
}
maxLength += 2; // 宽度增加2,可以更美观
if (maxLength < 10) maxLength = 10;
if (maxLength > 40) maxLength = 40;
return maxLength;
}