前端百万级数据导出 Excel 方案

概述

后端业务平台经常遇到数据导出报表的需求，常用的方案是使用 excel.js + FileSaver.js处理。excel.js 支持在 node.js 服务端使用，也支持在浏览器端使用。在浏览器端使用时，数据量少的情况下，使用 workbook.xlsx.writeBuffer 可以轻松构建 Blob 数据，但数据量一旦增多，这个方法就会导致浏览器卡顿，甚至崩溃。但实际使用中，一旦数据量超过2万，浏览器崩溃的概率就大大增加了。

回到根源，正确的做法肯定是解析一段数据，创建一段 Blob，excel.js 不支持，我们也只能另谋出路了。

CSV（Comma-Separated Values），又称为“逗号分隔值文件格式”，大部分的 Excel 软件都支持解析该格式的文件。他的语法类似下面这样：

姓名,年龄,职位
张三,30,前端工程师
李四,31,产品经理
王五,30,JAVA工程师

其中，第一行为表头，后面的为每行数据，使用 Excel 软件打开效果如下：

Excel 软件查看 CSV 文件

所以，我们可以使用 CSV 格式导出数据。

方案思路

我们将按照下面的步骤实现数据 Excel 导出：

第一步，把数据按照一定的数量拆分为若干数据片段：我们暂称之为“分片”，如：1000000 条数据，单次处理 10000 条，则可以拆分为 100 个分片。拆分的意义在于，我们可以控制单次处理的数据量，确保浏览器不会因为处理过多数据而卡死；
第二步，创建一个 cvsArray = [] 的变量，用以存放将来生成的 csv 片段，该变量将存储一行一行的字符串，字符串的格式如：李四,31,产品经理\n；
第三步，创建表头行，内容如：姓名,年龄,职位\n；
第四部，遍历分片：遍历时，我们通常需要格式化数据（如：格式转换、千分位修正等），这一步将把每个分片转换为 CSV 片段；
第五步，创建 Blob 对象，语法为：const blob = new Blob([String.fromCharCode(0xfeff), ... cvsArray], { type: "text/plain;charset=utf-8"});
第六步，保存为 CSV 格式的文件：FileSaver.saveAs(blob, '导出.csv');

实现代码

示例代码为 Vue.js 工程，需要使用到 mockjs 和 file-saver 两个 package。

首先，我们创建一个生成指定长度数据的方法，该方法用于模拟后端接口返回数据：

import Mock from 'mockjs';

// 创建指定数量的数据（模拟后端接口）
export const getData = async (limit) => {
    return new Promise((resolve, reject) => {
        try {
            const Random = Mock.Random;

            // 创建指定个数的随机数据
            const data = new Array(limit).fill('').map((_, index) => {
                return {
                    id: `200820-${index}`,
                    username: Random.cname(),
                    url: Random.url('http'),
                    price: Random.float(0, 110000, 0, 2),
                    createAt: Random.datetime('yyyy-MM-dd HH:mm:ss'),
                };
            });

            resolve(data);
        } catch (error) {
            reject(error);
        }
    });
};

然后是导出代码：

// 导出数据为 CSV 格式
export const exportCsv = async (total = 0, size = 1000, onProcess = () => {}) => {
    try {
        if (!total) throw '无数据';

        // 分片
        const step = Math.ceil(total / size);

        // CSV 缓存
        let cvsArray = [];

        // 创建表头[一般表头由外部传入]
        cvsArray.push(['编号', '用户名', '官网', '报价', '创建日期'].join() + '\n');

        // 遍历分片
        for (let i = 0; i < step; i++) {
            await new Promise(async (resolve, reject) => {
                try {
                    // 创建指定个数的随机数据
                    const data = await getData(size);

                    // 格式化为 CSV 字符串
                    const csv = data.map(row => {
                        cvsArray.push(Object.values(row).join() + '\n');
                    });

                    // 统计进度
                    const process = (i / step) * 100;
                    console.log(`进度 ${Math.round(process)}%`);
                    onProcess(process);

                    // 适当暂停，避免页面无法执行渲染
                    await new Promise((_resolve) => {
                        setTimeout(() => _resolve(true), 50);
                    });

                    resolve(true);
                } catch (error) {
                    reject(error);
                }
            });
        }

        // 遍历完成时，固定进度为 100%
        onProcess(100);

        const blob = new Blob([String.fromCharCode(0xfeff), ...cvsArray], {
            type: "text/plain;charset=utf-8"
        });

        await FileSaver.saveAs(blob, 'file.csv');

        return true;
    } catch (error) {
        return Promise.reject(error);
    }
};

页面上会添加一个按钮，点击按钮执行导出：

// 
// 创建模拟数据
async exportCsv() {
  try {
    this.pending = true;
    await app.exportCsv(10000 * 120, 2000, (process) => {
      // 进度条更新
      this.csvProcess = process;
    });
  } catch (error) {
    alert(error);
  } finally {
    this.pending = false;
  }
},

上面的代码将导出 120万条数据，单次处理 2000 条数据。