Skip to main content

x-spreadsheet

凭借熟悉的 UI，x-spreadsheet 是现代编辑器的绝佳选择。

¥With a familiar UI, x-spreadsheet is an excellent choice for a modern editor.

单击此处查看实时独立集成演示。

¥Click here for a live standalone integration demo.

测试部署

该演示的最后验证时间为 2024 年 4 月 25 日。

¥This demo was last verified on 2024 April 25.

在线演示​

¥Live Demo

由于数据网格和文档生成器之间的 CSS 冲突，滚动等功能可能无法按预期工作。

¥Due to CSS conflicts between the data grid and the documentation generator, features like scrolling may not work as expected.

独立演示使用简单的 HTML 页面。

¥The standalone demo uses a simple HTML page.

Result
Loading...
Live Editor
function SheetJSXSpread() {
  const [url, setUrl] = React.useState("https://xlsx.nodejs.cn/pres.numbers");
  const [done, setDone] = React.useState(false);
  const ref = React.useRef(); // ref to DIV container
  const set_url = (evt) => setUrl(evt.target.value);

  return ( <>
    <div height={300} width={300} ref={ref}/>
    {!done && ( <>
      <b>URL: </b><input type="text" value={url} onChange={set_url} size="50"/>
      <br/><button onClick={async() => {
        /* fetch and parse workbook */
        const wb = XLSX.read(await (await fetch(url)).arrayBuffer());
        /* set up grid and load data */
        x_spreadsheet(ref.current).loadData(stox(wb));
        setDone(true);
      }}><b>Fetch!</b></button>
    </> )}
  </> );
}

集成库​

¥Integration Library

集成库可以从 SheetJS CDN 下载：

¥The integration library can be downloaded from the SheetJS CDN:

当在浏览器标签中使用时，它公开两个功能：xtos 和 stox。

¥When used in a browser tag, it exposes two functions: xtos and stox.

  • stox(worksheet) 返回适合 grid.loadData 的数据结构

    ¥stox(worksheet) returns a data structure suitable for grid.loadData

  • xtos(data) 接受 grid.getData 的结果并生成工作簿

    ¥xtos(data) accepts the result of grid.getData and generates a workbook

读取数据​

¥Reading Data

以下代码片段获取电子表格并加载网格：

¥The following snippet fetches a spreadsheet and loads the grid:

(async() => {
  const ab = await (await fetch("https://xlsx.nodejs.cn/pres.numbers")).arrayBuffer();
  grid.loadData(stox(XLSX.read(ab)));
})();

相同的模式可用于文件输入元素和其他数据源。

¥The same pattern can be used in file input elements and other data sources.

写入数据​

¥Writing Data

以下代码片段将网格数据导出到文件中：

¥The following snippet exports the grid data to a file:

/* build workbook from the grid data */
XLSX.writeFile(xtos(grid.getData()), "SheetJS.xlsx");

其他详情​

¥Other Details

获取库​

¥Obtaining the Library

x-data-spreadsheet NodeJS 包包含一个缩小的脚本，可以直接作为脚本标签插入。unpkg CDN 也提供此脚本：

¥The x-data-spreadsheet NodeJS packages include a minified script that can be directly inserted as a script tag. The unpkg CDN also serves this script:

<!-- x-spreadsheet stylesheet -->
<link rel="stylesheet" href="https://unpkg.com/x-data-spreadsheet/dist/xspreadsheet.css"/>
<!-- x-spreadsheet library -->
<script src="https://unpkg.com/x-data-spreadsheet/dist/xspreadsheet.js"></script>

预览和编辑数据​

¥Previewing and Editing Data

HTML 文档需要一个容器元素：

¥The HTML document needs a container element:

<div id="gridctr"></div>

网格初始化是一行代码：

¥Grid initialization is a one-liner:

var grid = x_spreadsheet(document.getElementById("gridctr"));

x-spreadsheet 处理整个编辑周期。无需干预。

¥x-spreadsheet handles the entire edit cycle. No intervention is necessary.

附加功能​

¥Additional Features

这个演示仅仅触及了表面。底层网格组件包括许多与 SheetJS 专业版 配合使用的附加功能。

¥This demo barely scratches the surface. The underlying grid component includes many additional features that work with SheetJS Pro.