sheetjs
/
docs.sheetjs.com
1
Fork 4
Code Issues Pull Requests 1 Projects Releases Wiki Activity

eleventy

This commit is contained in:
SheetJS 2023-05-07 09:58:36 -04:00
parent 32021ab7ed
commit 8c754069bf
57 changed files with 685 additions and 365 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.spelling
View File

@ -8,6 +8,7 @@ pagination_prev
pagination_next
TabItem
DocCardList
CodeBlock
# frontmatter noise
api
@ -158,8 +159,10 @@ ES5
ES6
ESM
ETH
Eleventy
Endian
Ethercalc
ExecJS
ExpressJS
ExtendScript
Fastify
@ -168,6 +171,7 @@ FileReaderSync
FileSaver
GBK
GatsbyJS
GitHub
GitLab
Goja
GraphQL
@ -239,6 +243,7 @@ R9
RDBMS
README
RESTlets
RSS
ReactJS
Redis
RequireJS
@ -259,6 +264,7 @@ Snowpack
SuiteScript
SuiteScripts
Suitelets
SvelteKit
SystemJS
Tauri
TensorFlow

45
docz/docs/02-getting-started/01-installation/01-standalone.mdx
View File

@ -7,17 +7,18 @@ sidebar_custom_props:
---
import current from '/version.js';
import CodeBlock from '@theme/CodeBlock';
# Standalone Browser Scripts
Each standalone release script is available at <https://cdn.sheetjs.com/>.
<div>The current version is {current} and can be referenced as follows:</div>
<p>The current version is {current} and can be referenced as follows:</p>
<pre><code parentName="pre" {...{"className": "language-html"}}>{`\
<CodeBlock language="html">{`\
<!-- use version ${current} -->
<script lang="javascript" src="https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.full.min.js"></script>`}
</code></pre>
</CodeBlock>
:::info
@ -43,10 +44,10 @@ They are known CDN bugs.
`xlsx.full.min.js` is the complete standalone script. It includes support for
reading and writing many spreadsheet formats.
<pre><code parentName="pre" {...{"className": "language-html"}}>{`\
<CodeBlock language="html">{`\
<!-- use xlsx.full.min.js from version ${current} -->
<script lang="javascript" src="https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.full.min.js"></script>`}
</code></pre>
</CodeBlock>
A slimmer build is generated at `dist/xlsx.mini.min.js`. Compared to full build:
@ -59,10 +60,10 @@ A slimmer build is generated at `dist/xlsx.mini.min.js`. Compared to full build:
Replace references to `xlsx.full.min.js` with `xlsx.mini.min.js`. Starting from
scratch, a single script tag should be added at the top of the HTML page:
<pre><code parentName="pre" {...{"className": "language-html"}}>{`\
<CodeBlock language="html">{`\
<!-- use xlsx.mini.min.js from version ${current} -->
<script lang="javascript" src="https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.mini.min.js"></script>`}
</code></pre>
</CodeBlock>
</details>
@ -72,16 +73,16 @@ For broad compatibility with JavaScript engines, the library is written using
ECMAScript 3 language dialect. A "shim" script provides implementations of
functions for older browsers and environments.
<div>Due to SSL compatibility issues, older versions of IE will not be able to
Due to SSL compatibility issues, older versions of IE will not be able to
use the CDN scripts directly. They should be downloaded and saved to a public
directory in the site:
<ul>
<li>Standalone: <a href={`https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.mini.min.js`}>https://cdn.sheetjs.com/xlsx-{current}/package/dist/xlsx.mini.min.js</a></li>
<li>Shim: <a href={`https://cdn.sheetjs.com/xlsx-${current}/package/dist/shim.min.js`}>https://cdn.sheetjs.com/xlsx-{current}/package/dist/shim.min.js</a></li>
</ul>
</div>
Add a `script` reference to the shim before the script tag that loads `xlsx.js`:
Add a `script` reference to the shim before the standalone script:
```html
<!-- add the shim first -->
@ -95,10 +96,10 @@ Add a `script` reference to the shim before the script tag that loads `xlsx.js`:
The standalone scripts can be loaded using `importScripts` at the top of the
worker scripts:
<pre><code parentName="pre" {...{"className": "language-js"}}>{`\
<CodeBlock language="js">{`\
importScripts("https://cdn.sheetjs.com/xlsx-${current}/package/dist/shim.min.js");
importScripts("https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.full.min.js");`}
</code></pre>
</CodeBlock>
## ECMAScript Module Imports
@ -114,42 +115,42 @@ described [in the next section](/docs/getting-started/installation/frameworks).
The ECMAScript Module build is saved to `xlsx.mjs` and can be directly added to
a page with a `script` tag using `type="module"`:
<pre><code parentName="pre" {...{"className": "language-html"}}>{`\
<CodeBlock language="html">{`\
<script type="module">
import { read, writeFileXLSX } from "https://cdn.sheetjs.com/xlsx-${current}/package/xlsx.mjs";
</script>`}
</code></pre>
</CodeBlock>
If Encoding support is required, `cpexcel.full.mjs` must be manually imported:
<pre><code parentName="pre" {...{"className": "language-html"}}>{`\
<CodeBlock language="html">{`\
<script type="module">
/* load the codepage support library for extended support with older formats */
import { set_cptable } from "https://cdn.sheetjs.com/xlsx-${current}/package/xlsx.mjs";
import * as cptable from 'https://cdn.sheetjs.com/xlsx-${current}/package/dist/cpexcel.full.mjs';
set_cptable(cptable);
</script>`}
</code></pre>
</CodeBlock>
Dynamic imports with `import()` can be used in data export scenarios. This
example will download the library only when the export button is pressed:
<pre><code parentName="pre" {...{"className": "language-html"}}>{`\
<CodeBlock language="html">{`\
<button id="xport">Export</button>
<script type="module">
xport.addEventListener("click", async() => {
\n\
/* dynamically import the library in the event listener */
// highlight-next-line
const XLSX = await import("https://cdn.sheetjs.com/xlsx-${current}/package/xlsx.mjs");
\n\
const wb = XLSX.utils.book_new();
const ws = XLSX.utils.aoa_to_sheet([["a","b","c"],[1,2,3]]);
XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
XLSX.writeFile(wb, "SheetJSESMTest.xlsx");
});
</script>`}
</code></pre>
</CodeBlock>
Web Worker support is noted in [the demo](/docs/demos/bigdata/worker#installation)
@ -164,8 +165,8 @@ Bower is deprecated and the maintainers recommend using other tools.
The Bower package manager plays nice with the CDN tarballs:
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
npx bower install https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
</code></pre>
</CodeBlock>
Bower will place the standalone scripts in `bower_components/js-xlsx/dist/`

28
docz/docs/02-getting-started/01-installation/02-frameworks.md
View File

@ -18,21 +18,21 @@ Each standalone release package is available at <https://cdn.sheetjs.com/>. The
NodeJS package is designed to be used with frameworks and bundlers. It is a
proper ECMAScript Module release which can be optimized with developer tools.
<Tabs>
<Tabs groupId="pm">
<TabItem value="npm" label="npm">
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
</code></pre>
</CodeBlock>
</TabItem>
<TabItem value="pnpm" label="pnpm">
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
pnpm install https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
</code></pre>
</CodeBlock>
</TabItem>
<TabItem value="yarn" label="Yarn" default>
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
</code></pre>
</CodeBlock>
</TabItem>
</Tabs>
@ -64,24 +64,24 @@ This is a known registry bug
For existing projects, the easiest approach is to uninstall and reinstall:
<Tabs>
<Tabs groupId="pm">
<TabItem value="npm" label="npm">
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
npm rm --save xlsx
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
</code></pre>
</CodeBlock>
</TabItem>
<TabItem value="pnpm" label="pnpm">
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
pnpm rm xlsx
pnpm install https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
</code></pre>
</CodeBlock>
</TabItem>
<TabItem value="yarn" label="Yarn" default>
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
yarn remove xlsx
yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
</code></pre>
</CodeBlock>
</TabItem>
</Tabs>

49
docz/docs/02-getting-started/01-installation/03-nodejs.md
View File

@ -16,28 +16,27 @@ import TabItem from '@theme/TabItem';
Tarballs are available on <https://cdn.sheetjs.com>.
<div>Each individual version can be referenced using a similar URL pattern.<br/>
<a href={`https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}>https://cdn.sheetjs.com/xlsx-{current}/xlsx-{current}.tgz</a> is the URL for {current}</div>
<p><a href={`https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}>https://cdn.sheetjs.com/xlsx-{current}/xlsx-{current}.tgz</a> is the URL for version {current}</p>
## Installation
Tarballs can be directly installed using a package manager:
<Tabs>
<Tabs groupId="pm">
<TabItem value="npm" label="npm">
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
</code></pre>
</CodeBlock>
</TabItem>
<TabItem value="pnpm" label="pnpm">
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
pnpm install https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
</code></pre>
</CodeBlock>
</TabItem>
<TabItem value="yarn" label="Yarn" default>
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
</code></pre>
</CodeBlock>
</TabItem>
</Tabs>
@ -60,24 +59,24 @@ This is a known registry bug
For existing projects, the easiest approach is to uninstall and reinstall:
<Tabs>
<Tabs groupId="pm">
<TabItem value="npm" label="npm">
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
npm rm --save xlsx
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
</code></pre>
</CodeBlock>
</TabItem>
<TabItem value="pnpm" label="pnpm">
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
pnpm rm xlsx
pnpm install https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
</code></pre>
</CodeBlock>
</TabItem>
<TabItem value="yarn" label="Yarn" default>
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
yarn remove xlsx
yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
</code></pre>
</CodeBlock>
</TabItem>
</Tabs>
@ -100,29 +99,29 @@ in `package.json` can control module resolution:
For general stability, "vendoring" modules is the recommended approach:
<div>1) Download the tarball (<code parentName="pre">xlsx-{current}.tgz</code>) for the desired version. The current
version is available at <a href={`https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}>https://cdn.sheetjs.com/xlsx-{current}/xlsx-{current}.tgz</a></div><br/>
<p>1) Download the tarball (<code parentName="pre">xlsx-{current}.tgz</code>) for the desired version. The current
version is available at <a href={`https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}>https://cdn.sheetjs.com/xlsx-{current}/xlsx-{current}.tgz</a></p>
2) Create a `vendor` subfolder at the root of your project and move the tarball
to that folder. Add it to your project repository.
3) Install the tarball using a package manager:
<Tabs>
<Tabs groupId="pm">
<TabItem value="npm" label="npm">
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
npm i --save file:vendor/xlsx-${current}.tgz`}
</code></pre>
</CodeBlock>
</TabItem>
<TabItem value="pnpm" label="pnpm">
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
pnpm install file:vendor/xlsx-${current}.tgz`}
</code></pre>
</CodeBlock>
</TabItem>
<TabItem value="yarn" label="Yarn" default>
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
yarn add file:vendor/xlsx-${current}.tgz`}
</code></pre>
</CodeBlock>
</TabItem>
</Tabs>

2
docz/docs/02-getting-started/01-installation/04-amd.md
View File

@ -15,7 +15,7 @@ Each standalone release script is available at <https://cdn.sheetjs.com/>.
`xlsx.full.min.js` supports AMD with name `xlsx` out of the box.
<div><a href={`https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.full.min.js`}>https://cdn.sheetjs.com/xlsx-{current}/package/dist/xlsx.full.min.js</a> is the URL for {current}</div><br/>
<p><a href={`https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.full.min.js`}>https://cdn.sheetjs.com/xlsx-{current}/package/dist/xlsx.full.min.js</a> is the URL for {current}</p>
:::note

2
docz/docs/02-getting-started/01-installation/05-extendscript.md
View File

@ -14,7 +14,7 @@ Each standalone release script is available at <https://cdn.sheetjs.com/>.
`xlsx.extendscript.js` is an ExtendScript build for Photoshop and InDesign.
<div><a href={`https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.extendscript.js`}>https://cdn.sheetjs.com/xlsx-{current}/package/dist/xlsx.extendscript.js</a> is the URL for {current}</div><br/>
<p><a href={`https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.extendscript.js`}>https://cdn.sheetjs.com/xlsx-{current}/package/dist/xlsx.extendscript.js</a> is the URL for {current}</p>
After downloading the script, it can be directly referenced with `#include`:

17
docz/docs/02-getting-started/01-installation/06-deno.md
View File

@ -9,6 +9,7 @@ sidebar_custom_props:
import current from '/version.js';
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import CodeBlock from '@theme/CodeBlock';
# Deno
@ -16,10 +17,10 @@ Module scripts and type definitions are available at <https://cdn.sheetjs.com/>.
Using the URL imports, `deno run` will automatically download scripts and types:
<pre><code parentName="pre" {...{"className": "language-ts"}}>{`\
<CodeBlock language="ts">{`\
// @deno-types="https://cdn.sheetjs.com/xlsx-${current}/package/types/index.d.ts"
import * as XLSX from 'https://cdn.sheetjs.com/xlsx-${current}/package/xlsx.mjs';`}
</code></pre>
</CodeBlock>
The `@deno-types` comment instructs Deno to use the type definitions.
@ -42,28 +43,28 @@ new versions are released!
If Encoding support is required, `cpexcel.full.mjs` must be manually imported:
<pre><code parentName="pre" {...{"className": "language-ts"}}>{`\
<CodeBlock language="ts">{`\
/* load the codepage support library for extended support with older formats */
import * as cptable from 'https://cdn.sheetjs.com/xlsx-${current}/package/dist/cpexcel.full.mjs';
XLSX.set_cptable(cptable);`}
</code></pre>
</CodeBlock>
## Upgrade Notes
Upgrading to the latest version involves changing the import URLs. The import
and the types URLs should be updated at the same time:
<pre><code parentName="pre" {...{"className": "language-diff"}}>{`\
<CodeBlock language="diff">{`\
-// @deno-types="https://cdn.sheetjs.com/xlsx-0.18.3/package/types/index.d.ts"
+// @deno-types="https://cdn.sheetjs.com/xlsx-${current}/package/types/index.d.ts"
\n\
-import * as XLSX from 'https://cdn.sheetjs.com/xlsx-0.18.3/package/xlsx.mjs';
+import * as XLSX from 'https://cdn.sheetjs.com/xlsx-${current}/package/xlsx.mjs';
\n\
-import * as cptable from 'https://cdn.sheetjs.com/xlsx-0.18.3/package/dist/cpexcel.full.mjs';
+import * as cptable from 'https://cdn.sheetjs.com/xlsx-${current}/package/dist/cpexcel.full.mjs';
`}
</code></pre>
</CodeBlock>
#### Deno Registry

6
docz/docs/02-getting-started/01-installation/07-bun.md
View File

@ -10,9 +10,9 @@ import current from '/version.js';
# Bun
Each standalone release script is available at <https://cdn.sheetjs.com/>.
Module scripts are available at <https://cdn.sheetjs.com/>.
<div><a href={`https://cdn.sheetjs.com/xlsx-${current}/package/xlsx.mjs`}>https://cdn.sheetjs.com/xlsx-{current}/package/xlsx.mjs</a> is the URL for {current}</div><br/>
<p><a href={`https://cdn.sheetjs.com/xlsx-${current}/package/xlsx.mjs`}>https://cdn.sheetjs.com/xlsx-{current}/package/xlsx.mjs</a> is the URL for {current}</p>
After downloading the script, it can be directly imported:
@ -41,7 +41,7 @@ new versions are released!
If Encoding support is required, `cpexcel.full.mjs` must be manually imported.
<div><a href={`https://cdn.sheetjs.com/xlsx-${current}/package/dist/cpexcel.full.mjs`}>https://cdn.sheetjs.com/xlsx-{current}/package/dist/cpexcel.full.mjs</a> is the URL for {current}</div><br/>
<p><a href={`https://cdn.sheetjs.com/xlsx-${current}/package/dist/cpexcel.full.mjs`}>https://cdn.sheetjs.com/xlsx-{current}/package/dist/cpexcel.full.mjs</a> is the URL for {current}</p>
```ts

177
docz/docs/02-getting-started/02-example.mdx
View File

@ -192,34 +192,24 @@ worksheet["!cols"] = [ { wch: max_width } ];
</details>
After cleanup, the generated workbook looks like the screenshot below:
![Final export](pathname:///example/final.png)
## Export a File
`XLSX.writeFile` creates a spreadsheet file and tries to write it to the system.
In the browser, it will try to prompt the user to download the file. In NodeJS,
it will write to the local directory.
:::note
`XLSX.writeFileXLSX` only writes XLSX files and is recommended when the export
will always be in the `.xlsx` format. `writeFileXLSX` is more amenable to tree
shaking. This example uses `XLSX.writeFile` since `writeFileXLSX` does not
support other common export formats like `.xls` or `.xlsb` or `.csv`.
`compression: true` enables ZIP compression for XLSX and other formats.
:::
```js
XLSX.writeFile(workbook, "Presidents.xlsx", { compression: true });
```
![Final export](pathname:///example/final.png)
## Live Demo
This demo runs in the web browser! Click "Click to Generate File!" and the
browser should generate a XLSX file.
browser should try to create `Presidents.xlsx`
```jsx live
function Presidents() { return ( <button onClick={async () => {
@ -257,17 +247,16 @@ function Presidents() { return ( <button onClick={async () => {
}}><b>Click to Generate file!</b></button> ); }
```
<https://sheetjs.com/pres.html> is a hosted version of this demo.
## Run the Demo Locally
<Tabs>
<TabItem value="browser" label="Web Browser">
Save the following script to `snippet.html` and open the page. The page must be
hosted (no `file:///` access).
Save the following script to `SheetJSStandaloneDemo.html`:
<https://sheetjs.com/pres.html> is a hosted version of the page.
<CodeBlock language="html" title="snippet.html">{`\
<CodeBlock language="html" title="SheetJSStandaloneDemo.html">{`\
<body>
<script src="https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.full.min.js"></script>
<script>
@ -308,6 +297,16 @@ hosted (no `file:///` access).
</body>`}
</CodeBlock>
After saving the file, run a local web server in the folder with the HTML file.
For example, if NodeJS is installed:
```bash
npx http-server .
```
The server process will display a URL (typically `http://127.0.0.1:8080`). Open
`http://127.0.0.1:8080/SheetJSStandaloneDemo.html` in your browser.
</TabItem>
<TabItem value="nodejs" label="Command-Line (NodeJS)">
@ -317,9 +316,9 @@ Install the dependencies:
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
</CodeBlock>
Save the following script to `snippet.js` and run `node snippet.js`:
Save the following script to `SheetJSNodeJS.js`:
```js title="snippet.js"
```js title="SheetJSNodeJS.js"
const XLSX = require("xlsx");
(async() => {
@ -357,6 +356,14 @@ const XLSX = require("xlsx");
})();
```
After saving the script, run the script:
```bash
node SheetJSNodeJS.js
```
This script will write a new file `Presidents.xlsx` in the same folder.
:::caution
Native `fetch` support was added in NodeJS 18. For older versions of NodeJS,
@ -367,13 +374,13 @@ like `axios` presents a similar API for fetching data:
Install the dependencies:
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz axios`}
</code></pre>
</CodeBlock>
The differences in the script are highlighted below.
Save the following script to `SheetJSAxios.js` (differences are highlighted):
```js title="snippet.js"
```js title="SheetJSAxios.js"
const XLSX = require("xlsx");
// highlight-next-line
const axios = require("axios");
@ -414,6 +421,14 @@ const axios = require("axios");
})();
```
After saving the script, run the script:
```bash
node SheetJSAxios.js
```
This script will write a new file `Presidents.xlsx` in the same folder.
</details>
:::
@ -423,9 +438,9 @@ const axios = require("axios");
<Tabs>
<TabItem value="deno" label="Deno">
Save the following script to `snippet.ts` and run `deno run -A snippet.ts`:
Save the following script to `SheetJSDeno.ts`:
<CodeBlock language="ts" title="snippet.ts">{`\
<CodeBlock language="ts" title="SheetJSDeno.ts">{`\
// @deno-types="https://cdn.sheetjs.com/xlsx-${current}/package/types/index.d.ts"
import * as XLSX from 'https://cdn.sheetjs.com/xlsx-${current}/package/xlsx.mjs';
\n\
@ -462,14 +477,26 @@ worksheet["!cols"] = [ { wch: max_width } ];
XLSX.writeFile(workbook, "Presidents.xlsx", { compression: true });`}
</CodeBlock>
After saving the script, run the script:
```bash
deno run -A SheetJSDeno.ts
```
This script will write a new file `Presidents.xlsx` in the same folder.
</TabItem>
<TabItem value="bun" label="Bun">
<div>Download <a href={`https://cdn.sheetjs.com/xlsx-${current}/package/xlsx.mjs`}>https://cdn.sheetjs.com/xlsx-{current}/package/xlsx.mjs</a> to <code>xlsx.mjs</code></div>
<p>Download <a href={`https://cdn.sheetjs.com/xlsx-${current}/package/xlsx.mjs`}>https://cdn.sheetjs.com/xlsx-{current}/package/xlsx.mjs</a> to <code>xlsx.mjs</code>:</p>
Save the following script to `snippet.js` and run with `bun snippet.js`:
<CodeBlock language="bash">{`\
curl -LO https://cdn.sheetjs.com/xlsx-${current}/package/xlsx.mjs`}
</CodeBlock>
```js title="snippet.js"
Save the following script to `SheetJSBun.js`:
```js title="SheetJSBun.js"
import * as XLSX from './xlsx.mjs';
import * as fs from 'fs';
XLSX.set_fs(fs);
@ -507,6 +534,14 @@ worksheet["!cols"] = [ { wch: max_width } ];
XLSX.writeFile(workbook, "Presidents.xlsx", { compression: true });
```
After saving the script, run the script:
```bash
bun SheetJSBun.js
```
This script will write a new file `Presidents.xlsx` in the same folder.
</TabItem>
</Tabs>
@ -516,9 +551,9 @@ XLSX.writeFile(workbook, "Presidents.xlsx", { compression: true });
<TabItem value="desktop" label="Desktop App">
Save the following script to `snippet.html`:
Save the following script to `SheetJSNW.html`:
<CodeBlock language="html" title="snippet.html">{`\
<CodeBlock language="html" title="SheetJSNW.html">{`\
<body>
<script src="https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.full.min.js"></script>
<script>
@ -566,7 +601,7 @@ Save the following to `package.json`:
"name": "sheetjs-nwjs",
"author": "sheetjs",
"version": "0.0.0",
"main": "snippet.html",
"main": "SheetJSNW.html",
"dependencies": {
"nw": "~0.66.0",
"xlsx": "https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz"
@ -596,19 +631,19 @@ of the React Native documentation before testing the demo.
Create a new project by running the following commands in the Terminal:
<CodeBlock language="bash">{`\
npx react-native@0.70.6 init SheetJSPres --version="0.70.6"
npx react-native@0.71 init SheetJSPres --version="0.72.0-rc.1"
cd SheetJSPres
\n\
npm i -S https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz react-native-blob-util@0.17.1`}
</CodeBlock>
Save the following to `App.js` in the project:
Save the following to `App.tsx` in the project:
```js title="App.js"
```js title="App.tsx"
import React from 'react';
import { Alert, Button, SafeAreaView, Text, View } from 'react-native';
import { utils, version, write } from 'xlsx';
import RNFetchBlob from 'react-native-blob-util';
import RNBU from 'react-native-blob-util';
const make_workbook = async() => {
/* fetch JSON data and parse */
@ -646,8 +681,15 @@ const make_workbook = async() => {
const buf = write(workbook, {type:'buffer', bookType:"xlsx"});
/* write buffer to file */
const filename = RNFetchBlob.fs.dirs.DocumentDir + "/Presidents.xlsx";
await RNFetchBlob.fs.writeFile(filename, Array.from(buf), 'ascii');
const filename = RNBU.fs.dirs.DocumentDir + "/Presidents.xlsx";
await RNBU.fs.writeFile(filename, Array.from(buf), 'ascii');
/* Copy to downloads directory (android) */
try { await RNBU.MediaCollection.copyToMediaStore({
parentFolder: "",
mimeType: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
name: "Presidents.xlsx"
}, "Download", filename); } catch(e) {}
return filename;
};
@ -713,27 +755,13 @@ base64 -D pres.b64 > Presidents.xlsx
This command generates `Presidents.xlsx` which can be opened.
:::note Device Testing
:::info Device Testing
For testing on a real device, Android 10+ requires an additional step to access
the generated file. Add highlighted lines to `App.js`:
["Running on Device"](https://reactnative.dev/docs/running-on-device) in the
React Native docs covers device configuration.
```jsx title="App.js"
/* write buffer to file */
const filename = RNFetchBlob.fs.dirs.DocumentDir + "/Presidents.xlsx";
await RNFetchBlob.fs.writeFile(filename, Array.from(buf), 'ascii');
// highlight-start
await RNFetchBlob.MediaCollection.copyToMediaStore({
parentFolder: "",
mimeType: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
name: "Presidents.xlsx"
}, "Download", filename);
// highlight-end
return filename;
```
`Presidents.xlsx` will be copied to the `Downloads` folder.
`Presidents.xlsx` will be copied to the `Downloads` folder. The file is visible
in the Files app and can be opened with the Google Sheets app.
:::
@ -761,6 +789,37 @@ npm run ios
After clicking "Press to Export", the app will show an alert with the location
to the generated file.
:::info Device Testing
["Running on Device"](https://reactnative.dev/docs/running-on-device) in the
React Native docs covers device configuration.
The `UIFileSharingEnabled` and `LSSupportsOpeningDocumentsInPlace` entitlements
are required for iOS to show the generated files in the "Files" app.
The highlighted lines should be added to the iOS project `Info.plist` just
before the last `</dict>` tag:
```xml title="ios/SheetJSPres/Info.plist"
<key>UIViewControllerBasedStatusBarAppearance</key>
<false/>
<!-- highlight-start -->
<key>UIFileSharingEnabled</key>
<true/>
<key>LSSupportsOpeningDocumentsInPlace</key>
<true/>
<!-- highlight-end -->
</dict>
</plist>
```
After adding the settings and rebuilding the app, the file will be visible in
the "Files" app. Under "On My iPhone", there will be a folder `SheetJSPres`.
Within the folder there will be a file named `Presidents`. Touch the file to
see a preview of the data. The Numbers app can open the file.
:::
</TabItem>
</Tabs>

13
docz/docs/03-demos/01-frontend/01-react.md
View File

@ -6,6 +6,7 @@ sidebar_position: 1
---
import current from '/version.js';
import CodeBlock from '@theme/CodeBlock';
ReactJS is a JS library for building user interfaces.
@ -133,12 +134,12 @@ This demo was last run on 2023 February 28 using `create-react-app@5.0.1` and
2) Install the SheetJS dependency and start the dev server:
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
cd sheetjs-react
npm install
npm i
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz
npm start`}
</code></pre>
</CodeBlock>
3) Open a web browser and access the displayed URL (`http://localhost:3000`)
@ -213,12 +214,12 @@ This demo was last run on 2023 February 28 using `create-react-app@5.0.1` and
2) Install the SheetJS dependency and start the dev server:
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
cd sheetjs-react
npm install
npm i
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz
npm start`}
</code></pre>
</CodeBlock>
3) Open a web browser and access the displayed URL (`http://localhost:3000`)

13
docz/docs/03-demos/01-frontend/02-vue.md
View File

@ -6,6 +6,7 @@ sidebar_position: 2
---
import current from '/version.js';
import CodeBlock from '@theme/CodeBlock';
VueJS is a JS library for building user interfaces.
@ -129,12 +130,12 @@ This demo was last run on 2023 April 06 using `vue@3.2.47`. When running
2) Install the SheetJS dependency and start the dev server:
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
cd sheetjs-vue
npm install
npm i
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz
npm run dev`}
</code></pre>
</CodeBlock>
3) Open a web browser and access the displayed URL (`http://localhost:5173`)
@ -205,12 +206,12 @@ This demo was last run on 2023 April 06 using `vue@3.2.47`. When running
2) Install the SheetJS dependency and start the dev server:
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
cd sheetjs-vue
npm install
npm i
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz
npm run dev`}
</code></pre>
</CodeBlock>
3) Open a web browser and access the displayed URL (`http://localhost:5173`)

17
docz/docs/03-demos/01-frontend/03-angular.md
View File

@ -8,6 +8,7 @@ sidebar_position: 3
import current from '/version.js';
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import CodeBlock from '@theme/CodeBlock';
Angular is a JS library for building user interfaces.
@ -163,13 +164,13 @@ This demo was last run on 2023 February 21 using Angular CLI `15.1.6`
2) Install the SheetJS dependency and start the dev server:
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
cd sheetjs-angular
npm install
npm i
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz
npx @angular/cli analytics disable
npm start`}
</code></pre>
</CodeBlock>
3) Open a web browser and access the displayed URL (`http://localhost:4200`)
@ -251,13 +252,13 @@ This demo was last run on 2023 February 21 using Angular CLI `15.1.6`
2) Install the SheetJS dependency and start the dev server:
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
cd sheetjs-angular
npm install
npm i
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz
npx @angular/cli analytics disable
npm start`}
</code></pre>
</CodeBlock>
3) Open a web browser and access the displayed URL (`http://localhost:4200`)
@ -591,10 +592,10 @@ curl -o tsconfig.app.json -L https://docs.sheetjs.com/angular/versions/tsconfig.
2) install project and dependencies:
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
npm i
npm i -S https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
</code></pre>
</CodeBlock>
3) start a local server with

