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

前言

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

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

1.Handsontable是什么？

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

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

Handsontable数据处理流程

从NPM的使用数据来看，最近周下载量也达到了124k左右，而且基本维持稳定。

Handsontable下载量也达到了124k左右

2.Handsontable突出能力2.1 提供所有电子表格功能

使用 Handsontable 就像使用 Excel 或 Google 表格一样，没有陡峭的学习曲线，从第一天开始就可以高效工作。

Handsontable提供所有电子表格功能。图片来源：

2.2 对开发人员友好的 API

Handsontable 易于实施、灵活且超级可定制。 可以使用自定义插件扩展它并编辑源代码以将其设计为自有产品。 此外，还提供全面的 API、有用的教程以及社区和商业支持。

Handsontable对开发人员友好的 API

2.3 性能保证

可以处理大量数据，而不必担心性能问题。各行各业的大公司和初创公司都使用 Handsontable 来构建应用程序。

Handsontable的性能保证

3.Handsontable基础功能多列排序非连续选择数据过滤导出到文件数据验证条件格式合并单元格冻结行/列移动行/列调整行/列隐藏行/列上下文菜单评论等5.与React/Vue/Angular框架集成5.1 React集成

创建一个容器

<div id="example"></div>

然后直接在项目代码中使用：

import Handsontable from 'handsontable';import 'handsontable/dist/handsontable.full.min.css';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'   // 仅供非商业用途});

<template>  <hot-table :data="data" :rowHeaders="true" :colHeaders="true"></hot-table></template><script>  import { defineComponent } from 'vue';  import { HotTable } from '@handsontable/vue3';  import { registerAllModules } from 'handsontable/registry';  import 'handsontable/dist/handsontable.full.css';  // register Handsontable's modules  registerAllModules();  export default defineComponent({    data() {      return {        data: [          ['', 'Ford', 'Volvo', 'Toyota', 'Honda'],          ['2016', 10, 11, 12, 13],          ['2017', 20, 11, 14, 13],          ['2018', 30, 15, 12, 13]        ],      };    },    components: {      HotTable,    }  });</script>

/* file: app.component.ts */import { Component } from '@angular/core';@Component({  selector: 'app-root',  template: `    <div>      <hot-table        [data]="dataset"        [colHeaders]="true"        [rowHeaders]="true"        height="auto"        licenseKey="non-commercial-and-evaluation">          <hot-column data="id" [readOnly]="true" title="ID"></hot-column>          <hot-column data="name" title="Full name"></hot-column>          <hot-column data="address" title="Street name"></hot-column>      </hot-table>    </div>  `,})export class AppComponent {  dataset: any[] = [    {id: 1, name: 'Ted Right', address: 'Wall Street'},    {id: 2, name: 'Frank Honest', address: 'Pennsylvania Avenue'},    {id: 3, name: 'Joan Well', address: 'Broadway'},    {id: 4, name: 'Gail Polite', address: 'Bourbon Street'},    {id: 5, name: 'Michael Fair', address: 'Lombard Street'},    {id: 6, name: 'Mia Fair', address: 'Rodeo Drive'},    {id: 7, name: 'Cora Fair', address: 'Sunset Boulevard'},    {id: 8, name: 'Jack Right', address: 'Michigan Avenue'},  ];}import { NgModule } from '@angular/core';import { BrowserModule } from '@angular/platform-browser';import { HotTableModule } from '@handsontable/angular';import { registerAllModules } from 'handsontable/registry';import { AppComponent } from './app.component';// register Handsontable's modulesregisterAllModules();@NgModule({  imports: [ BrowserModule, HotTableModule ],  declarations: [ AppComponent ],  bootstrap: [ AppComponent ]})export class AppModule { }

本文主要和大家介绍一个优秀的在线表格控件Handsontable。因为笔者也没有在生产项目中使用、部署过Handsontable，所以只是做了一个简短的介绍，但是文末的参考资料提供了大量优秀文档以供学习，如果有兴趣可以自行阅读。如果大家有什么好的在线表格解决方案，还原在评论区留言。

参考资料