数据网格和表格
各种 JavaScript UI 组件提供了更具交互性的编辑体验。大多数都能够与数组的数组或数据对象的数组进行交换。该演示重点关注一些开源数据网格。
¥Various JavaScript UI components provide a more interactive editing experience. Most are able to interchange with arrays of arrays or arrays of data objects. This demo focuses on a few open source data grids.
SheetJS 专业版 提供了额外的功能，如样式和图片。UI 工具通常支持许多高级功能。
¥SheetJS Pro offers additional features like styling and images. The UI tools typically support many of these advanced features.
为了消除任何混淆，本页链接的实时示例演示了 SheetJS 社区版数据交换。
¥To eliminate any confusion, the live examples linked from this page demonstrate SheetJS Community Edition data interchange.
托管生命周期
¥Managed Lifecycle
许多 UI 组件倾向于管理整个生命周期，提供导入和导出数据的方法。
¥Many UI components tend to manage the entire lifecycle, providing methods to import and export data.
sheet_to_json 实用程序函数生成对象数组，适用于许多库。当需要更高级的形状时，处理数组的数组会更容易。
¥The sheet_to_json utility function generates arrays of objects, which is
suitable for a number of libraries. When more advanced shapes are needed,
it is easier to process an array of arrays.
x-spreadsheet
凭借熟悉的 UI，x-spreadsheet 是现代编辑器的绝佳选择。
¥With a familiar UI, x-spreadsheet is an excellent choice for a modern editor.
¥Click here for a live integration demo.
¥The exposition has been moved to a separate page.
Canvas 数据网格
¥Canvas Datagrid
经过广泛的测试，canvas-datagrid 作为具有简单 API 的高性能网格脱颖而出。
¥After extensive testing, canvas-datagrid stood out as a high-performance grid
with a straightforward API.
¥Click here for a live integration demo.
¥The exposition has been moved to a separate page.
制表机
¥Tabulator
制表机 通过特殊的导出按钮提供深度支持。它在内部处理 SheetJS 操作。
¥Tabulator includes deep support through a special Export button. It handles the SheetJS operations internally.
Angular UI 网格
¥Angular UI Grid
这个 UI 网格适用于 AngularJS，而不是现代的 Angular。新项目不应该使用 AngularJS。该演示适用于旧应用。
¥This UI Grid is for AngularJS, not the modern Angular. New projects should not use AngularJS. This demo is included for legacy applications.
AngularJS 演示 涵盖了更一般的策略。
¥The AngularJS demo covers more general strategies.
¥Click here for a live integration demo.
Notes (click to show)
The library does not provide any way to modify the import button, so the demo includes a simple directive for a File Input HTML element. It also includes a sample service for export which adds an item to the export menu.
The demo SheetJSImportDirective follows the prescription from the README for
File input controls using readAsArrayBuffer, converting to a suitable
representation and updating the scope.
SheetJSExportService exposes export functions for XLSB and XLSX. Other
file formats can be exported by changing the bookType variable. It grabs
values from the grid, builds an array of arrays, generates a workbook and forces
a download. By setting the filename and sheetname options in the ui-grid
options, the output can be controlled.
框架生命周期
¥Framework Lifecycle
对于像 React 这样的现代框架，数据网格往往遵循框架状态和习惯用法。使用相同的 sheet_to_json 和 json_to_sheet / aoa_to_sheet 方法，但它们从共享状态对象中提取，该对象可以与页面上的其他按钮和组件一起改变。
¥For modern frameworks like React, data grids tend to follow the framework state
and idioms. The same sheet_to_json and json_to_sheet / aoa_to_sheet
methods are used, but they pull from a shared state object that can be mutated
with other buttons and components on the page.
React 数据网格
¥React Data Grid
¥The exposition has been moved to a separate page.
滑动数据网格
¥Glide Data Grid
¥The exposition has been moved to a separate page.
Material UI 数据网格
¥Material UI Data Grid
¥The exposition has been moved to a separate page.
vue3-table-lite
¥The exposition has been moved to a separate page.
标准 HTML 表格
¥Standard HTML Tables
许多 UI 组件都渲染样式化的 HTML 表格。可以从给定对基础 TABLE 元素的引用的表中提取数据：
¥Many UI components present styled HTML tables. Data can be extracted from the tables given a reference to the underlying TABLE element:
function export_html_table(table) {
const wb = XLSX.utils.table_to_book(table);
XLSX.writeFile(wb, "HTMLTable.xlsx");
} // yes, it's that easy!
SheetJS CE 专注于数据保存，将从表中提取值。
¥SheetJS CE is focused on data preservation and will extract values from tables.
SheetJS 专业版 在读取 TABLE 元素以及写入 XLSX 和其他电子表格格式时提供样式支持。
¥SheetJS Pro offers styling support when reading from TABLE elements and when writing to XLSX and other spreadsheet formats.
固定表格
¥Fixed Tables
当页面有原始 HTML 表时，最简单的解决方案是附加 id：
¥When the page has a raw HTML table, the easiest solution is to attach an id:
<script src="https://cdn.sheetjs.com/xlsx-0.20.2/package/dist/shim.min.js"></script>
<script src="https://cdn.sheetjs.com/xlsx-0.20.2/package/dist/xlsx.full.min.js"></script>
<!-- table with id `xport` -->
<table id="xport"><tr><td>SheetJS</td></tr></table>
<script>
/* as long as this script appears after the table, it will be visible */
var tbl = document.getElementById("xport");
const wb = XLSX.utils.table_to_book(tbl);
XLSX.writeFile(wb, "HTMLTable.xlsx");
</script>
在浏览器中以编程方式构建表时，保留引用：
¥When programmatically constructing the table in the browser, retain a reference:
/* assemble table */
var tbl = document.createElement("TABLE");
tbl.insertRow(0).insertCell(0).innerHTML = "SheetJS";
/* add to document body */
document.body.appendChild(tbl);
/* generate workbook and export */
const wb = XLSX.utils.table_to_book(tbl);
XLSX.writeFile(wb, "HTMLFlicker.xlsx");
/* remove from document body */
document.body.removeChild(tbl);
React
¥The exposition has been moved to a separate page.
Material UI 表
¥Material UI Table