13
docz/docs/03-demos/01-frontend/04-svelte.md
View File

@ -6,6 +6,7 @@ sidebar_position: 4
---
import current from '/version.js';
import CodeBlock from '@theme/CodeBlock';
Svelte is a JS library for building user interfaces.
@ -130,12 +131,12 @@ This demo was last run on 2023 March 08 using `svelte@3.55.1`. When running
2) Install the SheetJS dependency and start the dev server:
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
cd sheetjs-svelte
npm install
npm i
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz
npm run dev`}
</code></pre>
</CodeBlock>
3) Open a web browser and access the displayed URL (`http://localhost:5173`)
@ -208,12 +209,12 @@ This demo was last run on 2023 March 08 using `svelte@3.55.1`. When running
2) Install the SheetJS dependency and start the dev server:
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
cd sheetjs-svelte
npm install
npm i
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz
npm run dev`}
</code></pre>
</CodeBlock>
3) Open a web browser and access the displayed URL (`http://localhost:5173`)

154
docz/docs/03-demos/01-frontend/08-bundler.md
View File

@ -48,21 +48,21 @@ Web Worker scripts can be bundled using the same approach.
1) Install the tarball using a package manager:
<Tabs>
<Tabs groupId="pm">
<TabItem value="npm" label="npm">
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
</code></pre>
</CodeBlock>
</TabItem>
<TabItem value="pnpm" label="pnpm">
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
pnpm install https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
</code></pre>
</CodeBlock>
</TabItem>
<TabItem value="yarn" label="Yarn" default>
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
</code></pre>
</CodeBlock>
</TabItem>
</Tabs>
@ -100,21 +100,21 @@ local testing, a bundled script can save tens of milliseconds per run.
1) Install the tarball using a package manager:
<Tabs>
<Tabs groupId="pm">
<TabItem value="npm" label="npm">
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
</code></pre>
</CodeBlock>
</TabItem>
<TabItem value="pnpm" label="pnpm">
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
pnpm install https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
</code></pre>
</CodeBlock>
</TabItem>
<TabItem value="yarn" label="Yarn" default>
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
</code></pre>
</CodeBlock>
</TabItem>
</Tabs>
@ -195,21 +195,21 @@ Both the `node` and `browser` platforms work out of the box.
1) Install the tarball using a package manager:
<Tabs>
<Tabs groupId="pm">
<TabItem value="npm" label="npm">
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
</code></pre>
</CodeBlock>
</TabItem>
<TabItem value="pnpm" label="pnpm">
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
pnpm install https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
</code></pre>
</CodeBlock>
</TabItem>
<TabItem value="yarn" label="Yarn" default>
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
</code></pre>
</CodeBlock>
</TabItem>
</Tabs>
@ -273,21 +273,21 @@ npx http-server .
1) Install the tarball using a package manager:
<Tabs>
<Tabs groupId="pm">
<TabItem value="npm" label="npm">
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
</code></pre>
</CodeBlock>
</TabItem>
<TabItem value="pnpm" label="pnpm">
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
pnpm install https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
</code></pre>
</CodeBlock>
</TabItem>
<TabItem value="yarn" label="Yarn" default>
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
</code></pre>
</CodeBlock>
</TabItem>
</Tabs>
@ -413,21 +413,21 @@ document.getElementById("xport").onclick = async() => {
2) Install the SheetJS node module:
<Tabs>
<Tabs groupId="pm">
<TabItem value="npm" label="npm">
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
</code></pre>
</CodeBlock>
</TabItem>
<TabItem value="pnpm" label="pnpm">
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
pnpm install https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
</code></pre>
</CodeBlock>
</TabItem>
<TabItem value="yarn" label="Yarn" default>
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
</code></pre>
</CodeBlock>
</TabItem>
</Tabs>
@ -480,21 +480,21 @@ Rollup requires `@rollup/plugin-node-resolve` to support NodeJS modules:
1) Install the tarball using a package manager:
<Tabs>
<Tabs groupId="pm">
<TabItem value="npm" label="npm">
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`} rollup @rollup/plugin-node-resolve
</code></pre>
</CodeBlock>
</TabItem>
<TabItem value="pnpm" label="pnpm">
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
pnpm install https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`} rollup @rollup/plugin-node-resolve
</code></pre>
</CodeBlock>
</TabItem>
<TabItem value="yarn" label="Yarn" default>
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`} rollup @rollup/plugin-node-resolve
</code></pre>
</CodeBlock>
</TabItem>
</Tabs>
@ -574,21 +574,21 @@ Snowpack works with no caveats.
1) Install the tarball using a package manager:
<Tabs>
<Tabs groupId="pm">
<TabItem value="npm" label="npm">
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
</code></pre>
</CodeBlock>
</TabItem>
<TabItem value="pnpm" label="pnpm">
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
pnpm install https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
</code></pre>
</CodeBlock>
</TabItem>
<TabItem value="yarn" label="Yarn" default>
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
</code></pre>
</CodeBlock>
</TabItem>
</Tabs>
@ -673,21 +673,21 @@ SWC provides `spack` for bundling scripts.
1) Install the dependencies using a package manager:
<Tabs>
<Tabs groupId="pm">
<TabItem value="npm" label="npm">
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`} regenerator-runtime @swc/cli @swc/core
</code></pre>
</CodeBlock>
</TabItem>
<TabItem value="pnpm" label="pnpm">
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
pnpm install https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`} regenerator-runtime @swc/cli @swc/core
</code></pre>
</CodeBlock>
</TabItem>
<TabItem value="yarn" label="Yarn" default>
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`} regenerator-runtime @swc/cli @swc/core
</code></pre>
</CodeBlock>
</TabItem>
</Tabs>
@ -898,9 +898,9 @@ a `require` implementation when loading [`main.js`](pathname:///systemjs/main.js
1) Install the dependencies:
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz systemjs@0.19`}
</code></pre>
</CodeBlock>
2) Save the following script to `SheetJSystem.js`:
@ -990,9 +990,9 @@ When prompted for **Framework**, select **`vue`** then **`vue-ts`**
2) Add the SheetJS dependency:
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
</code></pre>
</CodeBlock>
3) Replace `src\components\HelloWorld.vue` with:
@ -1109,21 +1109,21 @@ import * as XLSX from 'xlsx/dist/xlsx.full.min.js';
1) Install the tarball using a package manager:
<Tabs>
<Tabs groupId="pm">
<TabItem value="npm" label="npm">
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
</code></pre>
</CodeBlock>
</TabItem>
<TabItem value="pnpm" label="pnpm">
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
pnpm install https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
</code></pre>
</CodeBlock>
</TabItem>
<TabItem value="yarn" label="Yarn" default>
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
</code></pre>
</CodeBlock>
</TabItem>
</Tabs>
@ -1215,21 +1215,21 @@ version above 4.0 can be pinned by locally installing webpack and the CLI tool.
**Webpack 4.x**
```bash
npm install --save webpack@4.x webpack-cli
npm i --save webpack@4.x webpack-cli
npx webpack --mode=production
```
**Webpack 5.x**
```bash
npm install --save webpack@5.x webpack-cli
npm i --save webpack@5.x webpack-cli
npx webpack --mode=production
```
**Webpack latest**
```bash
npm install --save webpack webpack-cli
npm i --save webpack webpack-cli
npx webpack --mode=production
```
@ -1269,21 +1269,21 @@ WMR follows the same structure as Snowpack
1) Install the tarball using a package manager:
<Tabs>
<Tabs groupId="pm">
<TabItem value="npm" label="npm">
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
</code></pre>
</CodeBlock>
</TabItem>
<TabItem value="pnpm" label="pnpm">
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
pnpm install https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
</code></pre>
</CodeBlock>
</TabItem>
<TabItem value="yarn" label="Yarn" default>
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
</code></pre>
</CodeBlock>
</TabItem>
</Tabs>

13
docz/docs/03-demos/04-static/02-gatsbyjs.md
View File

@ -7,6 +7,7 @@ sidebar_custom_props:
---
import current from '/version.js';
import CodeBlock from '@theme/CodeBlock';
Gatsby is a framework for creating websites. It uses React components for page
templates and GraphQL for loading data.
@ -29,13 +30,13 @@ in the parsing logic, issues should then be raised with the SheetJS project.
`gatsby-transformer-excel` uses an older version of the library. It can be
overridden through a `package.json` override in the latest versions of NodeJS:
<pre><code parentName="pre" {...{"className": "language-json"}}>{`\
<CodeBlock language="json">{`\
{
"overrides": {
"xlsx": "https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz"
}
}`}
</code></pre>
</CodeBlock>
:::
@ -101,7 +102,7 @@ Open a web browser to the displayed URL (typically `http://localhost:8000/`)
3) Edit `package.json` and add the highlighted lines in the JSON object:
<pre><code parentName="pre" {...{"className": "language-json"}}>{`\
<CodeBlock language="json">{`\
{
// highlight-start
"overrides": {
@ -111,15 +112,15 @@ Open a web browser to the displayed URL (typically `http://localhost:8000/`)
"name": "sheetjs-gatsby",
"version": "1.0.0",
`}
</code></pre>
</CodeBlock>
4) Install the library and plugins:
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz
npm i --save gatsby-transformer-excel gatsby-source-filesystem
`}
</code></pre>
</CodeBlock>
5) Make a `src/data` directory, download <https://sheetjs.com/pres.xlsx>, and
move the downloaded file into the new folder:

2
docz/docs/03-demos/04-static/05-vitejs.md
View File

@ -132,7 +132,7 @@ This demo was tested on 2023 April 30 against `vite v4.3.3`.
<CodeBlock language="bash">{`\
npm create vite@latest sheetjs-vite -- --template vue-ts
cd sheetjs-vite
npm install
npm i
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
</CodeBlock>

166
docz/docs/03-demos/04-static/07-eleventy.md Normal file
View File

@ -0,0 +1,166 @@
---
title: Eleventy
pagination_prev: demos/net/index
pagination_next: demos/mobile/index
---
import current from '/version.js';
import CodeBlock from '@theme/CodeBlock';
Eleventy is a static site generator.
The [NodeJS module](/docs/getting-started/installation/nodejs) can be loaded in
`.eleventy.js` and used in custom data file format parsers.
## Integration Details
### Data File Parser
Custom data file parsers must be registered in `.eleventy.js`
`addDataExtension` accepts a list of file extensions and a parser object.
The parser object must include the options `read: true` and `encoding: null` .
Eleventy will read files and pass raw `Buffer` objects to the parser callback.
The `parser` callback can parse the data with `XLSX.read`. In this demo, the
parser will generate an array of row objects using `XLSX.utils.sheet_to_json`:
```js title=".eleventy.js"
const XLSX = require("xlsx");
/* list of file extensions */
const exts = [ "numbers", "xlsx", "xlsb", "xls" ].join(", ");
module.exports = (eleventyConfig) => {
eleventyConfig.addDataExtension(exts, {
/* read file and pass raw Buffer object to parser */
// highlight-next-line
encoding: null, read: true,
/* parser callback */
parser: (contents) => {
/* contents is the data stored as a Buffer */
// highlight-next-line
const wb = XLSX.read(contents);
/* generate array of row objects from first worksheet */
return XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
}
});
};
```
### Usage
Spreadsheet files added in the `_data` subdirectory are accessible from template
files using the name stem.
For example, [`pres.numbers`](https://sheetjs.com/pres.numbers) can be accessed
using the variable `pres` in a template:
```liquid title="index.njk"
<table><thead><th>Name</th><th>Index</th></thead>
<tbody>
{% for row in pres %}
<tr>
<td>{{ row.Name }}</td>
<td>{{ row.Index }}</td>
</tr>
{% endfor %}
</tbody>
</table>
```
## Complete Example
:::note
This demo was tested on 2023 May 07 using Eleventy `2.0.1`
:::
### Project Setup
1) Create a new project:
```bash
mkdir sheetjs-11ty
cd sheetjs-11ty
npm init -y
```
2) Install Eleventy and SheetJS libraries:
<CodeBlock language="bash">{`\
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz @11ty/eleventy`}
</CodeBlock>
3) Make a new `_data` subdirectory in the project. Download the example file
[`pres.xlsx`](https://sheetjs.com/pres.xlsx) into `_data`:
```bash
mkdir _data
curl -Lo _data/pres.xlsx https://sheetjs.com/pres.xlsx
```
4) Download the following files to the project folder:
- [`_eleventy.js`](pathname:///eleventy/_eleventy.js) (rename to `.eleventy.js`)
- [`index.njk`](pathname:///eleventy/index.njk)
```bash
curl -L -o .eleventy.js https://docs.sheetjs.com/eleventy/_eleventy.js
curl -LO https://docs.sheetjs.com/eleventy/index.njk
```
### Live Reload
5) Start the live reloading server:
```bash
npx @11ty/eleventy --serve
```
The server will generate `index.html` from `index.njk` and show the server URL:
```
[11ty] Writing _site/index.html from ./index.njk
[11ty] Wrote 1 file in 0.23 seconds (v2.0.1)
[11ty] Watching…
[11ty] Server at http://localhost:8080/ <-- this is the URL
```
6) Open the URL in a web browser. The page should include a table.
7) Open `_data/pres.xlsx` in a spreadsheet editor. Add a new row to the end
of the list and save the file.
The server log will note that the file changed:
```
[11ty] File changed: _data/pres.xlsx
[11ty] Writing _site/index.html from ./index.njk
```
The browser will refresh to show the new data.
### Static Site
8) Stop the live reload server and build the static site:
```bash
npx @11ty/eleventy
```
Eleventy will place the generated site in the `_site` subfolder.
9) Start a web server to host the static site:
```bash
npx http-server _site
```
Open a web browser and access the displayed URL ( `http://localhost:8080` ).
View the page source and confirm that no JS was added to the page. It only
contains the content from the file in an HTML table.

7
docz/docs/03-demos/04-static/11-svelte.md
View File

@ -5,6 +5,7 @@ pagination_next: demos/mobile/index
---
import current from '/version.js';
import CodeBlock from '@theme/CodeBlock';
:::note
@ -186,9 +187,9 @@ curl -Lo data/pres.xlsx https://sheetjs.com/pres.xlsx
3) Install the SheetJS library:
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
</code></pre>
</CodeBlock>
4) Replace the contents of `vite.config.js` with the contents of the code block
named [`vite.config.js` in the "Loader" section](#loader)
@ -223,7 +224,7 @@ the file. After saving, the browser should automatically refresh with new data.
11) Stop the development server and install the static adapter:
```bash
npm install --save @sveltejs/adapter-static
npm i --save @sveltejs/adapter-static
```
12) Edit `svelte.config.js` to use the new adapter:

