💥【exceljs】纯前端如何实现Excel导出下载和上传解析？

前段时间写过一篇类似的文章，介绍了sheetjs。最近发现了一个更好用的库ExcelJS，它支持高级的样式自定义，并且使用起来也不复杂。实际上sheetjs也支持高级自定义样式，不过需要使用付费版。

下面对比了Exceljs和Sheetjs：

ExcelJS主要用于Node.js环境，它是一个Node.js库。因此，它的核心功能是为Node.js应用程序提供操作Excel文件的接口。虽然ExcelJS本身是为Node.js设计的，但它也提供了在浏览器端使用的版本。

这里我们主要来介绍浏览器端的使用方式，还是通过下载和上传来演示这个库的常规用法，更多功能可以参考文档：
https://github.com/exceljs/exceljs/blob/master/README_zh.md

前端实现Excel导出下载

先来看下功能演示，如下图把表格中的数据下载到excel文件中

export const exportExcel = (data: DataType[] ) => {
    const headerStyle = {
        font: {
            name: 'Arial',
            family: 4,
            size: 12,
            bold: true,
            // color: { argb: 'FF0000' }
        },
        fill: {
            type: 'pattern',
            pattern: 'solid',
            // fgColor: { argb: 'FFFF00' },
            // bgColor: { argb: 'FFFF00' }
        },
        alignment: {
            vertical: 'middle',
            horizontal: 'center'
        },
        border: {
            top: {style: 'thin', color: {argb: '000000'}},
            left: {style: 'thin', color: {argb: '000000'}},
            bottom: {style: 'thin', color: {argb: '000000'}},
            right: {style: 'thin', color: {argb: '000000'}}
        }
    };

    const headerTitle = ['APP', '名称', '作品数']

    const workbook = new ExcelJS.Workbook();
    const ws = workbook.addWorksheet("Sheet1")
    ws.addRow(headerTitle)
        .eachCell((cell) => {
            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
            // @ts-expect-error
            cell.style = headerStyle
        })
    data.forEach(it=> {
        ws.addRow(Object.values({
            app: it.app,
            name: it.name,
            works: it.works
        }))

    })

    ws.columns = headerTitle.map((header) => ({
        header, key: header, width: 20
    }))

    workbook.xlsx.writeBuffer()
        .then(buffer => {
            // 创建 Blob 对象
            const blob = new Blob([buffer], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});

            // 创建下载链接
            const url = window.URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = `exceljs.xlsx`;
            a.click();

            // 清理 URL
            setTimeout(() => {
                window.URL.revokeObjectURL(url);
                a.remove();
            }, 100);
        })
        .catch(err => console.error('Error creating file:', err));
}

这段代码实现的功能是：

1. 使用ExcelJS.Workbook()创建一个Workbook对象
2. 使用addWorksheet("Sheet1")向Workbook中添加一个sheet
3. 使用addRow方法先加入表头，再使用eachCell为表头单元格设置样式,后面添加数据也是使用这个方法
4. 最后通过模拟点击a标签下载xlsx

前端实现Excel上传解析

将上面下载的excel文件再次上传解析

这里使用antd的Upload组件获取到file文件对象，你可以可以使用原生的<input>标签来上传。beforeUpload是上传前调用这个方法， 我们的目的是获取到file对象，没有必要把文件真的上传到服务器，所以返回值为false，表示不再执行后续上传动作了。

<Upload
    multiple
    showUploadList={false}
    action="/"
    beforeUpload={async (file) => {
        const excelData = await uploadExcel(file);
        setTableData([...tableData, ...excelData])
        return false;
    }}
>
    <Button>上传Excel</Button>
</Upload>

获取到file对象就传递给exceljs来解析文件，代码如下：

export const uploadExcel = async (file: File) => {
    const arrayBuffer = await file.arrayBuffer()

    const tableData: DataType[] = [];
    const workbook = new ExcelJS.Workbook();
    try {
        await workbook.xlsx.load(arrayBuffer);
        // 获取第一个工作表
        const worksheet = workbook.getWorksheet(1);

        // 读取工作表中的数据
        worksheet?.eachRow({includeEmpty: true}, (row, rowNumber) => {
            console.log(`Row ${rowNumber}:`, row.values);
            // 去掉表头
            if (rowNumber > 1) {
                tableData.push({
                    key: rowNumber.toString(),
                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                    // @ts-expect-error
                    app: row.values[1].trim(),
                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                    // @ts-expect-error
                    name: row.values[2].trim(),
                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                    // @ts-expect-error
                    works: row.values[3].trim()
                })
            }
        });

    } catch (error) {
        console.error('Error loading workbook:', error);
    }

    console.log(tableData);
    return tableData;
}

下面解释一下这段代码

1. 使用ExcelJS.Workbook()创建一个workbook对象
2. 使用workbook.xlsx.load(arrayBuffer)将文件对象解码
3. workbook.getWorksheet(1)获取到xls文件的第一个sheet
4. 使用worksheet?.eachRow方法获取到每行与单元格

在线调试

仓库和在线访问：https://stackblitz.com/~/github.com/fullee/exceljs-demo

运行演示命令：

cd exceljs-demo/
npm i
npm run dev