前端导出自适应列宽的Excel

介绍

要根据用户选择将数据导出成自适应列宽的Excel，
这边使用了exceljs库来实现。

实现

引入库

使用包管理工具引入库。
我使用的是pnpm

1	pnpm install exceljs

在需要用到的地方引入库。

1 2	// 引入 import * as XLSX from "xlsx";

实现

通过workbook创建生成excel文件。
自适应列宽是通过正则判断内容是中文还是英文。中文长度为2.1，英文长度为1.1。统计每列最长的列，并设置列宽。

const data = [
    // 第一行，一般是表头
    ["ID", "名称",....],
    // 处理好的数据
    ...
];
if (data.length == 1) {
    return ElMessage.warning("请选择要导出的行");
}

const workbook = XLSX.utils.book_new();
const worksheet = XLSX.utils.aoa_to_sheet(data);
// 1.所有表头的宽度
const headsWidth = Object.keys(data[0]).map(value => {
if (/.*[\u4e00-\u9fa5]+.*$/.test(value)) {
    return parseFloat(value.toString().length * 2.1);
} else {
    return parseFloat(value.toString().length * 1.1);
}
});
// 2.所有表体值的宽度
const rowsWidth = data.map(item => {
// 每行数据中值的宽度
const maxValue = Object.values(item).map((value, index) => {
    let valueWidth;
    if (/.*[\u4e00-\u9fa5]+.*$/.test(value as string)) {
    valueWidth = parseFloat(value.toString().length * 2.1);
    } else {
    valueWidth = parseFloat(value.toString().length * 1.1);
    }
    // 对比出表头和表体值的最大数
    return Math.max(valueWidth, headsWidth[index]);
});
return maxValue;
});
// 3.对比每列最大值
let aotuWidth = [];
rowsWidth.map((row, index) => {
let maxWidth = [];
row.map((value, i) => {
    if (index === 0) {
    maxWidth.push({
        wch: value
    });
    } else {
    maxWidth.push({
        wch: Math.max(value, aotuWidth[i].wch)
    });
    }
});
aotuWidth = maxWidth;
});
// 4.给excel设置自适应宽度
worksheet["!cols"] = aotuWidth;
XLSX.utils.book_append_sheet(workbook, worksheet, "表格1");
XLSX.writeFile(workbook, "用户表格.xlsx");

参考资料

SheetJS 中文网
 使用xlsx.js导出为excel，并实现自适应列宽
 Vue3 exceljs库实现前端导入导出Excel

关于本人

HaiYao的博客
 Git主页