5
docz/docs/03-demos/04-static/10-astro.md → docz/docs/03-demos/04-static/12-astro.md
View File

@ -5,6 +5,7 @@ pagination_next: demos/mobile/index
---
import current from '/version.js';
import CodeBlock from '@theme/CodeBlock';
:::note
@ -151,9 +152,9 @@ curl -Lo src/data/pres.numbers https://sheetjs.com/pres.numbers
3) Install the SheetJS library:
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
</code></pre>
</CodeBlock>
4) Replace `src/pages/index.astro` with the following:

5
docz/docs/03-demos/05-mobile/02-nativescript.md
View File

@ -8,6 +8,7 @@ sidebar_custom_props:
---
import current from '/version.js';
import CodeBlock from '@theme/CodeBlock';
The [NodeJS Module](/docs/getting-started/installation/nodejs) can be imported
from the main entrypoint or any script in the project.
@ -110,9 +111,9 @@ selecting the terminal and entering the key sequence `CTRL + C`
3) From the project folder, install the library:
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
</code></pre>
</CodeBlock>
4) To confirm the library was loaded, change the title to show the version. The
differences are highlighted.

5
docz/docs/03-demos/05-mobile/03-quasar.md
View File

@ -8,6 +8,7 @@ sidebar_custom_props:
---
import current from '/version.js';
import CodeBlock from '@theme/CodeBlock';
The [NodeJS Module](/docs/getting-started/installation/nodejs) can be imported
from the main entrypoint or any script in the project.
@ -154,11 +155,11 @@ When prompted:
<!-- spellchecker-enable -->
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
cd SheetJSQuasar
npm i
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
</code></pre>
</CodeBlock>
3) Set up Cordova:

