Excel 是常用的办公软件，我们会用它来做数据的整理。

后台管理系统一般都会支持从 Excel 导入数据，或者导出数据到 Excel 文件：

那这种功能是如何实现的呢？

在 Node 和浏览器里，如何解析、生成 Excel 文件呢？

一般我们会用 exceljs 这个包来做。

在 npm 官网可以看到，这个包每周有 30w+ 的下载量，用的还是很多的：

我们具体写代码试试：

mkdir exceljs-test
cd exceljs-test
npm init -y

安装 exceljs：

npm install --save exceljs

把刚才这个 excel 文件复制过来：

我们在代码里读取出来看看：

const { Workbook } = require("exceljs");

async function main() {
    const workbook = new Workbook();

    const workbook2 = await workbook.xlsx.readFile("./data.xlsx");

    workbook2.eachSheet((sheet, index1) => {
        console.log("工作表" + index1);

        sheet.eachRow((row, index2) => {
            const rowData = [];

            row.eachCell((cell, index3) => {
                rowData.push(cell.value);
            });

            console.log("行" + index2, rowData);
        });
    });
}

main();

工作表就是这个东西：

每个工作表下都是独立的表格。

也就是 workbook（工作簿） > worksheet（工作表） > row（行） > cell（列）这样的层级关系。

每一层都可以遍历：

所以我们遍历 sheet、row、cell 这几层，就能拿到所有的数据。

跑下看看：

确实都拿到了。

这样就是数据导入，我们从 excel 文件里解析出数据，然后存入数据库。

exceljs 还提供了简便的方法，可以直接调用 worksheet 的 getSheetValues 来拿到表格数据，不用自己遍历：

解析 excel 文件还是很简单的。

导入数据的时候，按照格式从中解析数据然后存入数据库就行。

有同学可能会说，那如果 excel 的格式不符合要求呢？

一般我们都会提供一个 excel 模版，用这个模版来填数据，然后再导入。

excel 解析我们会了，再来看下 excel 的生成：

const { Workbook } = require("exceljs");

async function main() {
    const workbook = new Workbook();

    const worksheet = workbook.addWorksheet("guang111");

    worksheet.columns = [
        { header: "ID", key: "id", width: 20 },
        { header: "姓名", key: "name", width: 30 },
        { header: "出生日期", key: "birthday", width: 30 },
        { header: "手机号", key: "phone", width: 50 },
    ];

    const data = [
        {
            id: 1,
            name: "光光",
            birthday: new Date("1994-07-07"),
            phone: "13255555555",
        },
        {
            id: 2,
            name: "东东",
            birthday: new Date("1994-04-14"),
            phone: "13222222222",
        },
        {
            id: 3,
            name: "小刚",
            birthday: new Date("1995-08-08"),
            phone: "13211111111",
        },
    ];
    worksheet.addRows(data);

    workbook.xlsx.writeFile("./data2.xlsx");
}

main();

相当简单，也是按照层次结构，先 addWorkSheet、然后 addRows，之后写入文件。

可以看到 worksheet 的名字，还有每行的数据都是对的。

右边手机号那一列最宽，因为我们设置了 width 是 50。

excel 是可以设置格式的，比如字体、背景色等，在代码里同样可以。

就是遍历 row、cell，根据行数设置 style 就好了：

worksheet.eachRow((row, rowIndex) => {
    row.eachCell((cell) => {
        if (rowIndex === 1) {
            cell.style = {
                font: {
                    size: 10,
                    bold: true,
                    color: { argb: "ffffff" },
                },
                alignment: { vertical: "middle", horizontal: "center" },
                fill: {
                    type: "pattern",
                    pattern: "solid",
                    fgColor: { argb: "000000" },
                },
                border: {
                    top: { style: "dashed", color: { argb: "0000ff" } },
                    left: { style: "dashed", color: { argb: "0000ff" } },
                    bottom: { style: "dashed", color: { argb: "0000ff" } },
                    right: { style: "dashed", color: { argb: "0000ff" } },
                },
            };
        } else {
            cell.style = {
                font: {
                    size: 10,
                    bold: true,
                },
                alignment: { vertical: "middle", horizontal: "left" },
                border: {
                    top: { style: "dashed", color: { argb: "0000ff" } },
                    left: { style: "dashed", color: { argb: "0000ff" } },
                    bottom: { style: "dashed", color: { argb: "0000ff" } },
                    right: { style: "dashed", color: { argb: "0000ff" } },
                },
            };
        }
    });
});

style 可以设置 font、fill、border、alignment 这些。

跑下看看：

这样，就完成了数据的导出。

而且，exceljs 这个库可以直接在浏览器里用。

我们试试：

创建 index.html，引入 exceljs 包。

