Vue中封装xlsx到处excel文件的方法

首先需要安装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;
}