8
docz/docs/03-demos/05-mobile/04-ionic.md
View File

@ -144,7 +144,7 @@ cd SheetJSIonic
ionic cordova plugin add cordova-plugin-file
ionic cordova platform add ios --confirm
ionic cordova platform add android --confirm
npm install --save @ionic-native/core @ionic-native/file @ionic/cordova-builders
npm i --save @ionic-native/core @ionic-native/file @ionic/cordova-builders
```
:::note
@ -166,7 +166,7 @@ ionic cordova platform add ios --confirm
:::caution
If the `npm install` fails due to `rxjs` resolution, add the highlighted lines
If the `npm i` fails due to `rxjs` resolution, add the highlighted lines
to `package.json` to force a resolution:
```js title="package.json"
@ -179,14 +179,14 @@ to `package.json` to force a resolution:
"dependencies": {
```
After adding the lines, the `npm install` command will succeed.
After adding the lines, the `npm i` command will succeed.
:::
3) Install dependencies:
<CodeBlock language="bash">{`\
npm install --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
</CodeBlock>
4) Add `@ionic-native/file` to the module. Differences highlighted below:

5
docz/docs/03-demos/05-mobile/05-capacitor.md
View File

@ -8,6 +8,7 @@ sidebar_custom_props:
---
import current from '/version.js';
import CodeBlock from '@theme/CodeBlock';
The [NodeJS Module](/docs/getting-started/installation/nodejs) can be imported
from the main entrypoint or any script in the project.
@ -148,10 +149,10 @@ cd sheetjs-cap
3) Install dependencies:
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz
npm i --save @capacitor/core @capacitor/cli @capacitor/filesystem`}
</code></pre>
</CodeBlock>
4) Create CapacitorJS structure:

2
docz/docs/03-demos/06-desktop/01-electron.md
View File

@ -218,7 +218,7 @@ curl -LO https://docs.sheetjs.com/electron/index.html
curl -LO https://docs.sheetjs.com/electron/index.js
```
2) Run `npm install` to install dependencies.
2) Run `npm i` to install dependencies.
3) To verify the app works, run in the test environment:

