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

@ -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

@ -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/`

@ -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>

@ -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>

@ -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

@ -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`:

@ -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

@ -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

@ -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>

@ -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`)

@ -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`)

@ -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

@ -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`)

@ -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<