大家好，很高兴又见面了，我是"高级前端 进阶 "，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发！

高级前端 进阶

前言

开始介绍具体的前端表格方案之前，先说一个在线表格编辑的研发案例。

一开始在做在线表格时，语雀团队采用的是“SpreadJs+二次开发”的模式，后来发现功能越来越难做，维护和开发成本上升。于是，2019年5月语雀团队弃用了SpreadJs，开始自研。所以，本文也不再聚焦SpreadJs（如果有兴趣可以阅读文末资料），而是向大家介绍一些可行的前端在线表格解决方案。

话不多说，直接开始！

Handsontable

Handsontable 是一个 JavaScript 组件，它将数据网格功能与类似电子表格的用户体验相结合。提供数据绑定、数据验证、过滤、排序和 CRUD 操作，可以在React、Angular、Vue等前端技术栈中使用。

数以千计的商业应用程序依靠 Handsontable 来输入、编辑、验证、清理来自远程源（例如数据库和 API）或来自 HTML 文档、Excel 文件、Google 表格和手动输入的数据。

Handsontable数据处理流程

Handsontable的表格解决方案有以下明显的优势：

• 提供所有电子表格功能
• 对开发人员友好的 API
• 性能保证

而且使用起来也是非常简单：

import Handsontable from 'handsontable';
import 'handsontable/dist/handsontable.full.min.css';
// 导入Handsontable
const container = document.querySelector('#example');
const hot = new Handsontable(container, {
  data: [
    ['', 'Tesla', 'Volvo', 'Toyota', 'Ford'],
    ['2019', 10, 11, 12, 13],
    ['2020', 20, 11, 14, 13],
    ['2021', 30, 15, 12, 13]
  ],
  rowHeaders: true,
  colHeaders: true,
  licenseKey: 'non-commercial-and-evaluation' 
  // 商业使用需要
});

目前 Handsontable 在Github上有17.6k的star、2.9k的fork、超过4.7k的项目依赖它，代码贡献者人数超过100+。从NPM的使用数据来看，最近周下载量也达到了124k左右，而且基本维持稳定。

ExcelJS

ExcelJS 是一个 JavaScript 包，充当 Excel 工作簿管理器。 根据其官方文档，exceljs 可以读取、操作电子表格数据和样式并将其写入 XLSX 和 JSON。 它是从 Excel 电子表格文件作为项目进行逆向工程。

ExcelJS具有以下能力：

• 创建工作簿。
• 创建工作表。
• 处理页眉和页脚。
• 设置冻结或拆分视图。
• 设置自动过滤器。
• 对行和列的数据操作。
• 添加数据验证。
• 添加样式。
• 将图像插入工作簿。

此外，exceljs 更新及时并且完全免费，这一点和handsontable等在线表格解决方案相比确实有比较大的吸引力。

exceljs的使用也非常简单，比如下面的例子：

const ExcelJS = require('exceljs');
const workbook = new ExcelJS.Workbook();
// 创建工作簿
workbook.creator = 'Me';
workbook.lastModifiedBy = 'Her';
workbook.created = new Date(1985, 8, 30);
workbook.modified = new Date();
workbook.lastPrinted = new Date(2016, 9, 27);
// 添加工作表
const sheet = workbook.addWorksheet('My Sheet', {properties:{tabColor:{argb:'FFC0000'}}});
const sheet = workbook.addWorksheet('My Sheet', {views: [{showGridLines: false}]});
// create a sheet with the first row and column frozen
const sheet = workbook.addWorksheet('My Sheet', {views:[{state: 'frozen', xSplit: 1, ySplit:1}]});
// Create worksheets with headers and footers
const sheet = workbook.addWorksheet('My Sheet', {
  headerFooter:{firstHeader: "Hello Exceljs", firstFooter: "Hello World"}
});
// create new sheet with pageSetup settings for A4 - landscape
const worksheet =  workbook.addWorksheet('My Sheet', {
  pageSetup:{paperSize: 9, orientation:'landscape'}
});

目前 exceljs 在Github上有10.9k的star、1.4k的fork、超过20.1k的项目依赖它，代码贡献者人数超过160+。

从NPM的官方数据来看，ExcelJS的周下载量稳定在612351左右，同时处于稳定的上升期。与ExcelJS的直接竞争者handsontable的周下载量124,151相比，ExcelJS的下载量也有5.6倍之多。

SheetJS

SheetJS提供了经过大量测试的开源表格解决方案，可从几乎所有复杂的电子表格中提取有用的数据，并生成新的电子表格，这些电子表格可以与旧版和现代软件一起使用。

SheetJS具有以下明显特性：

• 支持大量数据类型：SheetJS 为每种 Excel 文件格式以及 Lotus 1-2-3、Numbers 和 Quattro Pro 提供了一个统一的界面。
• SheetJS 提供常见数据问题的解决方案：通过 JavaScript 快速处理复杂数据。
• SheetJS 无处不在：Web 浏览器、服务器、桌面应用程序、移动应用程序、Salesforce 和 Photoshop 插件，甚至在 Excel 中！