2
docz/docs/03-demos/06-desktop/02-nwjs.md
View File

@ -143,7 +143,7 @@ In the terminal window, the download can be performed with:
curl -LO https://docs.sheetjs.com/nwjs/index.html
```
3) Run `npm install` to install dependencies
3) Run `npm i` to install dependencies
4) To verify the app works, run in the test environment:

9
docz/docs/03-demos/06-desktop/06-reactnative.md
View File

@ -10,6 +10,7 @@ sidebar_custom_props:
import current from '/version.js';
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import CodeBlock from '@theme/CodeBlock';
:::note
@ -249,9 +250,9 @@ npx react-native-windows-init --no-telemetry --overwrite
Install the SheetJS library:
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
</code></pre>
</CodeBlock>
To ensure that the app works, launch the app:
@ -456,9 +457,9 @@ npx react-native-macos-init --no-telemetry
Install the SheetJS library:
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
</code></pre>
</CodeBlock>
To ensure that the app works, launch the app:

15
docz/docs/03-demos/06-desktop/09-cli.md
View File

@ -9,6 +9,7 @@ sidebar_custom_props:
import current from '/version.js';
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import CodeBlock from '@theme/CodeBlock';
With the availability of JS engines and the success of server-side platforms,
it is feasible to build command-line tools for various workflows.
@ -68,21 +69,21 @@ Options:
2) Install the dependencies:
<Tabs>
<Tabs groupId="pm">
<TabItem value="npm" label="npm">
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz exit-on-epipe commander@2`}
</code></pre>
</CodeBlock>
</TabItem>
<TabItem value="pnpm" label="pnpm">
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
pnpm install https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz exit-on-epipe commander@2`}
</code></pre>
</CodeBlock>
</TabItem>
<TabItem value="yarn" label="Yarn" default>
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz exit-on-epipe commander@2`}
</code></pre>
</CodeBlock>
</TabItem>
</Tabs>