添加一个 file 类型的 input，onchange 的时候解析其中的内容，解析逻辑和之前一样，只是从 readFile 换成 load。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script src="https://unpkg.com/exceljs@4.4.0/dist/exceljs.min.js"></script>
    </head>
    <body>
        <input id="fileInput" type="file" />
        <script>
            const fileInput = document.getElementById("fileInput");
            fileInput.onchange = async () => {
                const file = fileInput.files[0];

                const { Workbook } = ExcelJS;

                const workbook = new Workbook();

                const workbook2 = await workbook.xlsx.load(file);

                workbook2.eachSheet((sheet, index1) => {
                    console.log("工作表" + index1);

                    const value = sheet.getSheetValues();

                    console.log(value);
                });
            };
        </script>
    </body>
</html>

起个静态服务：

npx http-server .

浏览器访问下：

可以看到，同样解析出了 excel 的内容。

然后再试试生成 excel：

前面的逻辑一样，只是把 writeFile 换成了 writeBuffer。

这里我创建了一个 10M 的 ArrayBuffer 来写入数据，之后再读取。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script src="https://unpkg.com/exceljs@4.4.0/dist/exceljs.min.js"></script>
    </head>
    <body>
        <script>
            const { Workbook } = ExcelJS;

            async function main() {
                const workbook = new Workbook();

                const worksheet = workbook.addWorksheet("guang111");

                worksheet.columns = [
                    { header: "ID", key: "id", width: 20 },
                    { header: "姓名", key: "name", width: 30 },
                    { header: "出生日期", key: "birthday", width: 30 },
                    { header: "手机号", key: "phone", width: 50 },
                ];

                const data = [
                    {
                        id: 1,
                        name: "光光",
                        birthday: new Date("1994-07-07"),
                        phone: "13255555555",
                    },
                    {
                        id: 2,
                        name: "东东",
                        birthday: new Date("1994-04-14"),
                        phone: "13222222222",
                    },
                    {
                        id: 3,
                        name: "小刚",
                        birthday: new Date("1995-08-08"),
                        phone: "13211111111",
                    },
                ];
                worksheet.addRows(data);

                worksheet.eachRow((row, rowIndex) => {
                    row.eachCell((cell) => {
                        if (rowIndex === 1) {
                            cell.style = {
                                font: {
                                    size: 10,
                                    bold: true,
                                    color: { argb: "ffffff" },
                                },
                                alignment: {
                                    vertical: "middle",
                                    horizontal: "center",
                                },
                                fill: {
                                    type: "pattern",
                                    pattern: "solid",
                                    fgColor: { argb: "000000" },
                                },
                                border: {
                                    top: {
                                        style: "dashed",
                                        color: { argb: "0000ff" },
                                    },
                                    left: {
                                        style: "dashed",
                                        color: { argb: "0000ff" },
                                    },
                                    bottom: {
                                        style: "dashed",
                                        color: { argb: "0000ff" },
                                    },
                                    right: {
                                        style: "dashed",
                                        color: { argb: "0000ff" },
                                    },
                                },
                            };
                        } else {
                            cell.style = {
                                font: {
                                    size: 10,
                                    bold: true,
                                },
                                alignment: {
                                    vertical: "middle",
                                    horizontal: "left",
                                },
                                border: {
                                    top: {
                                        style: "dashed",
                                        color: { argb: "0000ff" },
                                    },
                                    left: {
                                        style: "dashed",
                                        color: { argb: "0000ff" },
                                    },
                                    bottom: {
                                        style: "dashed",
                                        color: { argb: "0000ff" },
                                    },
                                    right: {
                                        style: "dashed",
                                        color: { argb: "0000ff" },
                                    },
                                },
                            };
                        }
                    });
                });

                const arraybuffer = new ArrayBuffer(10 * 1024 * 1024);
                const res = await workbook.xlsx.writeBuffer(arraybuffer);

                console.log(res.buffer);
            }

            main();
        </script>
    </body>
</html>

跑下试试：

可以看到，确实有数据了。

那有了 arraybuffer 的数据，如何触发下载呢？

创建一个 a 标签，设置 download 属性，然后触发点击就可以了。

也就是这样：

function download(arrayBuffer) {
    const link = document.createElement("a");

    const blob = new Blob([arrayBuffer]);
    const url = URL.createObjectURL(blob);
    link.href = url;
    link.download = "guang.xlsx";

    document.body.appendChild(link);

    link.click();
    link.addEventListener("click", () => {
        link.remove();
    });
}

跑一下：

可以看到，生成了 excel 并且触发了下载。

打开文件，可以看到和 node 里生成的一样。

案例代码上传了 github：https://github.com/QuarkGluonPlasma/nestjs-course-code/tree/main/exceljs-test

总结

Excel 的导入导出是后台管理系统的常见功能，我们一般用 exceljs 来实现。

excel 文件分为 workbook、worksheet、row、cell 这 4 层，解析和生成都是按照这个层次结构来。

解析就是 readFile 之后，遍历 worksheet、row，拿到 cell 中的数据。

生成就是 addWorkSheet、addRow 添加数据，然后 writeFile 来写入文件。

如果是在浏览器里，就把 readFile 换成 load，把 writeFile 换成 writeBuffer 就好了。

浏览器里生成 excel 之后，可以通过 a 标签触发下载，设置 download 属性之后，触发点击就好了。

这样，我们就分别在 node 和浏览器里完成了 excel 的解析和生成。