Handsontable 构建在线可编辑 Excel 表格

Question

Handsontable 是一个构建在线可编辑 Excel 表格的 JavaScript 插件，可以搭配 JavaScript、React、Angular 和 Vue 使用，当您使用 Handsontable 时，就像在使用 Excel 或 GoogleSheet 一样，用户习惯和操作都非常的便捷。

对开发人员友好的 api，Handsontable 易于实现，灵活，超级可定制。您可以扩展它与自定义插件，并编辑源代码，以调整它为您的产品。此外您还可以访问一个全面的 API、有用的教程以及社区和商业支持。

设计来执行，您最终可以使用大量的数据，而不必担心性能问题。跨行业的大公司和初创企业使用 Handsontable 来构建对其业务至关重要的应用程序。

安装

使用 NPM 安装最新版本。

npm install handsontable

您可以使用 Yarn，NuGet 或 其他方法，您可以直接从 jsDelivr 直接引入 JS 文件。

创建一个占位符--一个HTML元素，用于保存数据网格的位置。

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

导入Handsontable及其样式表。

import Handsontable from "handsontable";
import 'handsontable/dist/handsontable.full.css';

或者，您可以简单地将其嵌入到HTML文件中。

<script src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css" rel="stylesheet">

现在，将占位符转换为包含示例数据的数据网格。

const data = [
  ['', 'Tesla', 'Volvo', 'Toyota', 'Ford'],
  ['2019', 10, 11, 12, 13],
  ['2020', 20, 11, 14, 13],
  ['2021', 30, 15, 12, 13]
];

const container = document.getElementById('example');
const hot = new Handsontable(container, {
  data: data,
  rowHeaders: true,
  colHeaders: true
});

特征

列出一些最流行的特性：

• 多列排序
• 非连续选择
• 过滤数据
• 导出到文件
• 验证数据
• 条件格式
• 合并单元
• 自定义单元格类型
• 冻结行/柱
• 移动行/列
• 调整行/列的大小
• 隐藏行/列
• 上下文菜单
• 评论意见
• 自动填充选项

框架支持

使用一个可用的包装器将Handsontable与您最喜欢的框架一起使用：

• Handsontable for Vue
• Handsontable for React
• Handsontable for Angular

许可证密钥

许可证密钥是强制性的，因为 Handsontable 7.0.0(2019年3月公布)。

如果您将 Handsontable 用于非用于金钱补偿的目的，例如但不限于教学、学术研究、评估、测试和实验，请传递以下短语：'non-commercial-and-evaluation' 如下所示：

const hot = new Handsontable(container, {
  data: data,
  rowHeaders: true,
  colHeaders: true,
  licenseKey: 'non-commercial-and-evaluation'
});

另一方面，如果在支持商业活动的项目中使用 Handsontable，则必须在 Handsontable.com 获取授权，许可密钥在脱机模式下进行验证。没有连接到任何服务器。点击这里 了解更多 关于它的工作原理。

相关链接

• Developer guides
• API Reference
• Release notes
• Twitter (News and updates)
• github 地址：https://github.com/handsontable/handsontable