16
docz/docs/03-demos/07-data/09-alasql.md
View File

@ -99,18 +99,18 @@ function SheetJSAlaSQL() {
The [Standalone scripts](/docs/getting-started/installation/standalone) should
be loaded before the `alasql` script:
<pre><code parentName="pre" {...{"className": "language-html"}}>{`\
<CodeBlock language="html">{`\
<script src="https://cdn.sheetjs.com/xlsx-${current}/package/dist/shim.min.js"></script>
<script src="https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.full.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/alasql"></script>`}
</code></pre>
</CodeBlock>
#### Frameworks and Bundlers
`alasql` uses an older version of the library. It can be overridden through a
`package.json` override. The lines should be added *before* installing `alasql`:
<pre><code parentName="pre" {...{"className": "language-json"}}>{`\
<CodeBlock language="json">{`\
{
/* add this part before "name" */
/* highlight-start */
@ -121,12 +121,12 @@ be loaded before the `alasql` script:
"name": "my-project",
/* ... more fields ... */
`}
</code></pre>
</CodeBlock>
After adding the override, AlaSQL can be installed through `npm`:
```bash
npm install --save alasql
npm i --save alasql
```
In imports, the SheetJS library must be passed to AlaSQL as shown below:
@ -200,13 +200,13 @@ const { promise: alasql } = require("alasql");
`alasql` uses an older version of the library. It can be overridden through a
`package.json` override in the latest versions of NodeJS:
<pre><code parentName="pre" {...{"className": "language-json"}}>{`\
<CodeBlock language="json">{`\
{
"overrides": {
"xlsx": "https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz"
}
}`}
</code></pre>
</CodeBlock>
:::
@ -314,7 +314,7 @@ node SheetJSAlaSQL.js
The output should display:
```
```js
[
{ Name: 'Bill Clinton', Index: 42 },
{ Name: 'GeorgeW Bush', Index: 43 },

5
docz/docs/03-demos/07-data/14-knex.md
View File

@ -7,6 +7,7 @@ sidebar_custom_props:
---
import current from '/version.js';
import CodeBlock from '@theme/CodeBlock';
:::note
@ -39,9 +40,9 @@ const worksheet = XLSX.utils.json_to_sheet(aoo);
1) Install dependencies:
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz knex better-sqlite3`}
</code></pre>
</CodeBlock>
2) Download the [test file](https://sheetjs.com/pres.numbers)

5
docz/docs/03-demos/07-data/26-redis.md
View File

@ -7,6 +7,7 @@ sidebar_custom_props:
---
import current from '/version.js';
import CodeBlock from '@theme/CodeBlock';
Redis has 5 core data types: "String", List", "Set", "Sorted Set", and "Hash".
Since the keys and values are limited to simple strings (and numbers), it is
@ -203,10 +204,10 @@ curl -LO https://docs.sheetjs.com/nosql/SheetJSRedisTest.mjs
2) Install dependencies and run:
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz redis@4.6.4
node SheetJSRedisTest.mjs`}
</code></pre>
</CodeBlock>
Inspect the output and compare with the data in `SheetJSRedisTest.mjs`.

7
docz/docs/03-demos/09-cloud/02-aws.md
View File

@ -5,6 +5,7 @@ pagination_next: demos/extensions/index
---
import current from '/version.js';
import CodeBlock from '@theme/CodeBlock';
AWS is a Cloud Services platform which includes traditional virtual machine
support, "Serverless Functions", cloud storage and much more.
@ -138,10 +139,10 @@ curl -LO https://docs.sheetjs.com/aws/index.js
2) Install dependencies in the project directory;
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
mkdir -p node_modules
npm install https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz busboy`}
</code></pre>
npm i https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz busboy`}
</CodeBlock>
3) Create a .zip package of the contents of the folder:

5
docz/docs/03-demos/09-cloud/08-airtable.md
View File

@ -5,6 +5,7 @@ pagination_next: demos/extensions/index
---
import current from '/version.js';
import CodeBlock from '@theme/CodeBlock';
Airtable recommends Personal Access Tokens for interacting with their API. When
fetching data from the API, the result will include an array of row objects that
@ -15,9 +16,9 @@ to write data will accept row objects generated by `XLSX.utils.sheet_to_json`.
The main module is `airtable` and can be installed with `npm`:
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz airtable`}
</code></pre>
</CodeBlock>
To obtain a reference to a table, code needs a [PAT](#personal-access-token),
the name of the workspace (typically starting with `app`), and the name of the

2
docz/docs/03-demos/09-cloud/index.md
View File

@ -44,7 +44,7 @@ File hosting services provide simple solutions for storing data, synchronizing
files across devices, and sharing with specific users or customers. Demos:
- [Dropbox](/docs/demos/cloud/dropbox)
- [Github](/docs/demos/cloud/github)
- [GitHub](/docs/demos/cloud/github)
## Cloud Data

7
docz/docs/03-demos/10-extensions/03-excelapi.md
View File

@ -5,6 +5,7 @@ pagination_next: demos/bigdata/index
---
import current from '/version.js';
import CodeBlock from '@theme/CodeBlock';
:::info
@ -93,7 +94,7 @@ async function extern(url) {
2) Install dependencies in a new PowerShell window:
```powershell
npm install -g yo bower generator-office
npm i -g yo bower generator-office
```
### Creating a new Add-in
@ -134,9 +135,9 @@ element with name `bt:String`. Change the `DefaultValue` attribute to `SHEETJS`:
7) Install the SheetJS library in the project
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
</code></pre>
</CodeBlock>
8) Replace `src\functions\functions.js` with the following:

4
docz/docs/03-demos/10-extensions/04-gsheet.md
View File

@ -140,9 +140,9 @@ and paste in the terminal. Press Enter after pasting the ID.
7) Download the standalone build and move to the project directory:
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
curl -LO https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.full.min.js`}
</code></pre>
</CodeBlock>
8) Push the project to Apps Script:

5
docz/docs/03-demos/10-extensions/05-osa.md
View File

@ -7,6 +7,7 @@ pagination_next: demos/bigdata/index
import current from '/version.js';
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import CodeBlock from '@theme/CodeBlock';
Open Scripting Architecture (OSA), a built-in feature in macOS introduced in
1993, enables users to communicate with applications with a standardized
@ -145,10 +146,10 @@ data in CSV format.
0) Download the standalone script and test file:
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
curl -LO https://sheetjs.com/pres.numbers
curl -LO https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.full.min.js`}
</code></pre>
</CodeBlock>
<Tabs groupId="osa">
<TabItem value="js" label="JavaScript">

5
docz/docs/03-demos/10-extensions/06-mathematica.md
View File

@ -5,6 +5,7 @@ pagination_next: demos/bigdata/index
---
import current from '/version.js';
import CodeBlock from '@theme/CodeBlock';
:::note
@ -56,12 +57,12 @@ This demo was tested in macOS. The path names will differ in other platforms.
1) Create the standalone `xlsx-cli` binary:
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
cd /tmp
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz exit-on-epipe commander@2
curl -LO https://docs.sheetjs.com/cli/xlsx-cli.js
npx nexe -t 14.15.3 xlsx-cli.js`}
</code></pre>
</CodeBlock>
This is discussed in ["Command-line Tools"](/docs/demos/desktop/cli)

5
docz/docs/03-demos/12-engines/01_duktape.md
View File

@ -5,6 +5,7 @@ pagination_next: solutions/input
---
import current from '/version.js';
import CodeBlock from '@theme/CodeBlock';
Duktape is an embeddable JS engine written in C. It has been ported to a number
of exotic architectures and operating systems.
@ -139,11 +140,11 @@ mv duktape-2.7.0/src/*.{c,h} .
<li><a href="https://sheetjs.com/pres.numbers">pres.numbers</a></li>
</ul>
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
curl -LO https://cdn.sheetjs.com/xlsx-${current}/package/dist/shim.min.js
curl -LO https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.full.min.js
curl -LO https://sheetjs.com/pres.numbers`}
</code></pre>
</CodeBlock>
2) Download [`sheetjs.duk.c`](pathname:///duk/sheetjs.duk.c):

5
docz/docs/03-demos/12-engines/02_jsc.md
View File

@ -5,6 +5,7 @@ pagination_next: solutions/input
---
import current from '/version.js';
import CodeBlock from '@theme/CodeBlock';
iOS and MacOS ship with the JavaScriptCore framework for running JS code from
Swift and Objective-C. Hybrid function invocation is tricky, but explicit data
@ -133,10 +134,10 @@ cd sheetjswift
<li><a href="https://sheetjs.com/pres.numbers">pres.numbers</a></li>
</ul>
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
curl -LO https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.full.min.js
curl -LO https://sheetjs.com/pres.numbers`}
</code></pre>
</CodeBlock>
2) Download the Swift scripts for the demo

5
docz/docs/03-demos/12-engines/03_rhino.md
View File

