Node 和浏览器里实现 Excel 的解析和生成

标签：Node style 浏览器 color dashed Excel 0000ff const argb

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

Node 和浏览器里实现 Excel 的解析和生成_JavaScript

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

Node 和浏览器里实现 Excel 的解析和生成_前端_02

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

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

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

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

Node 和浏览器里实现 Excel 的解析和生成_前端_03

我们具体写代码试试：

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

Node 和浏览器里实现 Excel 的解析和生成_数据_04

安装 exceljs：

npm install --save exceljs

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

Node 和浏览器里实现 Excel 的解析和生成_JavaScript_05

Node 和浏览器里实现 Excel 的解析和生成_数据_06

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

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();

工作表就是这个东西：

Node 和浏览器里实现 Excel 的解析和生成_html_07

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

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

每一层都可以遍历：

Node 和浏览器里实现 Excel 的解析和生成_Node.js_08

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

跑下看看：

Node 和浏览器里实现 Excel 的解析和生成_数据_09

确实都拿到了。

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

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

Node 和浏览器里实现 Excel 的解析和生成_数据_10

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

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

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

Node 和浏览器里实现 Excel 的解析和生成_前端_11

一般我们都会提供一个 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，之后写入文件。

Node 和浏览器里实现 Excel 的解析和生成_Node.js_12

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

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

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

Node 和浏览器里实现 Excel 的解析和生成_JavaScript_13

就是遍历 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 这些。

跑下看看：

Node 和浏览器里实现 Excel 的解析和生成_Node.js_14

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

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

我们试试：

Node 和浏览器里实现 Excel 的解析和生成_数据_15

创建 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/[email protected]/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 .

Node 和浏览器里实现 Excel 的解析和生成_前端_16

浏览器访问下：

Node 和浏览器里实现 Excel 的解析和生成_Node.js_17

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

然后再试试生成 excel：

Node 和浏览器里实现 Excel 的解析和生成_数据_18

前面的逻辑一样，只是把 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/[email protected]/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>

跑下试试：

Node 和浏览器里实现 Excel 的解析和生成_前端_19

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

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

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

也就是这样：

Node 和浏览器里实现 Excel 的解析和生成_Node.js_20

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();
    });
}

跑一下：

Node 和浏览器里实现 Excel 的解析和生成_数据_21

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

Node 和浏览器里实现 Excel 的解析和生成_数据_22

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

案例代码上传了 github：github.com/QuarkGluonP…

总结

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

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

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

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

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

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

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

更多内容可以看我的小册《Nest 通关秘籍》

标签：Node,style,浏览器,color,dashed,Excel,0000ff,const,argb
From： https://blog.51cto.com/u_15506823/9139577

Node 和浏览器里实现 Excel 的解析和生成

总结

相关文章

赞助商

阅读排行