SheetJS社区版提供了与ReactJS、VueJS、Angular、Svelte、传统框架等不同的集成方案，比如下面是在ReactJS中集成SheetJS的示例：

import { read, utils, writeFile } from 'xlsx';
import React, { useCallback, useEffect, useState } from "react";
import { read, utils, writeFileXLSX } from 'xlsx';

export default function SheetJSReactAoO() {
  /* 组件状态是数组 */
  const [pres, setPres] = useState([]);

  /* 获取并更新状态一次*/
  useEffect(() => { (async() => {
    const f = await (await fetch("https://sheetjs.com/pres.xlsx")).arrayBuffer();
    const wb = read(f); 
    // parse the array buffer
    const ws = wb.Sheets[wb.SheetNames[0]]; 
    // 获取第一个工作表
    const data = utils.sheet_to_json(ws); 
    // 生成对象
    setPres(data); 
    // 更新状态
  })(); }, []);

  /* 获取状态数据并导出到XLSX */
  const exportFile = useCallback(() => {
    const ws = utils.json_to_sheet(pres);
    const wb = utils.book_new();
    utils.book_append_sheet(wb, ws, "Data");
    writeFileXLSX(wb, "SheetJSReactAoO.xlsx");
  }, [pres]);

  return (
    { /* 为数据生成行 */
      pres.map(pres => ())
    }
  
Name
Index

        
{pres.Name}
        
{pres.Index}
      

    Export XLSX
  
);
}

更多关于SheetJS的用法可以参考文末资料，这里不再具体展开。

目前 SheetJS 在Github上有32.5k的star、8k的fork、超过129k的项目依赖它，代码贡献者人数超过180+。

从NPM的官方数据来看，SheetJS的周下载量稳定在1,701,405左右，同时处于稳定的上升期。与SheetJS的直接竞争者handsontable的周下载量124,151相比，SheetJS的下载量是它的13.8倍之多，是ExcelJS的3倍之多！这一点通过下面的图就很容易看出来。

SheetJS vs. handsontable vs. ExcelJS 周下载量

当然，从MINIFIED + GZIPPED后代码体积来看，handsontable（33.2k）> ExcelJS（259.1k） > SheetJS（135.5k），所以相当于SheetJS用更少的代码实现了更复杂的功能。当然，如果考虑到按需加载，这一点可能并不构成最终选择SheetJS的直接理由，大家需要视情况而定。

node-xlsx

node-xlsx是简单的 excel 文件解析器和生成器，用于Node环境，具有以下特征：

• 依靠 SheetJS xlsx 模块来解析/构建 excel 表格。
• 使用 TypeScript 构建，用于对库中导出的类型进行静态类型检查。

使用node-xlsx也是非常简单，下面示例通过node-xlsx解析一个 xlsx 文件：

import xlsx from 'node-xlsx';
// Or var xlsx = require('node-xlsx').default;
// Parse a buffer
const workSheetsFromBuffer = xlsx.parse(fs.readFileSync(`${__dirname}/myFile.xlsx`));
// 解析文件
const workSheetsFromFile = xlsx.parse(`${__dirname}/myFile.xlsx`);

下面示例使用使用node-xlsx构建一个xlsx文件：

import xlsx from 'node-xlsx';
// Or var xlsx = require('node-xlsx').default;
const data = [
  [1, 2, 3],
  [true, false, null, 'sheetjs'],
  ['foo', 'bar', new Date('2014-02-19T14:30Z'), '0.3'],
  ['baz', null, 'qux'],
];
var buffer = xlsx.build([{name: 'mySheetName', data: data}]); // Returns a buffer

更多node-xlsx的用法可以参考文末资料。

目前 node-xlsx 在Github上有2.6k的star、270+的fork、超过10.9k的项目依赖它，代码贡献者人数20+，是一个值得关注的项目。

本文总结

本文主要和大家介绍下SheetJS 、exceljs 、handsontable、node-xlsx等不同的前端表格解决方案。相信通过本文的比较，大家对SheetJS 、exceljs 、handsontable、node-xlsx都会有一个初步的了解。在下次前端表格项目中也能有一个充分的、择优的考量！

因为篇幅有限，文章并没有过多展开，如果有兴趣，可以在我的主页继续阅读，同时文末的参考资料提供了大量优秀文档以供学习。最后，欢迎大家点赞、评论、转发、收藏！

参考资料

https://github.com/handsontable/handsontable

https://www.toutiao.com/article/7196542723220931087/

https://github.com/exceljs/exceljs

https://github.com/SheetJS/sheetjs

https://docs.sheetjs.com/docs/demos/frontend/react

https://www.grapecity.com.cn/developer/spreadjs

https://github.com/mgcrea/node-xlsx