@ -5,6 +5,7 @@ pagination_next: solutions/input
---
import current from '/version.js';
import CodeBlock from '@theme/CodeBlock';
Rhino is an ES3+ engine in Java.
@ -140,10 +141,10 @@ curl -L -o rhino.jar https://github.com/mozilla/rhino/releases/download/Rhino1_7
<li><a href="https://sheetjs.com/pres.xlsx">pres.xlsx</a></li>
</ul>
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
curl -LO https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.full.min.js
curl -LO https://sheetjs.com/pres.xlsx`}
</code></pre>
</CodeBlock>
2) Download [`SheetJSRhino.zip`](pathname:///rhino/SheetJSRhino.zip) and unzip

5
docz/docs/03-demos/12-engines/04_nashorn.md
View File

@ -7,6 +7,7 @@ pagination_next: solutions/input
import current from '/version.js';
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import CodeBlock from '@theme/CodeBlock';
Nashorn is a JavaScript engine for Java. It shipped with Java distributions
starting with Java 8 and was eventually removed in Java 15. The project was
@ -128,11 +129,11 @@ curl -LO "https://search.maven.org/remotecontent?filepath=org/ow2/asm/asm-util/9
<li><a href="https://sheetjs.com/pres.xlsx">pres.xlsx</a></li>
</ul>
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
curl -LO https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.full.min.js
curl -LO https://cdn.sheetjs.com/xlsx-${current}/package/dist/shim.min.js
curl -LO https://sheetjs.com/pres.xlsx`}
</code></pre>
</CodeBlock>
2) Download [`SheetJSNashorn.java`](pathname:///nashorn/SheetJSNashorn.java):

5
docz/docs/03-demos/12-engines/05_goja.md
View File

@ -5,6 +5,7 @@ pagination_next: solutions/input
---
import current from '/version.js';
import CodeBlock from '@theme/CodeBlock';
Goja is a pure Go implementation of ECMAScript 5.
@ -110,11 +111,11 @@ go get github.com/dop251/goja
<li><a href="https://sheetjs.com/pres.numbers">pres.numbers</a></li>
</ul>
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
curl -LO https://cdn.sheetjs.com/xlsx-${current}/package/dist/shim.min.js
curl -LO https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.full.min.js
curl -LO https://sheetjs.com/pres.numbers`}
</code></pre>
</CodeBlock>
2) Download [`SheetGoja.go`](pathname:///goja/SheetGoja.go):

5
docz/docs/03-demos/12-engines/07_chakra.md
View File

@ -5,6 +5,7 @@ pagination_next: solutions/input
---
import current from '/version.js';
import CodeBlock from '@theme/CodeBlock';
ChakraCore is an embeddable JS engine written in C++.
@ -159,11 +160,11 @@ This program tries to parse the file specified by the first argument
<li><a href="https://sheetjs.com/pres.numbers">pres.numbers</a></li>
</ul>
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
curl -LO https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.full.min.js
curl -LO https://cdn.sheetjs.com/xlsx-${current}/package/dist/shim.min.js
curl -LO https://sheetjs.com/pres.numbers`}
</code></pre>
</CodeBlock>
5) Run the test program:

9
docz/docs/03-demos/12-engines/08_quickjs.md
View File

@ -5,6 +5,7 @@ pagination_next: solutions/input
---
import current from '/version.js';
import CodeBlock from '@theme/CodeBlock';
QuickJS is an embeddable JS engine written in C. It provides a separate set of
functions for interacting with the filesystem and the global object. It can run
@ -163,10 +164,10 @@ This program tries to parse the file specified by the first argument
<li><a href="https://sheetjs.com/pres.numbers">pres.numbers</a></li>
</ul>
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
curl -LO https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.full.min.js
curl -LO https://sheetjs.com/pres.numbers`}
</code></pre>
</CodeBlock>
5) Run the test program:
@ -195,10 +196,10 @@ This demo was last tested on 2023 March 11 against QuickJS `2021-03-27`.
<li><a href="https://sheetjs.com/pres.numbers">pres.numbers</a></li>
</ul>
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
curl -LO https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.full.min.js
curl -LO https://sheetjs.com/pres.numbers`}
</code></pre>
</CodeBlock>
2) Download [`SheetJSQuick.js`](pathname:///quickjs/SheetJSQuick.js)

5
docz/docs/03-demos/12-engines/09_rb.md
View File

@ -5,6 +5,7 @@ pagination_next: solutions/input
---
import current from '/version.js';
import CodeBlock from '@theme/CodeBlock';
ExecJS is a Ruby abstraction over a number of JS runtimes including V8.
@ -81,10 +82,10 @@ gem install execjs
<li><a href="https://sheetjs.com/pres.numbers">pres.numbers</a></li>
</ul>
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
curl -LO https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.full.min.js
curl -LO https://sheetjs.com/pres.numbers`}
</code></pre>
</CodeBlock>
2) Download [`ExecSheetJS.rb`](pathname:///execjs/ExecSheetJS.rb):

5
docz/docs/03-demos/12-engines/11_perl.md
View File

@ -5,6 +5,7 @@ pagination_next: solutions/input
---
import current from '/version.js';
import CodeBlock from '@theme/CodeBlock';
:::warning
@ -113,9 +114,9 @@ cpan install JE
2) Download the [ExtendScript build](/docs/getting-started/installation/extendscript):
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
curl -LO https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.extendscript.js`}
</code></pre>
</CodeBlock>
3) Download the demo [`SheetJE.pl`](pathname:///perl/SheetJE.pl):

1
docz/docs/03-demos/index.md
View File

@ -61,6 +61,7 @@ run in the web browser, demos will include interactive examples.
- [`Lume`](/docs/demos/static/lume)
- [`GatsbyJS`](/docs/demos/static/gatsbyjs)
- [`Eleventy`](/docs/demos/static/eleventy)
- [`ViteJS`](/docs/demos/static/vitejs)
- [`NextJS`](/docs/demos/static/nextjs)
- [`NuxtJS`](/docs/demos/static/nuxtjs)

40
docz/docs/06-solutions/01-input.md
View File

@ -130,11 +130,11 @@ The [`extendscript` demo](/docs/demos/extendscript) includes a more complex exam
`readFile` uses `Deno.readFileSync` under the hood:
<pre><code parentName="pre" {...{"className": "language-ts"}}>{`\
<CodeBlock language="ts">{`\
// @deno-types="https://cdn.sheetjs.com/xlsx-${current}/package/types/index.d.ts"
import * as XLSX from 'https://cdn.sheetjs.com/xlsx-${current}/package/xlsx.mjs';
const workbook = XLSX.readFile("test.xlsx");`}</code></pre>
\n\
const workbook = XLSX.readFile("test.xlsx");`}</CodeBlock>
:::note
@ -330,18 +330,18 @@ The [`server` demo](/docs/demos/server) has more advanced examples.
Drash is a HTTP server framework for Deno. In a `POST` request handler, the
body parser can pull file data into a `Uint8Array`:
<pre><code parentName="pre" {...{"className": "language-ts"}}>{`\
<CodeBlock language="ts">{`\
// @deno-types="https://cdn.sheetjs.com/xlsx-${current}/package/types/index.d.ts"
import * as XLSX from 'https://cdn.sheetjs.com/xlsx-${current}/package/xlsx.mjs';
/* load the codepage support library for extended support with older formats */
import * as cptable from 'https://cdn.sheetjs.com/xlsx-${current}/package/dist/cpexcel.full.mjs';
XLSX.set_cptable(cptable);
\n\
import * as Drash from "https://deno.land/x/drash@v2.5.4/mod.ts";
\n\
class SheetResource extends Drash.Resource {
public paths = ["/"];
\n\
public POST(request: Drash.Request, response: Drash.Response) {
// highlight-next-line
const file = request.bodyParam<Drash.Types.BodyFile>("file");
@ -352,15 +352,15 @@ class SheetResource extends Drash.Resource {
return response.html(html);
}
}
\n\
const server = new Drash.Server({ hostname: "", port: 7262, protocol: "http",
resources: [
// highlight-next-line
SheetResource,
],
});
server.run();`}</code></pre>
\n\
server.run();`}</CodeBlock>
:::note
@ -432,7 +432,7 @@ The [`xhr` demo](/docs/demos/network) includes a longer discussion and more exam
</TabItem>
<TabItem value="nodejs" label="NodeJS">
Node 17.5 and 18.0 have native support for fetch:
NodeJS releases starting from version 18.0 have native support for fetch:
```js
const XLSX = require("xlsx");
@ -498,18 +498,18 @@ const workbook = XLSX.read(data);
Deno has native support for `fetch`.
<pre><code parentName="pre" {...{"className": "language-ts"}}>{`\
<CodeBlock language="ts">{`\
// @deno-types="https://cdn.sheetjs.com/xlsx-${current}/package/types/index.d.ts"
import * as XLSX from 'https://cdn.sheetjs.com/xlsx-${current}/package/xlsx.mjs';
/* load the codepage support library for extended support with older formats */
import * as cptable from 'https://cdn.sheetjs.com/xlsx-${current}/package/dist/cpexcel.full.mjs';
XLSX.set_cptable(cptable);
\n\
const url = "https://oss.sheetjs.com/test_files/formula_stress_test.xlsx";
// highlight-next-line
const data = await (await fetch(url)).arrayBuffer();
/* data is an ArrayBuffer */
const workbook = XLSX.read(data);`}</code></pre>
const workbook = XLSX.read(data);`}</CodeBlock>
:::note
@ -643,21 +643,21 @@ For these streams, `std` provides a `readAll` method to collect data into a
`Uint8Array`. This example reads from a file using `Deno.open` and prints the
worksheet names array:
<pre><code parentName="pre" {...{"className": "language-ts"}}>{`\
<CodeBlock language="ts">{`\
// @deno-types="https://cdn.sheetjs.com/xlsx-${current}/package/types/index.d.ts"
import * as XLSX from 'https://cdn.sheetjs.com/xlsx-${current}/package/xlsx.mjs';
\n\
import { readAll } from "https://deno.land/std/streams/conversion.ts";
\n\
/* Simple Deno.Reader from a file */
const file = await Deno.open("test.xlsx", {read: true});
\n\
/* \`content\` will be a Uint8Array holding the full contents of the stream */
const content = await readAll(file);
\n\
/* Since this is a Uint8Array, \`XLSX.read\` "just works" */
const wb = XLSX.read(content);
console.log(wb.SheetNames);`}</code></pre>
console.log(wb.SheetNames);`}</CodeBlock>
</TabItem>
</Tabs>

12
docz/docs/06-solutions/05-output.md
View File

@ -212,11 +212,11 @@ writeFile(workbook, "out.xlsb");
`writeFile` uses `Deno.writeFileSync` under the hood:
<pre><code parentName="pre" {...{"className": "language-ts"}}>{`\
<CodeBlock language="ts">{`\
// @deno-types="https://cdn.sheetjs.com/xlsx-${current}/package/types/index.d.ts"
import * as XLSX from 'https://cdn.sheetjs.com/xlsx-${current}/package/xlsx.mjs';
XLSX.writeFile(workbook, "test.xlsx");`}</code></pre>
\n\
XLSX.writeFile(workbook, "test.xlsx");`}</CodeBlock>
:::note
@ -338,9 +338,9 @@ res.end(buf);
Install the library with
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
</code></pre>
</CodeBlock>
Save the following script to `node.js` and run with `node node.js`:
@ -540,7 +540,7 @@ req.send(formdata);
`XLSX.write` with `type: "buffer"` will generate a NodeJS `Buffer` which can be
used with standard NodeJS approaches for uploading data.
Node 17.5 and 18.0 have native support for fetch:
NodeJS releases starting from version 18.0 have native support for fetch:
```js
const XLSX = require("xlsx");

23
docz/docs/08-api/07-write-options.md
View File

@ -7,6 +7,7 @@ title: Writing Files
import current from '/version.js';
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import CodeBlock from '@theme/CodeBlock';
**`XLSX.write(wb, options)`**
@ -106,9 +107,9 @@ Adding NUMBERS export support involves two steps:
<Tabs>
<TabItem value="browser" label="Browser">
<div><a href={`https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.zahl.js`}>https://cdn.sheetjs.com/xlsx-{current}/package/dist/xlsx.zahl.js</a> is the URL for {current}</div>
<p><a href={`https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.zahl.js`}>https://cdn.sheetjs.com/xlsx-{current}/package/dist/xlsx.zahl.js</a> is the URL for {current}</p>
<pre><code parentName="pre" {...{"className": "language-html"}}>{`\
<CodeBlock language="html">{`\
<meta charset="utf8">\n\
<body>\n\
<script src="https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.full.min.js"></script>\n\
@ -122,16 +123,16 @@ var wb = XLSX.utils.book_new(); var ws = XLSX.utils.aoa_to_sheet([\n\
]); XLSX.utils.book_append_sheet(wb, ws, "Sheet1");\n\
XLSX.writeFile(wb, "textport.numbers", {numbers: XLSX_ZAHL_PAYLOAD, compression: true});\n\
</script>\n\
</body>`}</code></pre>
</body>`}</CodeBlock>
</TabItem>
<TabItem value="nodejs" label="NodeJS">
After installing the package:
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
</code></pre>
</CodeBlock>
The scripts will be available at `xlsx/dist/xlsx.zahl` (CommonJS) and
`xlsx/dist/xlsx.zahl.mjs` (ESM).
@ -153,9 +154,9 @@ XLSX.writeFile(wb, "textport.numbers", {numbers: XLSX_ZAHL_PAYLOAD, compression:
After installing the package:
<pre><code parentName="pre" {...{"className": "language-bash"}}>{`\
<CodeBlock language="bash">{`\
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
</code></pre>
</CodeBlock>
The scripts will be available at `xlsx/dist/xlsx.zahl` (CommonJS) and
`xlsx/dist/xlsx.zahl.mjs` (ESM).
@ -177,12 +178,12 @@ XLSX.writeFile(wb, "textport.numbers", {numbers: XLSX_ZAHL_PAYLOAD, compression:
</TabItem>
<TabItem value="deno" label="Deno">
<div><a href={`https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.zahl.mjs`}>https://cdn.sheetjs.com/xlsx-{current}/package/dist/xlsx.zahl.mjs</a> is the URL for {current}</div>
<p><a href={`https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.zahl.mjs`}>https://cdn.sheetjs.com/xlsx-{current}/package/dist/xlsx.zahl.mjs</a> is the URL for {current}</p>
<pre><code parentName="pre" {...{"className": "language-ts"}}>{`\
<CodeBlock language="ts">{`\
import * as XLSX from 'https://cdn.sheetjs.com/xlsx-${current}/package/xlsx.mjs';\n\
import XLSX_ZAHL_PAYLOAD from 'https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.zahl.mjs';\n\
\n\
var wb = XLSX.utils.book_new(); var ws = XLSX.utils.aoa_to_sheet([\n\
["SheetJS", "<3","விரிதாள்"],\n\
[72,,"Arbeitsblätter"],\n\
@ -190,7 +191,7 @@ var wb = XLSX.utils.book_new(); var ws = XLSX.utils.aoa_to_sheet([\n\
[true,false,],\n\
]); XLSX.utils.book_append_sheet(wb, ws, "Sheet1");\n\
XLSX.writeFile(wb, "textport.numbers", {numbers: XLSX_ZAHL_PAYLOAD, compression: true});\n\
`}</code></pre>
`}</CodeBlock>
</TabItem>
</Tabs>

9
docz/docs/09-miscellany/02-errors.md
View File

@ -5,6 +5,7 @@ hide_table_of_contents: true
---
import current from '/version.js';
import CodeBlock from '@theme/CodeBlock';
Here are some common errors and their resolutions. This is not comprehensive.
The [issue tracker](https://git.sheetjs.com/SheetJS/sheetjs/issues) has a
@ -263,11 +264,11 @@ that include more browser-specific workarounds.
_Standalone Build_
<pre><code parentName="pre" {...{"className": "language-html"}}>{`\
<CodeBlock language="html">{`\
<script src="https://unpkg.com/file-saver@2.0.5/dist/FileSaver.js"></script>
<script src="https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.full.min.js"></script>`}
<!-- XLSX.writeFile will use the FileSaver `saveAs` implementation -->
</code></pre>
<script src="https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.full.min.js"></script>
<!-- XLSX.writeFile will use the FileSaver \`saveAs\` implementation -->`}
</CodeBlock>
_Frameworks and Bundlers_

2
docz/docs/09-miscellany/05-contributing.md
View File

@ -222,7 +222,7 @@ cd sheetjs
```bash
# Install dev dependencies
npm install
npm i
# Install global dependencies
sudo npm i -g mocha@2.5.3 voc @sheetjs/uglify-js

9
docz/docs/index.md
View File

@ -5,6 +5,7 @@ title: Overview
---
import current from '/version.js';
import CodeBlock from '@theme/CodeBlock';
# SheetJS CE
@ -34,9 +35,9 @@ run entirely in the web browser.
2) Include a reference to the SheetJS library in your page:
<pre><code parentName="pre" {...{"className": "language-html"}}>{`\
<CodeBlock language="html">{`\
<script src="https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.full.min.js"></script>`}
</code></pre>
</CodeBlock>
3) Add a button that users will click to generate an export
@ -113,9 +114,9 @@ support for CSS styling and rich text.
2) Include a reference to the SheetJS library in your page:
<pre><code parentName="pre" {...{"className": "language-html"}}>{`\
<CodeBlock language="html">{`\
<script src="https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.full.min.js"></script>`}
</code></pre>
</CodeBlock>
3) Add a script block to download and update the page:

2
docz/docusaurus.config.js
View File

@ -142,7 +142,7 @@ const config = {
prism: {
theme: lightCodeTheme,
darkTheme: darkCodeTheme,
additionalLanguages: [ "swift", "java", "csharp", "perl", "ruby", "cpp", "applescript" ],
additionalLanguages: [ "swift", "java", "csharp", "perl", "ruby", "cpp", "applescript", "liquid" ],
},
liveCodeBlock: {
playgroundPosition: 'top'

25
docz/src/theme/prism-include-languages.js Normal file
View File

@ -0,0 +1,25 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import siteConfig from '@generated/docusaurus.config';
export default function prismIncludeLanguages(PrismObject) {
const {
themeConfig: {prism},
} = siteConfig;
const {additionalLanguages} = prism;
// Prism components work on the Prism instance on the window, while prism-
// react-renderer uses its own Prism instance. We temporarily mount the
// instance onto window, import components to enhance it, then remove it to
// avoid polluting global namespace.
// You can mutate PrismObject: registering plugins, deleting languages... As
// long as you don't re-assign it
globalThis.Prism = PrismObject;
additionalLanguages.forEach((lang) => {
// eslint-disable-next-line global-require, import/no-dynamic-require
require(`prismjs/components/prism-${lang}`);
});
//delete globalThis.Prism; // <-- If this line is not commented, `liquid` will fail.
}

21
docz/static/eleventy/_eleventy.js Normal file
View File

@ -0,0 +1,21 @@
const XLSX = require("xlsx");
/* list of file extensions */
const exts = [ "numbers", "xlsx", "xlsb", "xls" ].join(", ");
module.exports = (eleventyConfig) => {
eleventyConfig.addDataExtension(exts, {
/* read file and pass raw Buffer object to parser */
// highlight-next-line
encoding: null, read: true,
/* parser callback */
parser: (contents) => {
/* contents is the data stored as a Buffer */
// highlight-next-line
const wb = XLSX.read(contents);
/* generate array of row objects from first worksheet */
return XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
}
});
};

10
docz/static/eleventy/index.njk Normal file
View File

@ -0,0 +1,10 @@
<table><thead><th>Name</th><th>Index</th></thead>
<tbody>
{% for row in pres %}
<tr>
<td>{{ row.Name }}</td>
<td>{{ row.Index }}</td>
</tr>
{% endfor %}
</tbody>
</table>