forked from sheetjs/docs.sheetjs.com
Compare commits
8 Commits
Author | SHA1 | Date | |
---|---|---|---|
e5d9d1c15e | |||
2d6b139ef7 | |||
4e3a0637ea | |||
8a65ff5698 | |||
d77a40c6bf | |||
9af5473755 | |||
1f87dda979 | |||
1b242c12ef |
3
.gitignore
vendored
3
.gitignore
vendored
@ -4,4 +4,5 @@ package-lock.json
|
||||
pnpm-lock.yaml
|
||||
/docs
|
||||
node_modules
|
||||
.idea
|
||||
.idea
|
||||
.vscode
|
@ -352,9 +352,9 @@
|
||||
<Cell><Data ss:Type="String">Python</Data></Cell>
|
||||
<Cell ss:StyleID="s16"><Data ss:Type="String">✔</Data></Cell>
|
||||
<Cell ss:StyleID="s16"><Data ss:Type="String">✔</Data></Cell>
|
||||
<Cell ss:StyleID="s16"><Data ss:Type="String">✔</Data></Cell>
|
||||
<Cell ss:StyleID="s16"><Data ss:Type="String"></Data></Cell>
|
||||
<Cell ss:StyleID="s16"><Data ss:Type="String"></Data></Cell>
|
||||
<Cell ss:StyleID="s16"><Data ss:Type="String"></Data></Cell>
|
||||
<Cell ss:StyleID="s16"><Data ss:Type="String">✔</Data></Cell>
|
||||
<Cell ss:StyleID="s16"><Data ss:Type="String"></Data></Cell>
|
||||
</Row>
|
||||
<Row>
|
||||
|
@ -16,7 +16,7 @@ Each standalone release script is available at https://cdn.sheetjs.com/.
|
||||
|
||||
<CodeBlock language="html">{`\
|
||||
<!-- use version ${current} -->
|
||||
<script lang="javascript" src="https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.full.min.js"></script>`}
|
||||
<script type="text/javascript" src="https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.full.min.js"></script>`}
|
||||
</CodeBlock>
|
||||
|
||||
:::tip pass
|
||||
@ -44,7 +44,7 @@ reading and writing many spreadsheet formats.
|
||||
|
||||
<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>`}
|
||||
<script type="text/javascript" src="https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.full.min.js"></script>`}
|
||||
</CodeBlock>
|
||||
|
||||
`xlsx.mini.min.js` is a slimmer build that omits the following features:
|
||||
@ -60,7 +60,7 @@ A single script tag should be added at the top of the HTML page:
|
||||
|
||||
<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>`}
|
||||
<script type="text/javascript" src="https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.mini.min.js"></script>`}
|
||||
</CodeBlock>
|
||||
|
||||
</details>
|
||||
@ -118,20 +118,20 @@ importScripts("https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.full.mi
|
||||
|
||||
### Type Checker
|
||||
|
||||
:::danger VSCode Telemetry and Data Exfiltration
|
||||
:::danger VS Code Telemetry and Data Exfiltration
|
||||
|
||||
The official Microsoft builds of Visual Studio Code ("VSCode") embed telemetry
|
||||
and send information to external servers.
|
||||
The official builds of Visual Studio Code ("VS Code" or "VSCode") embed
|
||||
telemetry and send information to Microsoft servers.
|
||||
|
||||
**[VSCodium](https://vscodium.com/) is a telemetry-free fork of VSCode.**
|
||||
**[VSCodium](https://vscodium.com/) is a telemetry-free fork of VS Code.**
|
||||
|
||||
When writing code that may process personally identifiable information (PII),
|
||||
the SheetJS team strongly encourages building VSCode from source or using IDEs
|
||||
the SheetJS team strongly encourages building VS Code from source or using IDEs
|
||||
that do not exfiltrate data.
|
||||
|
||||
:::
|
||||
|
||||
The type checker integrated in VSCodium and VSCode does not currently provide
|
||||
The type checker integrated in VSCodium and VS Code does not currently provide
|
||||
type hints when using the standalone build. Using the JSDoc `@type` directive
|
||||
coupled with type imports, VSCodium will recognize the types:
|
||||
|
||||
@ -176,7 +176,7 @@ The `.d.ts` file extension must be omitted.
|
||||
|
||||
JSDoc types using the `@import` directive are not supported in `<script>` tags.
|
||||
|
||||
**This is a known bug with VSCode!**
|
||||
**This is a known bug with VS Code!**
|
||||
|
||||
:::
|
||||
|
||||
|
@ -644,7 +644,7 @@ 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 .
|
||||
npx -y http-server .
|
||||
```
|
||||
|
||||
The server process will display a URL (typically `http://127.0.0.1:8080`). Open
|
||||
|
@ -489,20 +489,20 @@ function SheetJSAoAFilled() {
|
||||
### Select Data Rows
|
||||
|
||||
At this point, each data row will have the year in column `A` and dollar value
|
||||
in column `C`. The year (first value in the row) will be between 2007 and 2024.
|
||||
in column `C`. The year (first value in the row) will be between 2007 and 2029.
|
||||
The value (third value) will be positive. The following function tests a row
|
||||
against the requirements:
|
||||
|
||||
```js
|
||||
const is_valid_row = r =>
|
||||
r[0] >= 2007 && r[0] <= 2024 // year (column A) is between 2007 and 2024
|
||||
r[0] >= 2007 && r[0] <= 2029 // year (column A) is between 2007 and 2029
|
||||
&& r[2] > 0; // dollar value (column C) is positive
|
||||
```
|
||||
|
||||
`Array#filter`, using the previous test, can select the matching rows:
|
||||
|
||||
```js
|
||||
const rows = raw_data.filter(r => r[0] >= 2007 && r[0] <= 2024 && r[2] > 0);
|
||||
const rows = raw_data.filter(r => r[0] >= 2007 && r[0] <= 2029 && r[2] > 0);
|
||||
```
|
||||
|
||||
<details>
|
||||
@ -522,7 +522,7 @@ function SheetJSAoAFiltered() {
|
||||
var last_year = 0;
|
||||
raw_data.forEach(r => last_year = r[0] = (r[0] != null ? r[0] : last_year));
|
||||
/* select data rows */
|
||||
const rows = raw_data.filter(r => r[0] >= 2007 && r[0] <= 2024 && r[2] > 0);
|
||||
const rows = raw_data.filter(r => r[0] >= 2007 && r[0] <= 2029 && r[2] > 0);
|
||||
/* display data */
|
||||
setRows(rows);
|
||||
})(); }, []);
|
||||
@ -598,7 +598,7 @@ function SheetJSObjects() {
|
||||
var last_year = 0;
|
||||
raw_data.forEach(r => last_year = r[0] = (r[0] != null ? r[0] : last_year));
|
||||
/* select data rows */
|
||||
const rows = raw_data.filter(r => r[0] >= 2007 && r[0] <= 2024 && r[2] > 0);
|
||||
const rows = raw_data.filter(r => r[0] >= 2007 && r[0] <= 2029 && r[2] > 0);
|
||||
/* generate row objects */
|
||||
const objects = rows.map(r => ({FY: r[0], FQ: r[1], total: r[8]}));
|
||||
/* display data */
|
||||
@ -706,7 +706,7 @@ function StudentAidTotal() {
|
||||
raw_data.forEach(r => last_year = r[0] = (r[0] != null ? r[0] : last_year));
|
||||
|
||||
/* select data rows */
|
||||
const rows = raw_data.filter(r => r[0] >= 2007 && r[0] <= 2024 && r[2] > 0);
|
||||
const rows = raw_data.filter(r => r[0] >= 2007 && r[0] <= 2029 && r[2] > 0);
|
||||
|
||||
/* generate row objects */
|
||||
const objects = rows.map(r => ({FY: r[0], FQ: r[1], total: r[8]}));
|
||||
@ -761,7 +761,7 @@ Save the following script to `SheetJSStandaloneDemo.html`:
|
||||
raw_data.forEach(r => last_year = r[0] = (r[0] != null ? r[0] : last_year));
|
||||
\n\
|
||||
/* select data rows */
|
||||
const rows = raw_data.filter(r => r[0] >= 2007 && r[0] <= 2024 && r[2] > 0);
|
||||
const rows = raw_data.filter(r => r[0] >= 2007 && r[0] <= 2029 && r[2] > 0);
|
||||
\n\
|
||||
/* generate row objects */
|
||||
const objects = rows.map(r => ({FY: r[0], FQ: r[1], total: r[8]}));
|
||||
@ -781,7 +781,7 @@ 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 .
|
||||
npx -y http-server .
|
||||
```
|
||||
|
||||
The server process will display a URL (typically `http://127.0.0.1:8080`). Open
|
||||
@ -827,7 +827,7 @@ const XLSX = require("xlsx");
|
||||
raw_data.forEach(r => last_year = r[0] = (r[0] != null ? r[0] : last_year));
|
||||
|
||||
/* select data rows */
|
||||
const rows = raw_data.filter(r => r[0] >= 2007 && r[0] <= 2024 && r[2] > 0);
|
||||
const rows = raw_data.filter(r => r[0] >= 2007 && r[0] <= 2029 && r[2] > 0);
|
||||
|
||||
/* generate row objects */
|
||||
const objects = rows.map(r => ({FY: r[0], FQ: r[1], total: r[8]}));
|
||||
@ -900,7 +900,7 @@ Save the following script to `SheetJSNW.html`:
|
||||
raw_data.forEach(r => last_year = r[0] = (r[0] != null ? r[0] : last_year));
|
||||
\n\
|
||||
/* select data rows */
|
||||
const rows = raw_data.filter(r => r[0] >= 2007 && r[0] <= 2024 && r[2] > 0);
|
||||
const rows = raw_data.filter(r => r[0] >= 2007 && r[0] <= 2029 && r[2] > 0);
|
||||
\n\
|
||||
/* generate row objects */
|
||||
const objects = rows.map(r => ({FY: r[0], FQ: r[1], total: r[8]}));
|
||||
@ -1001,7 +1001,7 @@ const App = () => {
|
||||
raw_data.forEach(r => last_year = r[0] = (r[0] != null ? r[0] : last_year));
|
||||
|
||||
/* select data rows */
|
||||
const rows = raw_data.filter(r => r[0] >= 2007 && r[0] <= 2024 && r[2] > 0);
|
||||
const rows = raw_data.filter(r => r[0] >= 2007 && r[0] <= 2029 && r[2] > 0);
|
||||
|
||||
/* generate row objects */
|
||||
const objects = rows.map(r => ({FY: r[0], FQ: r[1], total: r[8]}));
|
||||
|
@ -35,13 +35,15 @@ This demo was tested in the following configurations:
|
||||
|
||||
| Platform | Architecture | Date |
|
||||
|:------------------------------------------------------------------|:-------------|:-----------|
|
||||
| NVIDIA RTX 5090 (32 GB VRAM) + Ryzen Z1 Extreme (24 GB RAM) | `win11-x64` | 2025-06-17 |
|
||||
| NVIDIA RTX 4090 (24 GB VRAM) + Ryzen Z1 Extreme (16 GB RAM) | `win11-x64` | 2025-04-17 |
|
||||
| NVIDIA RTX 4090 (24 GB VRAM) + Ryzen Z1 Extreme (16 GB RAM) | `linux-x64` | 2025-01-28 |
|
||||
| AMD RX 7900 XTX (24 GB VRAM) + Ryzen Z1 Extreme (16 GB RAM) | `win11-x64` | 2025-01-12 |
|
||||
| AMD RX 7900 XTX (24 GB VRAM) + Ryzen Z1 Extreme (16 GB RAM) | `win11-x64` | 2025-06-20 |
|
||||
| AMD RX 7900 XTX (24 GB VRAM) + Ryzen Z1 Extreme (16 GB RAM) | `linux-x64` | 2025-01-29 |
|
||||
| Intel Arc B580 (12 GB VRAM) + Ryzen Z1 Extreme (24 GB RAM) | `win11-x64` | 2025-01-24 |
|
||||
| Intel Arc B580 (12 GB VRAM) + Ryzen Z1 Extreme (24 GB RAM) | `win11-x64` | 2025-06-20 |
|
||||
| Intel Arc B580 (12 GB VRAM) + Ryzen Z1 Extreme (16 GB RAM) | `linux-x64` | 2025-02-08 |
|
||||
| Apple M4 Max 16-Core CPU + 40-Core GPU (48 GB unified memory) | `darwin-arm` | 2025-03-06 |
|
||||
| Apple M3 Ultra 28-Core CPU + 60-Core GPU (96 GB unified memory) | `darwin-arm` | 2025-06-24 |
|
||||
| Apple M2 Max 12-Core CPU + 30-Core GPU (32 GB unified memory) | `darwin-arm` | 2025-03-25 |
|
||||
|
||||
SheetJS users have verified this demo in other configurations:
|
||||
@ -74,6 +76,7 @@ Special thanks to the following users for testing with multiple configurations:
|
||||
|
||||
- [Asadbek Karimov](https://asadk.dev/)
|
||||
- [Rasmus Tengstedt](https://tengstedt.dev/)
|
||||
- [Joban Dhillon](https://dhillon.dev/)
|
||||
|
||||
:::
|
||||
|
||||
@ -722,7 +725,7 @@ a [sample cars dataset](pathname:///cd.xls) and displays the results.
|
||||
|
||||
:::caution pass
|
||||
|
||||
This demo was tested using the ChatQA-1.5 model[^9] in Ollama.
|
||||
This demo was tested using the Phi-4[^9] in Ollama.
|
||||
|
||||
The tested model used up to 10GB VRAM. It is strongly recommended to run the
|
||||
demo on a GPU with at least 12GB VRAM or a newer Apple Silicon Mac with at least
|
||||
@ -853,7 +856,7 @@ npm i --save https://sheet.lol/balls/xlsx-${current}.tgz`}
|
||||
4) Install dependencies:
|
||||
|
||||
```bash
|
||||
npm i --save @langchain/core@0.3.44 langchain@0.3.21 @langchain/ollama@0.2.0 peggy@3.0.2
|
||||
npm i --save @langchain/core@0.3.59 langchain@0.3.28 @langchain/ollama@0.2.2 peggy@3.0.2
|
||||
```
|
||||
|
||||
:::note pass
|
||||
@ -862,7 +865,7 @@ In some test runs, there were error messages relating to dependency and peer
|
||||
dependency versions. The `--force` flag will suppress version mismatch errors:
|
||||
|
||||
```bash
|
||||
npm i --save @langchain/core@0.3.44 langchain@0.3.21 @langchain/ollama@0.2.0 peggy@3.0.2 --force
|
||||
npm i --save @langchain/core@0.3.59 langchain@0.3.28 @langchain/ollama@0.2.2 peggy@3.0.2 --force
|
||||
```
|
||||
|
||||
:::
|
||||
@ -889,10 +892,10 @@ curl.exe -LO https://docs.sheetjs.com/cd.xls
|
||||
|
||||
:::
|
||||
|
||||
6) Install the `llama3-chatqa:8b-v1.5-q8_0` model using Ollama:
|
||||
6) Install the `phi4:14b` model using Ollama:
|
||||
|
||||
```bash
|
||||
ollama pull llama3-chatqa:8b-v1.5-q8_0
|
||||
ollama pull phi4:14b
|
||||
```
|
||||
|
||||
<details>
|
||||
@ -974,5 +977,5 @@ charts, tables, and other features.
|
||||
[^6]: See ["Supported Output Formats" type in "Writing Files"](/docs/api/write-options#supported-output-formats)
|
||||
[^7]: See ["Workbook Object"](/docs/csf/book)
|
||||
[^8]: See [`sheet_to_json` in "Utilities"](/docs/api/utilities/array#array-output)
|
||||
[^9]: See [the official ChatQA website](https://chatqa-project.github.io/) for the ChatQA paper and other model details.
|
||||
[^9]: See [the Phi-4 Technical Report](https://arxiv.org/abs/2412.08905) for more details.
|
||||
[^10]: Select ["Windows" `x86_64`](https://conda-forge.org/download/) in the Installation page.
|
||||
|
@ -6,7 +6,7 @@ pagination_next: demos/frontend/index
|
||||
---
|
||||
|
||||
<head>
|
||||
<script src="https://cdn.jsdelivr.net/npm/danfojs@1.1.2/lib/bundle.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/danfojs@1.2.0/lib/bundle.min.js"></script>
|
||||
</head>
|
||||
|
||||
[SheetJS](https://sheetjs.com) is a JavaScript library for reading and writing
|
||||
@ -23,8 +23,8 @@ This demo was tested in the following deployments:
|
||||
|
||||
| Platform | Version | Date |
|
||||
|:-------------|:--------|:-----------|
|
||||
| Chromium 131 | `1.1.2` | 2025-01-01 |
|
||||
| Safari 18.2 | `1.1.2` | 2025-01-01 |
|
||||
| Chromium 137 | `1.2.0` | 2025-06-16 |
|
||||
| Safari 18.5 | `1.2.0` | 2025-06-16 |
|
||||
| Konqueror 22 | `1.1.2` | 2025-04-23 |
|
||||
|
||||
:::
|
||||
@ -34,7 +34,7 @@ This demo was tested in the following deployments:
|
||||
The live demos on this page include the DanfoJS browser bundle:
|
||||
|
||||
```html
|
||||
<script src="https://cdn.jsdelivr.net/npm/danfojs@1.1.2/lib/bundle.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/danfojs@1.2.0/lib/bundle.min.js"></script>
|
||||
```
|
||||
|
||||
There are known issues with the documentation generator. If a demo explicitly
|
||||
|
@ -71,7 +71,7 @@ can be loaded after the TF.js standalone script.
|
||||
<!-- latest version of TF.js -->
|
||||
<script src="https://unpkg.com/@tensorflow/tfjs@latest/dist/tf.min.js"></script>
|
||||
<!-- use version ${current} -->
|
||||
<script lang="javascript" src="https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.full.min.js"></script>`}
|
||||
<script type="text/javascript" src="https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.full.min.js"></script>`}
|
||||
</CodeBlock>
|
||||
|
||||
#### Frameworks and Bundlers
|
||||
|
@ -42,9 +42,9 @@ This demo was tested in the following deployments:
|
||||
|:-------------|:----------------|:-------|:-------|:-----------|
|
||||
| `darwin-x64` | Duktape `2.7.0` | 2.2.3 | 3.13.1 | 2025-03-31 |
|
||||
| `darwin-arm` | Duktape `2.7.0` | 2.2.3 | 3.13.2 | 2025-03-30 |
|
||||
| `win11-x64` | Duktape `2.7.0` | 2.2.3 | 3.11.8 | 2024-12-21 |
|
||||
| `win11-x64` | Duktape `2.7.0` | 2.2.3 | 3.11.9 | 2025-04-28 |
|
||||
| `win11-arm` | Duktape `2.7.0` | 2.2.3 | 3.13.2 | 2025-02-23 |
|
||||
| `linux-x64` | Duktape `2.7.0` | 1.5.3 | 3.11.7 | 2025-01-01 |
|
||||
| `linux-x64` | Duktape `2.7.0` | 2.1.4 | 3.12.3 | 2025-06-16 |
|
||||
| `linux-arm` | Duktape `2.7.0` | 1.5.3 | 3.11.2 | 2025-02-16 |
|
||||
|
||||
:::
|
||||
@ -203,7 +203,7 @@ DataFrame. The DataFrame will be exported to the binary XLSB spreadsheet format.
|
||||
:::note pass
|
||||
|
||||
The Windows build requires Visual Studio with "Desktop development with C++".
|
||||
Commands must be run in a "Native Tools Command Prompt" session.
|
||||
**Commands must be run in a "Native Tools Command Prompt" session.**
|
||||
|
||||
:::
|
||||
|
||||
@ -215,6 +215,14 @@ python3 -m pip install pandas
|
||||
|
||||
:::info pass
|
||||
|
||||
On Windows, Python may be available as `python.exe`:
|
||||
|
||||
```bash
|
||||
python.exe -m pip install pandas
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
On macOS and Linux, the install command may require root access:
|
||||
|
||||
```bash
|
||||
@ -305,15 +313,13 @@ cd ..
|
||||
</TabItem>
|
||||
<TabItem value="win11-x64" label="Windows">
|
||||
|
||||
- Download and extract the source tarball. Commands must be run in WSL `bash`:
|
||||
- Download and extract the source tarball:
|
||||
|
||||
```bash
|
||||
curl -LO https://duktape.org/duktape-2.7.0.tar.xz
|
||||
tar -xJf duktape-2.7.0.tar.xz
|
||||
```
|
||||
|
||||
(Run `bash`, then run the aforementioned commands, then run `exit` to exit WSL)
|
||||
|
||||
- Enter the source folder:
|
||||
|
||||
```bash
|
||||
@ -472,6 +478,17 @@ def eval_file(ctx, path):
|
||||
python3 SheetJSPandas.py pres.numbers
|
||||
```
|
||||
|
||||
:::info pass
|
||||
|
||||
On Windows, Python may be available as `python.exe`:
|
||||
|
||||
```bash
|
||||
python.exe SheetJSPandas.py pres.numbers
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
|
||||
If successful, the script will display DataFrame metadata:
|
||||
|
||||
```
|
||||
@ -529,9 +546,9 @@ This demo was tested in the following deployments:
|
||||
|:-------------|:----------------|:--------|:-------|:-----------|
|
||||
| `darwin-x64` | Duktape `2.7.0` | 1.26.0 | 3.13.1 | 2025-03-31 |
|
||||
| `darwin-arm` | Duktape `2.7.0` | 1.26.0 | 3.13.2 | 2025-03-30 |
|
||||
| `win11-x64` | Duktape `2.7.0` | 1.17.1 | 3.11.8 | 2024-12-21 |
|
||||
| `win11-x64` | Duktape `2.7.0` | 1.28.1 | 3.11.9 | 2025-04-28 |
|
||||
| `win11-arm` | Duktape `2.7.0` | 1.23.0 | 3.13.2 | 2025-02-23 |
|
||||
| `linux-x64` | Duktape `2.7.0` | 1.18.0 | 3.11.7 | 2025-01-01 |
|
||||
| `linux-x64` | Duktape `2.7.0` | 1.30.0 | 3.12.3 | 2025-06-16 |
|
||||
| `linux-arm` | Duktape `2.7.0` | 1.22.0 | 3.11.2 | 2025-02-16 |
|
||||
|
||||
:::
|
||||
@ -599,10 +616,18 @@ python3 -m pip install polars
|
||||
|
||||
:::info pass
|
||||
|
||||
On Windows, Python may be available as `python.exe`:
|
||||
|
||||
```bash
|
||||
python.exe -m pip install polars
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
On macOS and Linux, the install command may require root access:
|
||||
|
||||
```bash
|
||||
sudo python3 -m pip install pandas
|
||||
sudo python3 -m pip install polars
|
||||
```
|
||||
|
||||
:::
|
||||
@ -631,7 +656,7 @@ It is recommended to use a virtual environment.
|
||||
- Debian and Ubuntu distributions:
|
||||
|
||||
```bash
|
||||
sudo apt-get install python3.11-venv
|
||||
sudo apt-get install python3-venv
|
||||
```
|
||||
|
||||
- `venv` is included in the `python` package in Arch Linux-based platforms.
|
||||
@ -662,6 +687,16 @@ cp ../libduktape.* ../SheetJSPandas.py ../sheetjs.py ../*.js ../*.numbers .
|
||||
python3 SheetJSPandas.py pres.numbers
|
||||
```
|
||||
|
||||
:::info pass
|
||||
|
||||
On Windows, Python may be available as `python.exe`:
|
||||
|
||||
```bash
|
||||
python.exe SheetJSPandas.py pres.numbers
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
:::note pass
|
||||
|
||||
If the virtual environment was configured in the previous step, run:
|
||||
@ -692,7 +727,7 @@ shape: (5, 2)
|
||||
It will also export the DataFrame to `SheetJSPolars.xlsb`. The file can be
|
||||
inspected with a spreadsheet editor that supports XLSB files.
|
||||
|
||||
[^1]: See ["Other Languages"](/docs/demos/engines/) for more examples.
|
||||
[^1]: See ["JavaScript Engines"](/docs/demos/engines/) for more examples.
|
||||
[^2]: See [`ctypes`](https://docs.python.org/3/library/ctypes.html) in the Python documentation.
|
||||
[^3]: See [`read` in "Reading Files"](/docs/api/parse-options)
|
||||
[^4]: See ["Workbook Object"](/docs/csf/book)
|
||||
|
@ -518,7 +518,7 @@ The generated site will be placed in the `dist` folder.
|
||||
9) Start a local web server:
|
||||
|
||||
```bash
|
||||
npx http-server dist
|
||||
npx -y http-server dist
|
||||
```
|
||||
|
||||
Access the displayed URL (typically `http://localhost:8080`) with a web browser
|
||||
@ -665,7 +665,7 @@ The generated site will be placed in the `dist` folder.
|
||||
9) Start a local web server:
|
||||
|
||||
```bash
|
||||
npx http-server dist
|
||||
npx -y http-server dist
|
||||
```
|
||||
|
||||
Access the displayed URL (typically `http://localhost:8080`) with a web browser
|
||||
|
@ -135,7 +135,7 @@ The SheetJS [`read`](/docs/api/parse-options) and [`sheet_to_json`](/docs/api/ut
|
||||
functions simplify state updates. They are best used in the function bodies of
|
||||
`useEffect`[^2] and `useCallback`[^3] hooks.
|
||||
|
||||
A `useEffect` hook can download and update state when a person loads the site:
|
||||
A `useEffect` hook can download and update state when the site is loaded:
|
||||
|
||||
```mermaid
|
||||
flowchart LR
|
||||
@ -150,12 +150,13 @@ flowchart LR
|
||||
wb --> |wb.Sheets\nselect sheet| ws
|
||||
ws --> |sheet_to_json\n\n| aoo
|
||||
aoo --> |setPres\nfrom `setState`| state
|
||||
linkStyle 1,2,3 color:blue,stroke:blue;
|
||||
```
|
||||
|
||||
<Tabs groupId="lang">
|
||||
<TabItem name="JS" value="JavaScript">
|
||||
|
||||
```js
|
||||
```js title="In a useEffect hook, update state with data from a remote workbook"
|
||||
import { useEffect } from 'react';
|
||||
import { read, utils } from 'xlsx';
|
||||
|
||||
@ -182,7 +183,7 @@ useEffect(() => { (async() => {
|
||||
</TabItem>
|
||||
<TabItem name="TS" value="TypeScript" default>
|
||||
|
||||
```ts
|
||||
```ts title="In a useEffect hook, update state with data from a remote workbook"
|
||||
import { useEffect } from 'react';
|
||||
import { read, utils } from 'xlsx';
|
||||
|
||||
@ -252,9 +253,10 @@ flowchart LR
|
||||
state --> |json_to_sheet\n\n| ws
|
||||
ws --> |book_new\nbook_append_sheet| wb
|
||||
wb --> |writeFile\n\n| file
|
||||
linkStyle 0,1,2 color:blue,stroke:blue;
|
||||
```
|
||||
|
||||
```ts
|
||||
```ts title="Export data from state to a new XLSX workbook"
|
||||
import { useCallback } from 'react';
|
||||
import { utils, writeFile } from 'xlsx';
|
||||
|
||||
@ -332,7 +334,7 @@ This demo was tested in the following environments:
|
||||
|
||||
| ReactJS | ViteJS | Date |
|
||||
|:---------|:--------|:-----------|
|
||||
| `18.3.1` | `6.0.1` | 2024-12-12 |
|
||||
| `19.1.0` | `6.3.5` | 2025-05-11 |
|
||||
|
||||
:::
|
||||
|
||||
@ -369,7 +371,7 @@ The generated site will be placed in the `dist` folder.
|
||||
6) Start a local web server:
|
||||
|
||||
```bash
|
||||
npx http-server dist
|
||||
npx -y http-server dist
|
||||
```
|
||||
|
||||
Access the displayed URL (typically `http://localhost:8080`) with a web browser
|
||||
@ -384,23 +386,14 @@ This demo was tested in the following environments:
|
||||
|
||||
| ReactJS | CRA | Date |
|
||||
|:---------|:--------|:-----------|
|
||||
| `18.2.0` | `5.0.1` | 2024-12-12 |
|
||||
| `19.1.0` | `5.1.0` | 2025-05-11 |
|
||||
|
||||
:::
|
||||
|
||||
:::caution pass
|
||||
|
||||
CRA has known compatibility issues with React 19[^5]. CRA no longer receives
|
||||
updates and the ReactJS docs no longer recommend using CRA. For new projects, it
|
||||
is strongly recommended to use ViteJS with the `react` or `react-ts` templates.
|
||||
|
||||
:::
|
||||
|
||||
|
||||
1) Create a new site:
|
||||
|
||||
```bash
|
||||
npx -y create-react-app@5.0.1 --scripts-version=5.0.1 sheetjs-react
|
||||
npx -y create-react-app@5.1.0 sheetjs-react
|
||||
```
|
||||
|
||||
2) Install the SheetJS dependency and start the dev server:
|
||||
@ -408,7 +401,7 @@ npx -y create-react-app@5.0.1 --scripts-version=5.0.1 sheetjs-react
|
||||
<CodeBlock language="bash">{`\
|
||||
cd sheetjs-react
|
||||
npm i
|
||||
npm i react@18.2.0 react-dom@18.2.0 web-vitals --save --save-exact
|
||||
npm i react@19.1.0 react-dom@19.1.0 web-vitals --save --save-exact
|
||||
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz
|
||||
npm start`}
|
||||
</CodeBlock>
|
||||
@ -431,7 +424,7 @@ The generated site will be placed in the `build` folder.
|
||||
6) Start a local web server:
|
||||
|
||||
```bash
|
||||
npx http-server build
|
||||
npx -y http-server build
|
||||
```
|
||||
|
||||
Access the displayed URL (typically `http://localhost:8080`) with a web browser
|
||||
@ -446,7 +439,7 @@ This demo was tested in the following environments:
|
||||
|
||||
| ReactJS | NextJS | Date |
|
||||
|:---------|:---------|:-----------|
|
||||
| `19.0.0` | `15.1.0` | 2024-12-13 |
|
||||
| `19.1.0` | `15.3.2` | 2025-05-11 |
|
||||
|
||||
:::
|
||||
|
||||
@ -567,7 +560,7 @@ This demo was tested in the following environments:
|
||||
|
||||
| Preact | ViteJS | Date |
|
||||
|:----------|:----------|:-----------|
|
||||
| `10.22.1` | `5.3.3` | 2024-12-17 |
|
||||
| `10.26.6` | `5.4.19` | 2025-05-11 |
|
||||
|
||||
:::
|
||||
|
||||
@ -578,7 +571,12 @@ npm init preact sheetjs-preact
|
||||
```
|
||||
|
||||
This will initiate the project creation process. **Follow the on-screen prompts and
|
||||
press Enter to accept the default options.**
|
||||
press Enter to accept the default options:**
|
||||
|
||||
- `Project language:` JavaScript
|
||||
- `Use router?` No
|
||||
- `Prerender app (SSG)?` No
|
||||
- `Use ESLint?` No
|
||||
|
||||
2) Install the SheetJS dependency and start the dev server:
|
||||
|
||||
@ -620,7 +618,7 @@ The generated site will be placed in the `dist` folder.
|
||||
7) Start a local web server:
|
||||
|
||||
```bash
|
||||
npx http-server dist
|
||||
npx -y http-server dist
|
||||
```
|
||||
|
||||
Access the displayed URL (typically `http://localhost:8080`) with a web browser
|
||||
@ -641,10 +639,149 @@ The main disadvantage of the Array of Objects approach is the specific nature
|
||||
of the columns. For more general use, passing around an Array of Arrays works.
|
||||
However, this does not handle merge cells[^6] well!
|
||||
|
||||
HTML Tables support elements with `rowspan` and `colspan` attributes.
|
||||
|
||||
#### State
|
||||
|
||||
The state will be the serialized HTML string:
|
||||
|
||||
<Tabs groupId="lang">
|
||||
<TabItem name="JS" value="JavaScript">
|
||||
|
||||
```ts
|
||||
import { useState } from 'react';
|
||||
|
||||
/* the component state is a string */
|
||||
const [__html, setHtml] = useState("");
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
<TabItem name="TS" value="TypeScript" default>
|
||||
|
||||
```ts
|
||||
import { useState } from 'react';
|
||||
|
||||
/* the component state is a string */
|
||||
const [__html, setHtml] = useState<string>("");
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
:::info Use of the variable name `__html`
|
||||
|
||||
Examples use the name `__html` due to the design of `dangerouslySetInnerHTML`.
|
||||
|
||||
`dangerouslySetInnerHTML` expects objects of the form `{ __html: "html code" }`.
|
||||
|
||||
For example, the following snippet assumes `html` is the variable name:
|
||||
|
||||
```jsx
|
||||
<div ref={tbl} dangerouslySetInnerHTML={{ __html: html }} />
|
||||
```
|
||||
|
||||
By using the name `__html`, the ES6 shorthand syntax simplifies the code:
|
||||
|
||||
```jsx
|
||||
<div ref={tbl} dangerouslySetInnerHTML={{ __html }} />
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
#### Updating State
|
||||
|
||||
The [`sheet_to_html`](/docs/api/utilities/html#html-table-output) function
|
||||
generates HTML that is aware of merges and other worksheet features. ReactJS
|
||||
`dangerouslySetInnerHTML`[^7] prop allows code to set the `innerHTML` attribute,
|
||||
effectively inserting the code into the page.
|
||||
generates HTML that is aware of merges and other worksheet features.
|
||||
|
||||
A `useEffect` hook can download and update state when the site is loaded:
|
||||
|
||||
```mermaid
|
||||
flowchart LR
|
||||
url[(Remote\nFile)]
|
||||
ab[(Data\nArrayBuffer)]
|
||||
wb(SheetJS\nWorkbook)
|
||||
ws(SheetJS\nWorksheet)
|
||||
html(HTML\nTABLE)
|
||||
state((component\nstate))
|
||||
url --> |fetch\n\n| ab
|
||||
ab --> |read\n\n| wb
|
||||
wb --> |wb.Sheets\nselect sheet| ws
|
||||
ws --> |sheet_to_html\n\n| html
|
||||
html --> |setHtml\nfrom `setState`| state
|
||||
linkStyle 1,2,3 color:blue,stroke:blue;
|
||||
```
|
||||
|
||||
```js title="In a useEffect hook, update state with HTML generated from a remote workbook"
|
||||
import { useEffect } from 'react';
|
||||
import { read, utils } from 'xlsx';
|
||||
|
||||
/* Fetch and update the state once */
|
||||
useEffect(() => { (async() => {
|
||||
/* Download from https://docs.sheetjs.com/pres.numbers */
|
||||
const f = await fetch("https://docs.sheetjs.com/pres.numbers");
|
||||
const ab = await f.arrayBuffer();
|
||||
|
||||
// highlight-start
|
||||
/* parse */
|
||||
const wb = read(ab);
|
||||
|
||||
/* generate HTML TABLE from first worksheet */
|
||||
const ws = wb.Sheets[wb.SheetNames[0]]; // get the first worksheet
|
||||
const data = utils.sheet_to_html(ws); // generate objects
|
||||
|
||||
/* update state */
|
||||
setHtml(data); // update state
|
||||
// highlight-end
|
||||
})(); }, []);
|
||||
```
|
||||
|
||||
#### Rendering Data
|
||||
|
||||
ReactJS `dangerouslySetInnerHTML`[^7] prop allows code to set the `innerHTML`
|
||||
attribute, effectively inserting the code into the page.
|
||||
|
||||
It is strongly recommended to set the `innerHTML` of a parent `DIV` container.
|
||||
By attaching a `ref`, callbacks will be able to access the live `TABLE` element.
|
||||
|
||||
```jsx title="Example JSX for displaying HTML TABLE code"
|
||||
<div ref={tbl} dangerouslySetInnerHTML={{ __html }} />
|
||||
```
|
||||
|
||||
#### Exporting Data
|
||||
|
||||
The [`writeFile`](/docs/api/write-options) and [`table_to_book`](/docs/api/utilities/html#html-table-input)
|
||||
functions simplify exporting data. They are best used in the function bodies of
|
||||
`useCallback`[^4] hooks attached to button or other elements.
|
||||
|
||||
A callback can generate a local file when a user clicks a button:
|
||||
|
||||
```mermaid
|
||||
flowchart LR
|
||||
state((component\nstate))
|
||||
wb(SheetJS\nWorkbook)
|
||||
file[(XLSX\nexport)]
|
||||
state --> |table_to_book\n\n| wb
|
||||
wb --> |writeFile\n\n| file
|
||||
linkStyle 0,1 color:blue,stroke:blue;
|
||||
```
|
||||
|
||||
```ts title="Export data from HTML TABLE element to a new XLSX workbook"
|
||||
import { useCallback } from 'react';
|
||||
import { utils, writeFile } from 'xlsx';
|
||||
|
||||
/* get data from live HTML TABLE and export to XLSX */
|
||||
const exportFile = useCallback(() => {
|
||||
/* get live reference to HTML TABLE element */
|
||||
const elt = tbl.current.getElementsByTagName("TABLE")[0];
|
||||
/* generate workbook from element */
|
||||
// highlight-next-line
|
||||
const wb = utils.table_to_book(elt);
|
||||
/* export to XLSX */
|
||||
writeFile(wb, "SheetJSReactAoO.xlsx");
|
||||
}, [pres]);
|
||||
```
|
||||
|
||||
#### Complete Component
|
||||
|
||||
In this example, the component attaches a `ref` to the `DIV` container. During
|
||||
export, the first `TABLE` child element can be parsed with [`table_to_book`](/docs/api/utilities/html#html-table-input) to
|
||||
@ -701,7 +838,7 @@ This demo was tested in the following environments:
|
||||
|
||||
| ReactJS | ViteJS | Date |
|
||||
|:---------|:--------|:-----------|
|
||||
| `18.3.1` | `6.0.1` | 2024-12-13 |
|
||||
| `19.1.0` | `6.3.5` | 2025-05-11 |
|
||||
|
||||
:::
|
||||
|
||||
@ -738,7 +875,7 @@ The generated site will be placed in the `dist` folder.
|
||||
6) Start a local web server:
|
||||
|
||||
```bash
|
||||
npx http-server dist
|
||||
npx -y http-server dist
|
||||
```
|
||||
|
||||
Access the displayed URL (typically `http://localhost:8080`) with a web browser
|
||||
@ -753,22 +890,14 @@ This demo was tested in the following environments:
|
||||
|
||||
| ReactJS | CRA | Date |
|
||||
|:---------|:--------|:-----------|
|
||||
| `18.2.0` | `5.0.1` | 2024-12-31 |
|
||||
|
||||
:::
|
||||
|
||||
:::caution pass
|
||||
|
||||
CRA has known compatibility issues with React 19[^5]. CRA no longer receives
|
||||
updates and the ReactJS docs no longer recommend using CRA. For new projects, it
|
||||
is strongly recommended to use ViteJS with the `react` or `react-ts` templates.
|
||||
| `19.1.0` | `5.1.0` | 2025-05-11 |
|
||||
|
||||
:::
|
||||
|
||||
1) Create a new site:
|
||||
|
||||
```bash
|
||||
npx -y create-react-app@5.0.1 --scripts-version=5.0.1 sheetjs-react
|
||||
npx -y create-react-app@5.1.0 sheetjs-react
|
||||
```
|
||||
|
||||
2) Install the SheetJS dependency and start the dev server:
|
||||
@ -776,7 +905,7 @@ npx -y create-react-app@5.0.1 --scripts-version=5.0.1 sheetjs-react
|
||||
<CodeBlock language="bash">{`\
|
||||
cd sheetjs-react
|
||||
npm i
|
||||
npm i react@18.2.0 react-dom@18.2.0 web-vitals --save --save-exact
|
||||
npm i react@19.1.0 react-dom@19.1.0 web-vitals --save --save-exact
|
||||
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz
|
||||
npm start`}
|
||||
</CodeBlock>
|
||||
@ -799,7 +928,7 @@ The generated site will be placed in the `build` folder.
|
||||
6) Start a local web server:
|
||||
|
||||
```bash
|
||||
npx http-server build
|
||||
npx -y http-server build
|
||||
```
|
||||
|
||||
Access the displayed URL (typically `http://localhost:8080`) with a web browser
|
||||
@ -812,9 +941,9 @@ and test the page.
|
||||
|
||||
This demo was tested in the following environments:
|
||||
|
||||
| Preact | ViteJS | Date |
|
||||
|:----------|:--------|:-----------|
|
||||
| `10.22.1` | `5.3.3` | 2024-12-17 |
|
||||
| Preact | ViteJS | Date |
|
||||
|:----------|:---------|:-----------|
|
||||
| `10.26.6` | `5.4.19` | 2025-05-11 |
|
||||
|
||||
:::
|
||||
|
||||
@ -823,11 +952,15 @@ npm init preact sheetjs-preact
|
||||
```
|
||||
|
||||
This will initiate the project creation process. **Follow the on-screen prompts and
|
||||
press Enter to accept the default options.**
|
||||
press Enter to accept the default options:**
|
||||
|
||||
- `Project language:` JavaScript
|
||||
- `Use router?` No
|
||||
- `Prerender app (SSG)?` No
|
||||
- `Use ESLint?` No
|
||||
|
||||
2) Install the SheetJS dependency and start the dev server:
|
||||
|
||||
|
||||
<CodeBlock language="bash">{`\
|
||||
cd sheetjs-preact
|
||||
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz
|
||||
@ -866,7 +999,7 @@ The generated site will be placed in the `dist` folder.
|
||||
7) Start a local web server:
|
||||
|
||||
```bash
|
||||
npx http-server dist
|
||||
npx -y http-server dist
|
||||
```
|
||||
|
||||
Access the displayed URL (typically `http://localhost:8080`) with a web browser
|
||||
@ -913,8 +1046,8 @@ const columns = Array.from({ length: range.e.c + 1 }, (_, i) => ({
|
||||
|
||||
## Legacy Deployments
|
||||
|
||||
[The Standalone Scripts](/docs/getting-started/installation/standalone) play nice
|
||||
with legacy deployments that do not use a bundler.
|
||||
[SheetJS Standalone Scripts](/docs/getting-started/installation/standalone) use
|
||||
simple `SCRIPT` tags and work with legacy deployments that do not use a bundler.
|
||||
|
||||
[The legacy demo](pathname:///react/index.html) shows a simple ReactJS component
|
||||
transpiled in the browser using Babel standalone library.
|
||||
|
@ -397,7 +397,7 @@ The generated site will be placed in the `dist` folder.
|
||||
6) Start a local web server:
|
||||
|
||||
```bash
|
||||
npx http-server dist
|
||||
npx -y http-server dist
|
||||
```
|
||||
|
||||
Access the displayed URL (typically `http://localhost:8080`) with a web browser
|
||||
@ -449,7 +449,7 @@ The generated site will be placed in the `dist` folder.
|
||||
6) Start a local web server:
|
||||
|
||||
```bash
|
||||
npx http-server .output/public/
|
||||
npx -y http-server .output/public/
|
||||
```
|
||||
|
||||
Access the displayed URL (typically `http://localhost:8080`) with a web browser
|
||||
@ -558,7 +558,7 @@ The generated site will be placed in the `dist` folder.
|
||||
6) Start a local web server:
|
||||
|
||||
```bash
|
||||
npx http-server dist
|
||||
npx -y http-server dist
|
||||
```
|
||||
|
||||
Access the displayed URL (typically `http://localhost:8080`) with a web browser
|
||||
@ -610,7 +610,7 @@ The generated site will be placed in the `dist` folder.
|
||||
6) Start a local web server:
|
||||
|
||||
```bash
|
||||
npx http-server .output/public/
|
||||
npx -y http-server .output/public/
|
||||
```
|
||||
|
||||
Access the displayed URL (typically `http://localhost:8080`) with a web browser
|
||||
|
@ -53,7 +53,7 @@ can be loaded in the root HTML page (typically `wwwroot/index.html`):
|
||||
|
||||
<CodeBlock language="html">{`\
|
||||
<!-- use version ${current} -->
|
||||
<script lang="javascript" src="https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.full.min.js"></script>`}
|
||||
<script type="text/javascript" src="https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.full.min.js"></script>`}
|
||||
</CodeBlock>
|
||||
|
||||
#### ECMAScript Module
|
||||
@ -104,7 +104,7 @@ It should be injected at the top of relevant Razor component scripts:
|
||||
|
||||
When exporting a file with the SheetJS `writeFile` method[^2], browser APIs do
|
||||
not provide success or error feedback. As a result, this demo invokes functions
|
||||
using the `InvokeVoidAsync` static method[^3].
|
||||
using the `InvokeVoidAsync` static method[^3].
|
||||
|
||||
The following C# method will invoke the `export_method` method in the browser:
|
||||
|
||||
|
@ -91,7 +91,7 @@ in the ["API Reference"](/docs/api/) section of the documentation.
|
||||
|
||||
<!-- The SheetJS Standalone script must be loaded before the UI5 bootstrap -->
|
||||
<script src="https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.full.min.js"></script>
|
||||
|
||||
|
||||
<!-- UI5 bootstrap script -->
|
||||
<script
|
||||
id="sap-ui-bootstrap"
|
||||
@ -260,7 +260,7 @@ flowchart LR
|
||||
linkStyle 1,2,3 color:blue,stroke:blue;
|
||||
```
|
||||
|
||||
Here is a sample method for exporting data from the UI5 `JSONModel` to XLSX:
|
||||
Here is a sample method for exporting data from the UI5 `JSONModel` to XLSX:
|
||||
|
||||
```js title="Fetch data from JSONModel and export to XLSX"
|
||||
/* get model data and export to XLSX */
|
||||
@ -441,7 +441,7 @@ generated. The `dist` folder in this demo can be deployed on a static host.
|
||||
9) Start a local web server:
|
||||
|
||||
```bash
|
||||
npx http-server dist
|
||||
npx -y http-server dist
|
||||
```
|
||||
|
||||
Access the displayed URL (typically `http://localhost:8080`) with a web browser
|
||||
@ -611,7 +611,7 @@ generated. The `dist` folder in this demo can be deployed on a static host.
|
||||
9) Start a local web server:
|
||||
|
||||
```bash
|
||||
npx http-server dist
|
||||
npx -y http-server dist
|
||||
```
|
||||
|
||||
Access the displayed URL (typically `http://localhost:8080`) with a web browser
|
||||
|
@ -25,9 +25,9 @@ the shim script must be loaded first:
|
||||
|
||||
<CodeBlock language="html">{`\
|
||||
<!-- SheetJS version ${current} \`shim.min.js\` -->
|
||||
<script lang="javascript" src="https://cdn.sheetjs.com/xlsx-${current}/package/dist/shim.min.js"></script>
|
||||
<script type="text/javascript" src="https://cdn.sheetjs.com/xlsx-${current}/package/dist/shim.min.js"></script>
|
||||
<!-- SheetJS version ${current} \`xlsx.full.min.js\` -->
|
||||
<script lang="javascript" src="https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.full.min.js"></script>
|
||||
<script type="text/javascript" src="https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.full.min.js"></script>
|
||||
<script>
|
||||
/* display SheetJS version */
|
||||
if(typeof console == "object" && console.log) console.log(XLSX.version);
|
||||
|
@ -173,7 +173,7 @@ npx vite build
|
||||
7) Verify the new site by running a local web server in the `dist` folder:
|
||||
|
||||
```bash
|
||||
npx http-server dist
|
||||
npx -y http-server dist
|
||||
```
|
||||
|
||||
8) Access the displayed URL (typically `http://localhost:8080`) in a web browser
|
||||
|
@ -47,22 +47,23 @@ This demo was tested in the following environments:
|
||||
|
||||
| ESBuild | Date |
|
||||
|:----------|:-----------|
|
||||
| `0.24.2` | 2025-01-07 |
|
||||
| `0.23.1` | 2025-01-07 |
|
||||
| `0.22.0` | 2025-01-07 |
|
||||
| `0.21.5` | 2025-01-07 |
|
||||
| `0.20.2` | 2025-01-07 |
|
||||
| `0.19.12` | 2025-01-07 |
|
||||
| `0.18.20` | 2025-01-07 |
|
||||
| `0.17.19` | 2025-01-07 |
|
||||
| `0.16.17` | 2025-01-07 |
|
||||
| `0.15.18` | 2025-01-07 |
|
||||
| `0.14.54` | 2025-01-07 |
|
||||
| `0.13.15` | 2025-01-07 |
|
||||
| `0.12.29` | 2025-01-07 |
|
||||
| `0.11.23` | 2025-01-07 |
|
||||
| `0.10.2` | 2025-01-07 |
|
||||
| `0.9.7` | 2025-01-07 |
|
||||
| `0.25.5` | 2025-06-02 |
|
||||
| `0.24.2` | 2025-06-02 |
|
||||
| `0.23.1` | 2025-06-02 |
|
||||
| `0.22.0` | 2025-06-02 |
|
||||
| `0.21.5` | 2025-06-02 |
|
||||
| `0.20.2` | 2025-06-02 |
|
||||
| `0.19.12` | 2025-06-02 |
|
||||
| `0.18.20` | 2025-06-02 |
|
||||
| `0.17.19` | 2025-06-02 |
|
||||
| `0.16.17` | 2025-06-02 |
|
||||
| `0.15.18` | 2025-06-02 |
|
||||
| `0.14.54` | 2025-06-02 |
|
||||
| `0.13.15` | 2025-06-02 |
|
||||
| `0.12.29` | 2025-06-02 |
|
||||
| `0.11.23` | 2025-06-02 |
|
||||
| `0.10.2` | 2025-06-02 |
|
||||
| `0.9.7` | 2025-06-02 |
|
||||
|
||||
:::
|
||||
|
||||
@ -90,7 +91,7 @@ Assuming the primary source file is `in.js`, the following command will bundle
|
||||
the script and generate `out.js`:
|
||||
|
||||
```bash
|
||||
npx -y esbuild@0.24.2 in.js --bundle --outfile=out.js
|
||||
npx -y esbuild@0.25.5 in.js --bundle --outfile=out.js
|
||||
```
|
||||
|
||||
### Browser Demo
|
||||
@ -139,13 +140,13 @@ curl -LO https://docs.sheetjs.com/esbuild/esbrowser.js
|
||||
4) Create bundle:
|
||||
|
||||
```bash
|
||||
npx -y esbuild@0.19.8 esbrowser.js --bundle --outfile=esb.browser.js
|
||||
npx -y esbuild@0.25.5 esbrowser.js --bundle --outfile=esb.browser.js
|
||||
```
|
||||
|
||||
5) Start a local HTTP server:
|
||||
|
||||
```bash
|
||||
npx http-server .
|
||||
npx -y http-server .
|
||||
```
|
||||
|
||||
Access the displayed URL (typically `http://localhost:8080`) with a web browser.
|
||||
@ -179,7 +180,7 @@ Assuming the primary source file is `in.js`, the following command will bundle
|
||||
the script for NodeJS and generate `out.js`:
|
||||
|
||||
```bash
|
||||
npx -y esbuild@0.19.8 in.js --bundle --platform=node --outfile=out.js
|
||||
npx -y esbuild@0.25.5 in.js --bundle --platform=node --outfile=out.js
|
||||
```
|
||||
|
||||
### NodeJS Demo
|
||||
@ -228,7 +229,7 @@ curl -LO https://docs.sheetjs.com/esbuild/esbnode.js
|
||||
3) Create bundle:
|
||||
|
||||
```bash
|
||||
npx -y esbuild@0.19.8 esbnode.js --bundle --platform=node --outfile=esb.node.js
|
||||
npx -y esbuild@0.25.5 esbnode.js --bundle --platform=node --outfile=esb.node.js
|
||||
```
|
||||
|
||||
4) Run the bundle:
|
||||
|
@ -177,7 +177,7 @@ document.getElementById("xport").addEventListener("click", function() {
|
||||
prez.forEach(function(row) {
|
||||
row.start = row.terms.find(function(term) {
|
||||
return term.type === "prez";
|
||||
}).start
|
||||
}).start;
|
||||
});
|
||||
prez.sort(function(l,r) { return l.start.localeCompare(r.start); });
|
||||
|
||||
@ -322,7 +322,7 @@ npx webpack --mode=production
|
||||
6) Start a local HTTP server:
|
||||
|
||||
```bash
|
||||
npx http-server .
|
||||
npx -y http-server .
|
||||
```
|
||||
|
||||
7) Load the displayed URL (typically `http://localhost:8080/`) in a web browser.
|
||||
|
@ -34,21 +34,21 @@ This demo was tested in the following environments:
|
||||
|
||||
| Browserify | Date |
|
||||
|:-----------|:-----------|
|
||||
| `17.0.1` | 2025-01-07 |
|
||||
| `16.5.2` | 2025-01-07 |
|
||||
| `15.2.0` | 2025-01-07 |
|
||||
| `14.5.0` | 2025-01-07 |
|
||||
| `13.3.0` | 2025-01-07 |
|
||||
| `12.0.2` | 2025-01-07 |
|
||||
| `11.2.0` | 2025-01-07 |
|
||||
| `10.2.6` | 2025-01-07 |
|
||||
| `9.0.8` | 2025-01-07 |
|
||||
| `8.1.3` | 2025-01-07 |
|
||||
| `7.1.0` | 2025-01-07 |
|
||||
| `6.3.4` | 2025-01-07 |
|
||||
| `5.13.1` | 2025-01-07 |
|
||||
| `4.2.3` | 2025-01-07 |
|
||||
| `3.46.1` | 2025-01-07 |
|
||||
| `17.0.1` | 2025-06-18 |
|
||||
| `16.5.2` | 2025-06-18 |
|
||||
| `15.2.0` | 2025-06-18 |
|
||||
| `14.5.0` | 2025-06-18 |
|
||||
| `13.3.0` | 2025-06-18 |
|
||||
| `12.0.2` | 2025-06-18 |
|
||||
| `11.2.0` | 2025-06-18 |
|
||||
| `10.2.6` | 2025-06-18 |
|
||||
| `9.0.8` | 2025-06-18 |
|
||||
| `8.1.3` | 2025-06-18 |
|
||||
| `7.1.0` | 2025-06-18 |
|
||||
| `6.3.4` | 2025-06-18 |
|
||||
| `5.13.1` | 2025-06-18 |
|
||||
| `4.2.3` | 2025-06-18 |
|
||||
| `3.46.1` | 2025-06-18 |
|
||||
|
||||
:::
|
||||
|
||||
@ -115,7 +115,7 @@ document.getElementById("xport").addEventListener("click", function() {
|
||||
prez.forEach(function(row) {
|
||||
row.start = row.terms.find(function(term) {
|
||||
return term.type === "prez";
|
||||
}).start
|
||||
}).start;
|
||||
});
|
||||
prez.sort(function(l,r) { return l.start.localeCompare(r.start); });
|
||||
|
||||
@ -177,7 +177,7 @@ npm install --save browserify@3.46.1
|
||||
5) Start a local HTTP server:
|
||||
|
||||
```bash
|
||||
npx http-server .
|
||||
npx -y http-server .
|
||||
```
|
||||
|
||||
6) Load the displayed URL (typically `http://localhost:8080/`) in a web browser.
|
||||
|
@ -209,7 +209,7 @@ uses normal functions and traditional Promise chains.
|
||||
3) Start a local HTTP server:
|
||||
|
||||
```bash
|
||||
npx http-server .
|
||||
npx -y http-server .
|
||||
```
|
||||
|
||||
4) Load the displayed URL (typically `http://localhost:8080/`) in a web browser.
|
||||
|
@ -169,7 +169,7 @@ This step will create `bundle.js`
|
||||
5) Start a local HTTP server:
|
||||
|
||||
```bash
|
||||
npx http-server .
|
||||
npx -y http-server .
|
||||
```
|
||||
|
||||
Access the displayed URL (typically `http://localhost:8080/`) in a web browser.
|
||||
|
@ -34,8 +34,8 @@ This demo was tested in the following environments:
|
||||
|
||||
| Version | Date |
|
||||
|:---------|:-----------|
|
||||
| `2.13.3` | 2024-12-31 |
|
||||
| `1.12.3` | 2024-12-31 |
|
||||
| `2.14.4` | 2025-05-07 |
|
||||
| `1.12.3` | 2025-05-07 |
|
||||
|
||||
:::
|
||||
|
||||
@ -239,7 +239,7 @@ The production site will be stored in the `dist` folder
|
||||
7) Start a local web server and serve the `dist` folder:
|
||||
|
||||
```bash
|
||||
npx http-server dist
|
||||
npx -y http-server dist
|
||||
```
|
||||
|
||||
Access the displayed URL (typically `http://localhost:8080/`) in a web browser.
|
||||
|
@ -35,7 +35,7 @@ This demo was tested in the following environments:
|
||||
|
||||
| Version | Date |
|
||||
|:----------|:-----------|
|
||||
| `1.2.246` | 2025-01-07 |
|
||||
| `1.21.1` | 2025-06-18 |
|
||||
|
||||
:::
|
||||
|
||||
@ -63,7 +63,7 @@ part of the `utils` object, the required import is:
|
||||
import { utils, writeFile } from 'xlsx';
|
||||
```
|
||||
|
||||
:::danger pass
|
||||
:::caution pass
|
||||
|
||||
When this demo was tested against recent versions of `@swc/core`, `spack` crashed:
|
||||
|
||||
@ -75,7 +75,8 @@ thread '<unnamed>' panicked at 'cannot access a scoped thread local variable wit
|
||||
|
||||
This bug is known to affect versions `1.3.100`, `1.4.17`, and `1.10.6`.
|
||||
|
||||
Until the bug is fixed, it is strongly recommended to use `@swc/core@1.2.246`.
|
||||
This bug was fixed in version `1.21.1`. It is strongly recommended to upgrade
|
||||
existing projects to use `1.21.1` or to downgrade to `1.2.246`.
|
||||
|
||||
:::
|
||||
|
||||
@ -94,17 +95,17 @@ npm init -y
|
||||
<Tabs groupId="pm">
|
||||
<TabItem value="npm" label="npm">
|
||||
<CodeBlock language="bash">{`\
|
||||
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz regenerator-runtime @swc/cli @swc/core@1.2.246`}
|
||||
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz regenerator-runtime @swc/cli @swc/core@1.21.1`}
|
||||
</CodeBlock>
|
||||
</TabItem>
|
||||
<TabItem value="pnpm" label="pnpm">
|
||||
<CodeBlock language="bash">{`\
|
||||
pnpm install --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz regenerator-runtime @swc/cli @swc/core@1.2.246`}
|
||||
pnpm install --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz regenerator-runtime @swc/cli @swc/core@1.21.1`}
|
||||
</CodeBlock>
|
||||
</TabItem>
|
||||
<TabItem value="yarn" label="Yarn" default>
|
||||
<CodeBlock language="bash">{`\
|
||||
yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz regenerator-runtime @swc/cli @swc/core@1.2.246`}
|
||||
yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz regenerator-runtime @swc/cli @swc/core@1.21.1`}
|
||||
</CodeBlock>
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
@ -195,7 +196,7 @@ This command will create the script `lib/web.js`
|
||||
6) Start a local HTTP server, then go to `http://localhost:8080/`
|
||||
|
||||
```bash
|
||||
npx http-server .
|
||||
npx -y http-server .
|
||||
```
|
||||
|
||||
Click on "Click here to export" to generate a file.
|
||||
|
@ -164,7 +164,7 @@ npx snowpack@3.8.8 build
|
||||
5) Start a local HTTP server:
|
||||
|
||||
```bash
|
||||
npx http-server build/
|
||||
npx -y http-server build/
|
||||
```
|
||||
|
||||
6) Open a web browser to the displayed URL (typically `http://localhost:8080/`).
|
||||
@ -290,7 +290,7 @@ npx wmr@3.8.0 build
|
||||
5) Start a local HTTP server:
|
||||
|
||||
```bash
|
||||
npx http-server dist/
|
||||
npx -y http-server dist/
|
||||
```
|
||||
|
||||
6) Open a web browser to the displayed URL (typically `http://localhost:8080/`).
|
||||
|
@ -26,8 +26,8 @@ This demo was tested in the following deployments:
|
||||
|
||||
| Drash | Deno | Date |
|
||||
|:--------|:-------|:-----------|
|
||||
| `2.8.1` | 1.44.1 | 2024-12-19 |
|
||||
| `2.8.1` | 2.1.4 | 2024-12-19 |
|
||||
| `2.8.1` | 1.46.0 | 2025-05-21 |
|
||||
| `2.8.1` | 2.3.3 | 2025-05-21 |
|
||||
|
||||
:::
|
||||
|
||||
@ -133,7 +133,7 @@ deno run --allow-net SheetJSDrash.ts
|
||||
Deno 2 requires the `--allow-import` entitlement:
|
||||
|
||||
```bash
|
||||
deno run --allow-net --allow-write --allow-import SheetJSDenoDOM.ts
|
||||
deno run --allow-net --allow-write --allow-import SheetJSDrash.ts
|
||||
```
|
||||
|
||||
:::
|
||||
@ -142,9 +142,10 @@ deno run --allow-net --allow-write --allow-import SheetJSDenoDOM.ts
|
||||
|
||||
4) Open `http://localhost:7262/` in your browser.
|
||||
|
||||
Click "Choose File" and select `pres.numbers`. Then click "Submit"
|
||||
Click "Choose File" and select `pres.numbers` from the Downloads folder.
|
||||
|
||||
The page should show the contents of the file as an HTML table.
|
||||
Click "Submit" to make a request to the Drash server. The response should show
|
||||
the contents of the file as an HTML table.
|
||||
|
||||
5) Open `http://localhost:7262/export` in your browser.
|
||||
|
||||
|
@ -23,9 +23,11 @@ The ["Complete Example"](#complete-example) section includes a complete server.
|
||||
|
||||
This demo was tested in the following deployments:
|
||||
|
||||
| Platform | HonoJS | Date |
|
||||
|:---------------|:---------|:-----------|
|
||||
| BunJS `1.1.40` | `4.6.14` | 2024-12-19 |
|
||||
| Platform | HonoJS | Date |
|
||||
|:---------------|:----------|:-----------|
|
||||
| BunJS `1.2.13` | `2.7.8` | 2025-05-21 |
|
||||
| BunJS `1.2.13` | `3.12.12` | 2025-05-21 |
|
||||
| BunJS `1.2.13` | `4.7.10` | 2025-05-21 |
|
||||
|
||||
:::
|
||||
|
||||
|
@ -26,8 +26,8 @@ This demo was tested in the following deployments:
|
||||
|
||||
| Platform | ElysiaJS | Date |
|
||||
|:---------------|:---------|:-----------|
|
||||
| BunJS `1.1.40` | `0.8.17` | 2024-12-19 |
|
||||
| BunJS `1.1.40` | `1.1.26` | 2024-12-19 |
|
||||
| BunJS `1.2.13` | `0.8.17` | 2025-05-21 |
|
||||
| BunJS `1.2.13` | `1.3.1` | 2025-05-21 |
|
||||
|
||||
:::
|
||||
|
||||
|
@ -24,11 +24,12 @@ The ["Complete Example"](#complete-example) section includes a complete server.
|
||||
|
||||
This demo was tested in the following deployments:
|
||||
|
||||
| NestJS | Date |
|
||||
|:----------|:-------------|
|
||||
| `10.4.15` | `2024-12-22` |
|
||||
| `9.4.3` | `2024-12-22` |
|
||||
| `8.4.7` | `2024-12-22` |
|
||||
| NestJS | Date |
|
||||
|:----------|:-----------|
|
||||
| `11.1.1` | 2025-05-21 |
|
||||
| `10.4.17` | 2025-05-21 |
|
||||
| `9.4.3` | 2025-05-21 |
|
||||
| `8.4.7` | 2025-05-21 |
|
||||
|
||||
:::
|
||||
|
||||
|
@ -36,12 +36,13 @@ the file can be downloaded or previewed in the browser.
|
||||
|
||||
This demo was tested in the following deployments:
|
||||
|
||||
| Platform | Version | Date |
|
||||
|:-------------|:---------|:-----------|
|
||||
| Chromium 131 | `1.9.0` | 2024-12-22 |
|
||||
| Konqueror 22 | `1.9.0` | 2025-04-23 |
|
||||
| NodeJS 20 | `1.10.0` | 2024-12-22 |
|
||||
| BunJS 1.1 | `1.10.0` | 2024-12-22 |
|
||||
| Platform | Version | Date |
|
||||
|:--------------|:---------|:-----------|
|
||||
| Chromium 136 | `1.9.0` | 2025-05-07 |
|
||||
| Safari 17.5 | `1.9.0` | 2025-05-07 |
|
||||
| Konqueror 22 | `1.9.0` | 2025-05-07 |
|
||||
| NodeJS 24.0.0 | `1.11.0` | 2025-05-07 |
|
||||
| BunJS 1.2.10 | `1.11.0` | 2025-05-07 |
|
||||
|
||||
:::
|
||||
|
||||
|
@ -130,12 +130,13 @@ This demo was tested in the following deployments:
|
||||
|
||||
| Puppeteer | Date |
|
||||
|:----------|:-----------|
|
||||
| `23.11.1` | 2024-12-31 |
|
||||
| `22.15.0` | 2024-12-31 |
|
||||
| `21.11.0` | 2024-12-31 |
|
||||
| `20.9.0` | 2024-12-31 |
|
||||
| `15.5.0` | 2024-12-31 |
|
||||
| `10.4.0` | 2024-12-31 |
|
||||
| `24.9.0` | 2025-05-21 |
|
||||
| `23.11.1` | 2025-05-21 |
|
||||
| `22.15.0` | 2025-05-21 |
|
||||
| `21.11.0` | 2025-05-21 |
|
||||
| `20.9.0` | 2025-05-21 |
|
||||
| `15.5.0` | 2025-05-21 |
|
||||
| `10.4.0` | 2025-05-21 |
|
||||
|
||||
:::
|
||||
|
||||
@ -145,14 +146,14 @@ This demo was tested in the following deployments:
|
||||
<TabItem value="nodejs" label="NodeJS">
|
||||
|
||||
<CodeBlock language="bash">{`\
|
||||
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz puppeteer@23.11.1`}
|
||||
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz puppeteer@24.9.0`}
|
||||
</CodeBlock>
|
||||
|
||||
</TabItem>
|
||||
<TabItem value="bunjs" label="BunJS">
|
||||
|
||||
<CodeBlock language="bash">{`\
|
||||
bun install https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz puppeteer@23.11.1`}
|
||||
bun install https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz puppeteer@24.9.0`}
|
||||
</CodeBlock>
|
||||
|
||||
</TabItem>
|
||||
@ -236,9 +237,9 @@ const { webkit } = require('playwright'); // import desired browser
|
||||
|
||||
This demo was tested in the following deployments:
|
||||
|
||||
| Playwright | Date |
|
||||
|:-----------|:-----------|
|
||||
| `1.49.1` | 2024-12-31 |
|
||||
| Playwright | Browser | Date |
|
||||
|:-----------|:------------|:-----------|
|
||||
| `1.52.0` | Webkit 18.4 | 2025-05-21 |
|
||||
|
||||
:::
|
||||
|
||||
@ -333,8 +334,8 @@ This demo was tested in the following environments:
|
||||
| Architecture | PhantomJS | Date |
|
||||
|:-------------|:----------|:-----------|
|
||||
| `darwin-x64` | `2.1.1` | 2025-03-31 |
|
||||
| `win11-x64` | `2.1.1` | 2025-01-19 |
|
||||
| `linux-x64` | `2.1.1` | 2025-01-07 |
|
||||
| `win11-x64` | `2.1.1` | 2025-06-18 |
|
||||
| `linux-x64` | `2.1.1` | 2025-06-16 |
|
||||
|
||||
:::
|
||||
|
||||
@ -420,7 +421,7 @@ a different error after assignment:
|
||||
This error is resolved by ignoring SSL errors. The complete command is:
|
||||
|
||||
```bash
|
||||
env OPENSSL_CONF=/dev/null QT_QPA_PLATFORM=phantom ./phantomjs-2.1.1-linux-x86_64/bin/phantomjs --ignore-ssl-errors=true test.js
|
||||
env OPENSSL_CONF=/dev/null QT_QPA_PLATFORM=phantom ./phantomjs-2.1.1-linux-x86_64/bin/phantomjs --ignore-ssl-errors=true SheetJSPhantom.js
|
||||
```
|
||||
|
||||
:::
|
||||
|
@ -377,9 +377,9 @@ This demo was tested in the following deployments:
|
||||
|:-------------|:--------|:-------|:-----------|
|
||||
| `darwin-x64` | 0.1.48 | 2.2.6 | 2025-03-31 |
|
||||
| `darwin-arm` | 0.1.48 | 2.2.12 | 2025-04-24 |
|
||||
| `win11-x64` | 0.1.48 | 2.0.4 | 2024-10-30 |
|
||||
| `win11-x64` | 0.1.48 | 2.2.12 | 2025-04-28 |
|
||||
| `win11-arm` | 0.1.48 | 2.2.1 | 2025-02-23 |
|
||||
| `linux-x64` | 0.1.48 | 2.0.5 | 2025-01-10 |
|
||||
| `linux-x64` | 0.1.48 | 2.3.6 | 2025-06-16 |
|
||||
| `linux-arm` | 0.1.48 | 2.1.10 | 2025-02-16 |
|
||||
|
||||
:::
|
||||
@ -392,17 +392,17 @@ This demo was tested in the following deployments:
|
||||
2) Run the script with `--allow-net` and `--allow-write` entitlements:
|
||||
|
||||
```bash
|
||||
deno run --allow-net --allow-write SheetJSDenoDOM.ts
|
||||
deno run --allow-net --allow-write --allow-import SheetJSDenoDOM.ts
|
||||
```
|
||||
|
||||
The script will create a file `SheetJSDenoDOM.xlsx` that can be opened.
|
||||
|
||||
:::caution pass
|
||||
:::note pass
|
||||
|
||||
Deno 2 additionally requires the `--allow-import` entitlement:
|
||||
In older versions of Deno, the `--allow-import` flag must be omitted:
|
||||
|
||||
```bash
|
||||
deno run --allow-net --allow-write --allow-import SheetJSDenoDOM.ts
|
||||
deno run --allow-net --allow-write SheetJSDenoDOM.ts
|
||||
```
|
||||
|
||||
:::
|
||||
|
@ -20,8 +20,8 @@ This demo was tested in the following environments:
|
||||
|
||||
| Browser | Date |
|
||||
|:-------------|:-----------|
|
||||
| Chromium 131 | 2024-12-31 |
|
||||
| Safari 18.2 | 2024-12-31 |
|
||||
| Chromium 136 | 2025-05-21 |
|
||||
| Safari 18.2 | 2025-05-21 |
|
||||
| Konqueror 22 | 2025-04-23 |
|
||||
|
||||
:::
|
||||
|
@ -19,8 +19,8 @@ This demo was tested in the following environments:
|
||||
|
||||
| Browser | Date |
|
||||
|:-------------|:-----------|
|
||||
| Chromium 131 | 2024-12-31 |
|
||||
| Safari 18.2 | 2024-12-31 |
|
||||
| Chromium 136 | 2025-05-21 |
|
||||
| Safari 18.2 | 2025-05-21 |
|
||||
| Konqueror 22 | 2025-04-23 |
|
||||
|
||||
:::
|
||||
|
@ -231,7 +231,7 @@ This will create a static site in the `_site` folder
|
||||
8) Test the generated site by starting a web server:
|
||||
|
||||
```bash
|
||||
npx http-server _site
|
||||
npx -y http-server _site
|
||||
```
|
||||
|
||||
The program will display a URL (typically `http://localhost:8080`). Accessing
|
||||
|
@ -294,7 +294,7 @@ The final script will be saved to `out.js`
|
||||
7) Start a local web server to host the project folder:
|
||||
|
||||
```bash
|
||||
npx http-server .
|
||||
npx -y http-server .
|
||||
```
|
||||
|
||||
The command will print a list of URLs.
|
||||
|
@ -430,7 +430,7 @@ Save and refresh the page. A data table should be displayed
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
npx http-server dist/
|
||||
npx -y http-server dist/
|
||||
```
|
||||
|
||||
The terminal will display a URL, typically `http://127.0.0.1:8080` . Access
|
||||
@ -506,7 +506,7 @@ Save and refresh the page. A data table should be displayed
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
npx http-server dist/
|
||||
npx -y http-server dist/
|
||||
```
|
||||
|
||||
The terminal will display a URL, typically `http://127.0.0.1:8080` . Access
|
||||
@ -594,7 +594,7 @@ const data = utils.sheet_to_json<IPresident>(ws);
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
npx http-server dist/
|
||||
npx -y http-server dist/
|
||||
```
|
||||
|
||||
The terminal will display a URL ( `http://127.0.0.1:8080` ). Access that page
|
||||
|
@ -334,7 +334,7 @@ The final site will be placed in the `dist` folder.
|
||||
12) Start a local web server to host the `dist` folder:
|
||||
|
||||
```bash
|
||||
npx http-server dist
|
||||
npx -y http-server dist
|
||||
```
|
||||
|
||||
The command will print a list of URLs.
|
||||
|
@ -32,6 +32,7 @@ flowchart LR
|
||||
file --> |.eleventy.js\ncustom parser| buffer
|
||||
buffer --> |.eleventy.js\ncustom parser| aoo
|
||||
aoo --> |index.njk\ntemplate| html
|
||||
linkStyle 1 color:blue,stroke:blue;
|
||||
```
|
||||
|
||||
:::tip No Telemetry
|
||||
@ -114,10 +115,11 @@ accessed using the variable `pres` in a template:
|
||||
|
||||
This demo was tested in the following environments:
|
||||
|
||||
| Eleventy | Date |
|
||||
|:---------|:-----------|
|
||||
| `2.0.1` | 2024-12-23 |
|
||||
| `3.0.0` | 2024-12-23 |
|
||||
| Eleventy | Date |
|
||||
|:---------------|:-----------|
|
||||
| `2.0.1` | 2025-05-07 |
|
||||
| `3.0.0` | 2025-05-07 |
|
||||
| `3.1.0-beta.1` | 2025-05-07 |
|
||||
|
||||
:::
|
||||
|
||||
@ -212,7 +214,7 @@ 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
|
||||
npx -y http-server _site
|
||||
```
|
||||
|
||||
Open a web browser and access the displayed URL ( `http://localhost:8080` ).
|
||||
|
@ -33,6 +33,9 @@ Content v1 (paired with VueJS 2.x and NuxtJS 2.x)
|
||||
The ["Nuxt Content v2"](#nuxt-content-v2) section explores "transformers" for
|
||||
NuxtJS Content v2 (paired with VueJS 3.x and NuxtJS 3.x)
|
||||
|
||||
The ["Nuxt Content v3"](#nuxt-content-v3) section explores raw ViteJS modules
|
||||
(paired with VueJS 3.x and NuxtJS 3.x)
|
||||
|
||||
:::info pass
|
||||
|
||||
This demo focuses on server-side processing with NuxtJS and VueJS.
|
||||
@ -49,7 +52,8 @@ This demo was tested in the following environments:
|
||||
| Nuxt Content | Nuxt | Date |
|
||||
|:-------------|:-----------|:-----------|
|
||||
| `1.15.1` | `2.18.1` | 2025-04-23 |
|
||||
| `2.13.4` | `3.14.159` | 2024-11-14 |
|
||||
| `2.13.4` | `3.17.2` | 2025-05-12 |
|
||||
| `3.5.1` | `3.17.3` | 2025-05-18 |
|
||||
|
||||
:::
|
||||
|
||||
@ -525,8 +529,8 @@ script files. The module script is expected to export a module configured with
|
||||
- Add the transformer to Nuxt Content in the `content:context` hook
|
||||
|
||||
```js title="sheetmodule.ts (Module)"
|
||||
import { resolve } from 'path'
|
||||
import { defineNuxtModule } from '@nuxt/kit'
|
||||
import { resolve } from 'path';
|
||||
import { defineNuxtModule } from '@nuxt/kit';
|
||||
|
||||
export default defineNuxtModule({
|
||||
/* module setup method */
|
||||
@ -549,7 +553,7 @@ The module must be loaded in `nuxt.config.ts` and added to the `modules` array:
|
||||
|
||||
```ts title="nuxt.config.ts"
|
||||
// highlight-next-line
|
||||
import SheetJSModule from './sheetmodule'
|
||||
import SheetJSModule from './sheetmodule';
|
||||
|
||||
export default defineNuxtConfig({
|
||||
// @ts-ignore
|
||||
@ -606,7 +610,7 @@ from the script setup will be shaped like the return value from the transformer.
|
||||
:::caution pass
|
||||
|
||||
For some older versions, parts of the Nuxt dependency tree did not support
|
||||
NodeJS version 20. If the `yarn install` step fails with a message like
|
||||
NodeJS version 20. If the `pnpm install` step fails with a message like
|
||||
|
||||
```
|
||||
error @nuxt/kit@3.4.1: The engine "node" is incompatible with this module.
|
||||
@ -619,17 +623,18 @@ The recommended solution is to switch to Node 18.
|
||||
1) Create a stock app and install dependencies:
|
||||
|
||||
```bash
|
||||
npx -y nuxi init -t content --packageManager yarn --no-gitInit sheetjs-nc2
|
||||
npx -y nuxi init -t content --packageManager pnpm --no-gitInit sheetjs-nc2 -M ,
|
||||
cd sheetjs-nc2
|
||||
npx -y yarn install
|
||||
npx -y yarn add --dev @types/node
|
||||
npx -y pnpm install
|
||||
npx -y pnpm install @nuxt/content@2 --save
|
||||
npx -y pnpm install @types/node @nuxt/kit --save
|
||||
```
|
||||
|
||||
2) Install the SheetJS library and start the server:
|
||||
|
||||
<CodeBlock language="bash">{`\
|
||||
npx -y yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz
|
||||
npx -y yarn dev`}
|
||||
npx -y pnpm install --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz
|
||||
npx -y pnpm dev`}
|
||||
</CodeBlock>
|
||||
|
||||
|
||||
@ -639,7 +644,7 @@ When the build finishes, the terminal will display a URL like:
|
||||
> Local: http://localhost:3000/
|
||||
```
|
||||
|
||||
The server is listening on that URL. Open the link in a web browser.
|
||||
The server is listening on that URL. Open the link in a web browser.
|
||||
|
||||
3) Download https://docs.sheetjs.com/pres.xlsx and move to the `content` folder.
|
||||
|
||||
@ -649,12 +654,12 @@ curl -L -o content/pres.xlsx https://docs.sheetjs.com/pres.xlsx
|
||||
|
||||
4) Create the transformer. Two files must be saved at the root of the project:
|
||||
|
||||
- [`sheetformer.ts`](https://docs.sheetjs.com/nuxt/3/sheetformer.ts) (raw transformer module)
|
||||
- [`sheetformer.ts`](https://docs.sheetjs.com/nuxt/2/sheetformer.ts) (raw transformer module)
|
||||
- [`sheetmodule.ts`](https://docs.sheetjs.com/nuxt/3/sheetmodule.ts) (Nuxt configuration module)
|
||||
|
||||
```bash
|
||||
curl -O https://docs.sheetjs.com/nuxt/3/sheetformer.ts
|
||||
curl -O https://docs.sheetjs.com/nuxt/3/sheetmodule.ts
|
||||
curl -O https://docs.sheetjs.com/nuxt/2/sheetformer.ts
|
||||
curl -O https://docs.sheetjs.com/nuxt/2/sheetmodule.ts
|
||||
```
|
||||
|
||||
After creating the source files, the module must be added to `nuxt.config.ts`:
|
||||
@ -668,14 +673,13 @@ export default defineNuxtConfig({
|
||||
// @ts-ignore
|
||||
telemetry: false,
|
||||
// highlight-end
|
||||
devtools: { enabled: true },
|
||||
// highlight-start
|
||||
modules: [
|
||||
// highlight-next-line
|
||||
SheetJSModule,
|
||||
'@nuxt/content'
|
||||
],
|
||||
content: {}
|
||||
// highlight-end
|
||||
devtools: { enabled: true },
|
||||
// ...
|
||||
});
|
||||
```
|
||||
|
||||
@ -684,33 +688,13 @@ Stop the dev server (<kbd>CTRL</kbd>+<kbd>C</kbd>) and run the following:
|
||||
```bash
|
||||
npx -y nuxi clean
|
||||
npx -y nuxi cleanup
|
||||
npx -y nuxi typecheck
|
||||
npx -y yarn run dev
|
||||
npx -y pnpm run dev
|
||||
```
|
||||
|
||||
Loading `http://localhost:3000/pres` should show some JSON data:
|
||||
|
||||
```json
|
||||
{
|
||||
// ...
|
||||
"data": {
|
||||
"_path": "/pres",
|
||||
// ...
|
||||
"_id": "content:pres.xlsx",
|
||||
"body": [
|
||||
{
|
||||
"name": "Sheet1", // <-- sheet name
|
||||
"data": [ // <-- array of data objects
|
||||
{
|
||||
"Name": "Bill Clinton",
|
||||
"Index": 42
|
||||
},
|
||||
```
|
||||
|
||||
5) Download [`pres.vue`](pathname:///nuxt/3/pres.vue) and save to `pages`:
|
||||
5) Download [`pres.vue`](pathname:///nuxt/2/pres.vue) and save to `app/pages`:
|
||||
|
||||
```bash
|
||||
curl -o pages/pres.vue https://docs.sheetjs.com/nuxt/3/pres.vue
|
||||
curl -o app/pages/pres.vue https://docs.sheetjs.com/nuxt/2/pres.vue
|
||||
```
|
||||
|
||||
Stop the dev server (<kbd>CTRL</kbd>+<kbd>C</kbd>) and run the following:
|
||||
@ -718,24 +702,247 @@ Stop the dev server (<kbd>CTRL</kbd>+<kbd>C</kbd>) and run the following:
|
||||
```bash
|
||||
npx -y nuxi clean
|
||||
npx -y nuxi cleanup
|
||||
npx -y yarn run dev
|
||||
npx -y pnpm run dev
|
||||
```
|
||||
|
||||
The browser should now display an HTML table.
|
||||
6) From the browser window in step 2, access `/pres` from the site. For example,
|
||||
if the URL in step 2 was `http://localhost:3000/`, the new page should be
|
||||
`http://localhost:3000/pres`.
|
||||
|
||||
6) To verify that hot loading works, open `pres.xlsx` from the `content` folder
|
||||
This page should now display an HTML table.
|
||||
|
||||
7) To verify that hot loading works, open `pres.xlsx` from the `content` folder
|
||||
with a spreadsheet editor.
|
||||
|
||||
Set cell `A7` to "SheetJS Dev" and set `B7` to `47`. Save the spreadsheet.
|
||||
|
||||
The page should automatically refresh with the new content.
|
||||
|
||||
8) Stop the server (press <kbd>CTRL</kbd>+<kbd>C</kbd> in the terminal window).
|
||||
|
||||
9) Copy `app/pages/pres.vue` to `app/pages/index.vue`:
|
||||
|
||||
```bash
|
||||
cp app/pages/pres.vue app/pages/index.vue
|
||||
```
|
||||
|
||||
:::info pass
|
||||
|
||||
In older test runs, the Nuxt starter created a default `/` page. The most recent
|
||||
test did not create the index page, resulting in build errors. This step ensures
|
||||
some sort of index page exists.
|
||||
|
||||
:::
|
||||
|
||||
10) Build the static site:
|
||||
|
||||
```bash
|
||||
npx -y pnpm run generate
|
||||
```
|
||||
|
||||
This will create a static site in `.output/public`, which can be served with:
|
||||
|
||||
```bash
|
||||
npx -y http-server .output/public
|
||||
```
|
||||
|
||||
Access the displayed URL (typically `http://localhost:8080`) in a web browser.
|
||||
|
||||
To confirm that the spreadsheet data is added to the site, view the page source.
|
||||
|
||||
Searching for `Bill Clinton` reveals the following encoded HTML row:
|
||||
|
||||
```html
|
||||
<tr><td>Bill Clinton</td><td>42</td></tr>
|
||||
```
|
||||
|
||||
## Nuxt Content v3
|
||||
|
||||
:::danger pass
|
||||
|
||||
When this demo was last tested, the official Nuxt Content v3 custom transformers
|
||||
and custom collections examples did not work.
|
||||
|
||||
:::
|
||||
|
||||
[ViteJS modules](/docs/demos/static/vitejs) can be used in Nuxt v3.
|
||||
|
||||
### Installation
|
||||
|
||||
The [SheetJS NodeJS Module](/docs/getting-started/installation/nodejs) can be
|
||||
safely imported from `nuxt.config.ts` or transformer or module scripts. As long
|
||||
as the SheetJS modules are not imported in the various `.vue` pages, the library
|
||||
will not be added to the final page bundle!
|
||||
|
||||
### Configuration
|
||||
|
||||
The `vite` property in the NuxtJS config is passed to ViteJS. Plugins and other
|
||||
configuration options can be copied to the object. `vite.config.js` for the
|
||||
[Pure Data Plugin](/docs/demos/static/vitejs#pure-data-plugin) is shown below:
|
||||
|
||||
```js title="vite.config.js (raw ViteJS)"
|
||||
import { readFileSync } from 'fs';
|
||||
import { read, utils } from 'xlsx';
|
||||
import { defineConfig } from 'vite';
|
||||
|
||||
export default defineConfig({
|
||||
assetsInclude: ['**/*.xlsx'], // xlsx file should be treated as assets
|
||||
|
||||
plugins: [
|
||||
{ // this plugin handles ?sheetjs tags
|
||||
name: "vite-sheet",
|
||||
transform(_code, id) {
|
||||
if(!id.match(/\?sheetjs$/)) return;
|
||||
var wb = read(readFileSync(id.replace(/\?sheetjs$/, "")));
|
||||
var data = utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
|
||||
return `export default JSON.parse('${JSON.stringify(data).replace(/\\/g, "\\\\")}')`;
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
```
|
||||
|
||||
The `assetsInclude` and `plugins` properties should be added within the `vite`
|
||||
property in the object passed to `defineNuxtConfig`.
|
||||
|
||||
:::danger pass
|
||||
|
||||
NuxtJS does not properly honor the `?sheetjs` tag! As a result, the transform
|
||||
explicitly tests for the `.xlsx` extension.
|
||||
|
||||
:::
|
||||
|
||||
```ts title="nuxt.config.ts"
|
||||
import { readFileSync } from 'fs';
|
||||
import { read, utils } from 'xlsx';
|
||||
|
||||
export default defineNuxtConfig({
|
||||
// highlight-next-line
|
||||
vite: { // these options are passed to ViteJS
|
||||
assetsInclude: ['**/*.xlsx'], // xlsx file should be treated as assets
|
||||
|
||||
plugins: [
|
||||
{ // this plugin handles .xlsx
|
||||
name: "vite-sheet",
|
||||
transform(_code, id) {
|
||||
if(!id.match(/\.xlsx$/)) return;
|
||||
var wb = read(readFileSync(id.replace(/\?sheetjs$/, "")));
|
||||
var data = utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
|
||||
return `export default JSON.parse('${JSON.stringify(data).replace(/\\/g, "\\\\")}')`;
|
||||
}
|
||||
},
|
||||
],
|
||||
},
|
||||
// ...
|
||||
```
|
||||
|
||||
### Template Use
|
||||
|
||||
Pages can reference spreadsheets using a relative file reference. The ViteJS
|
||||
plugin will transform files with the `.xlsx` extension.
|
||||
|
||||
```js title="Script section of .vue VueJS page"
|
||||
import data from '../../pres.xlsx'; // data is an array of objects
|
||||
```
|
||||
|
||||
In the template, `data` is an array of objects that works with `v-for`[^4]:
|
||||
|
||||
```xml title="Template section of .vue VueJS page"
|
||||
<table>
|
||||
<thead><tr><th>Name</th><th>Index</th></tr></thead><tbody>
|
||||
<!-- loop over the rows of each worksheet -->
|
||||
<tr v-for="row in data" v-bind:key="row.Index">
|
||||
<!-- here `row` is a row object generated from sheet_to_json -->
|
||||
<td>{{ row.Name }}</td>
|
||||
<td>{{ row.Index }}</td>
|
||||
</tr>
|
||||
</table>
|
||||
```
|
||||
|
||||
### Nuxt Content 3 Demo
|
||||
|
||||
1) Create a stock app and install dependencies:
|
||||
|
||||
```bash
|
||||
npx -y nuxi init -t content --packageManager pnpm --no-gitInit sheetjs-nc3 -M ,
|
||||
cd sheetjs-nc3
|
||||
npx -y pnpm install
|
||||
```
|
||||
|
||||
2) Install the SheetJS library and start the server:
|
||||
|
||||
<CodeBlock language="bash">{`\
|
||||
npx -y pnpm install --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz
|
||||
npx -y pnpm dev`}
|
||||
</CodeBlock>
|
||||
|
||||
When the build finishes, the terminal will display a URL like:
|
||||
|
||||
```
|
||||
> Local: http://localhost:3000/
|
||||
```
|
||||
|
||||
The server is listening on that URL. Open the link in a web browser.
|
||||
|
||||
3) Download https://docs.sheetjs.com/pres.xlsx and move to the root folder:
|
||||
|
||||
```bash
|
||||
curl -o pres.xlsx https://docs.sheetjs.com/pres.xlsx
|
||||
```
|
||||
|
||||
4) Replace `nuxt.config.ts` with the following codeblock:
|
||||
|
||||
```ts title="nuxt.config.ts"
|
||||
import { readFileSync } from 'fs';
|
||||
import { read, utils } from 'xlsx';
|
||||
|
||||
export default defineNuxtConfig({
|
||||
vite: { // these options are passed to ViteJS
|
||||
assetsInclude: ['**/*.xlsx'], // xlsx file should be treated as assets
|
||||
|
||||
plugins: [
|
||||
{ // this plugin handles .xlsx
|
||||
name: "vite-sheet",
|
||||
transform(_code, id) {
|
||||
if(!id.match(/\.xlsx$/)) return;
|
||||
var wb = read(readFileSync(id.replace(/\?sheetjs$/, "")));
|
||||
var data = utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
|
||||
return `export default JSON.parse('${JSON.stringify(data).replace(/\\/g, "\\\\")}')`;
|
||||
}
|
||||
},
|
||||
],
|
||||
},
|
||||
modules: [
|
||||
'@nuxt/content',
|
||||
],
|
||||
devtools: { enabled: true },
|
||||
});
|
||||
```
|
||||
|
||||
5) Create a new file `app.vue` with the following contents:
|
||||
|
||||
```html title="app.vue (create new file)"
|
||||
<script setup>
|
||||
import data from '../../pres.xlsx'
|
||||
</script>
|
||||
<template>
|
||||
<table><thead><tr><th>Name</th><th>Index</th></tr></thead><tbody>
|
||||
<tr v-for="row in data" v-bind:key="row.Index">
|
||||
<td>{{ row.Name }}</td>
|
||||
<td>{{ row.Index }}</td>
|
||||
</tr>
|
||||
</tbody></table>
|
||||
</template>
|
||||
```
|
||||
|
||||
6) Refresh the browser window. This page should now display an HTML table.
|
||||
|
||||
7) Stop the server (press <kbd>CTRL</kbd>+<kbd>C</kbd> in the terminal window).
|
||||
|
||||
8) Build the static site:
|
||||
|
||||
```bash
|
||||
npx -y yarn run generate
|
||||
npx -y pnpm run generate
|
||||
```
|
||||
|
||||
This will create a static site in `.output/public`, which can be served with:
|
||||
|
@ -345,7 +345,7 @@ AstroJS will place the generated site in the `dist` subfolder.
|
||||
9) Start a web server to host the static site:
|
||||
|
||||
```bash
|
||||
npx http-server dist
|
||||
npx -y http-server dist
|
||||
```
|
||||
|
||||
Open a web browser and access the displayed URL ( `http://localhost:8080` ).
|
||||
|
@ -241,7 +241,7 @@ This demo was tested in the following environments:
|
||||
|:-----------|:--------------------|:---------|:-------------|:-----------|
|
||||
| Android 34 | Pixel 3a | `0.76.8` | `darwin-arm` | 2025-03-26 |
|
||||
| iOS 18.3 | iPhone 16 Pro | `0.76.8` | `darwin-arm` | 2025-03-26 |
|
||||
| Android 35 | Pixel 9 | `0.76.5` | `win11-x64` | 2024-12-22 |
|
||||
| Android 35 | Pixel 9 Pro XL | `0.79.2` | `win11-x64` | 2025-06-08 |
|
||||
| Android 35 | Pixel 9 | `0.76.5` | `linux-x64` | 2025-01-02 |
|
||||
|
||||
:::
|
||||
@ -289,7 +289,7 @@ export JAVA_HOME=/usr/lib/jvm/java-17-openjdk
|
||||
1) Create project:
|
||||
|
||||
```bash
|
||||
npx -y @react-native-community/cli@15 init SheetJSRNFetch --version="0.76.8"
|
||||
npx -y @react-native-community/cli@18 init SheetJSRNFetch --version="0.79.2"
|
||||
```
|
||||
|
||||
On macOS, if prompted to install `CocoaPods`, press <kbd>Y</kbd>
|
||||
@ -330,12 +330,47 @@ npm i -S https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz
|
||||
npm i -S https://cdn.sheetjs.com/react-native-tabeller-0.1.0/react-native-tabeller-0.1.0.tgz`}
|
||||
</CodeBlock>
|
||||
|
||||
:::note pass
|
||||
|
||||
In PowerShell, the command may fail with a parameter error:
|
||||
|
||||
```
|
||||
Invoke-WebRequest : A parameter cannot be found that matches parameter name 'LO'.
|
||||
```
|
||||
|
||||
`curl.exe` must be invoked directly:
|
||||
|
||||
<CodeBlock language="bash">{`\
|
||||
cd SheetJSRNFetch
|
||||
curl.exe -LO https://docs.sheetjs.com/logo.png
|
||||
npm i -S https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz
|
||||
npm i -S https://cdn.sheetjs.com/react-native-tabeller-0.1.0/react-native-tabeller-0.1.0.tgz`}
|
||||
</CodeBlock>
|
||||
|
||||
:::
|
||||
|
||||
3) Download and replace [`App.tsx`](pathname:///reactnative/App.tsx):
|
||||
|
||||
```bash
|
||||
curl -LO https://docs.sheetjs.com/reactnative/App.tsx
|
||||
```
|
||||
|
||||
:::note pass
|
||||
|
||||
In PowerShell, the command may fail with a parameter error:
|
||||
|
||||
```
|
||||
Invoke-WebRequest : A parameter cannot be found that matches parameter name 'LO'.
|
||||
```
|
||||
|
||||
`curl.exe` must be invoked directly:
|
||||
|
||||
```bash
|
||||
curl.exe -LO https://docs.sheetjs.com/reactnative/App.tsx
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
**Android Testing**
|
||||
|
||||
4) Install or switch to Java 17[^7]
|
||||
@ -578,7 +613,7 @@ reconnect the device before trying again.
|
||||
|
||||
:::info pass
|
||||
|
||||
In some test runs, the app requested for local network access:
|
||||
In some test runs, the app requested for local network access:
|
||||
|
||||
> "SheetJSRNFetch" would like to find and connect to devices on your local network.
|
||||
|
||||
@ -1096,7 +1131,7 @@ This demo was tested in the following environments:
|
||||
|:-----------|:------------------|:---------|:-------------|:-----------|
|
||||
| Android 34 | Pixel 3a | `0.76.5` | `darwin-arm` | 2025-01-05 |
|
||||
| iOS 18.2 | iPhone 16 Pro | `0.76.5` | `darwin-arm` | 2025-01-05 |
|
||||
| Android 35 | Pixel 9 | `0.76.5` | `win11-x64` | 2024-12-22 |
|
||||
| Android 35 | Pixel 9 Pro XL | `0.76.5` | `win11-x64` | 2025-06-08 |
|
||||
| Android 35 | Pixel 9 | `0.76.5` | `linux-x64` | 2025-01-02 |
|
||||
|
||||
:::
|
||||
@ -1128,15 +1163,50 @@ On macOS, if prompted to install `CocoaPods`, press <kbd>Y</kbd>
|
||||
cd SheetJSRN
|
||||
curl -LO https://docs.sheetjs.com/logo.png
|
||||
npm i -S https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz
|
||||
npm i -S react-native-table-component@1.2.2 react-native-document-picker@9.3.1`}
|
||||
npm i -S https://cdn.sheetjs.com/react-native-tabeller-0.1.0/react-native-tabeller-0.1.0.tgz react-native-document-picker@9.3.1`}
|
||||
</CodeBlock>
|
||||
|
||||
:::note pass
|
||||
|
||||
In PowerShell, the command may fail with a parameter error:
|
||||
|
||||
```
|
||||
Invoke-WebRequest : A parameter cannot be found that matches parameter name 'LO'.
|
||||
```
|
||||
|
||||
`curl.exe` must be invoked directly:
|
||||
|
||||
<CodeBlock language="bash">{`\
|
||||
cd SheetJSRN
|
||||
curl.exe -LO https://docs.sheetjs.com/logo.png
|
||||
npm i -S https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz
|
||||
npm i -S https://cdn.sheetjs.com/react-native-tabeller-0.1.0/react-native-tabeller-0.1.0.tgz react-native-document-picker@9.3.1`}
|
||||
</CodeBlock>
|
||||
|
||||
:::
|
||||
|
||||
3) Download [`index.js`](pathname:///mobile/index.js) and replace:
|
||||
|
||||
```bash
|
||||
curl -LO https://docs.sheetjs.com/mobile/index.js
|
||||
```
|
||||
|
||||
:::note pass
|
||||
|
||||
In PowerShell, the command may fail with a parameter error:
|
||||
|
||||
```
|
||||
Invoke-WebRequest : A parameter cannot be found that matches parameter name 'LO'.
|
||||
```
|
||||
|
||||
`curl.exe` must be invoked directly:
|
||||
|
||||
```bash
|
||||
curl.exe -LO https://docs.sheetjs.com/mobile/index.js
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
4) Start the Android emulator:
|
||||
|
||||
```bash
|
||||
@ -1192,13 +1262,13 @@ Stop the dev server and close the React Native Metro NodeJS window.
|
||||
Install `react-native-blob-util` dependency:
|
||||
|
||||
```bash
|
||||
npm i -S react-native-blob-util@0.21.2
|
||||
npm i -S react-native-blob-util@0.22.2
|
||||
```
|
||||
|
||||
Add the highlighted lines to `index.js`:
|
||||
|
||||
```js title="index.js"
|
||||
import { Table, Row, Rows, TableWrapper } from 'react-native-table-component';
|
||||
```js title="index.js (add highlighted lines)"
|
||||
import { Table, Row, Rows, TableWrapper } from 'react-native-tabeller';
|
||||
|
||||
// highlight-start
|
||||
import { read, write } from 'xlsx';
|
||||
@ -1246,7 +1316,7 @@ npm i -S react-native-file-access@3.1.1
|
||||
Add the highlighted lines to `index.js`:
|
||||
|
||||
```js title="index.js"
|
||||
import { Table, Row, Rows, TableWrapper } from 'react-native-table-component';
|
||||
import { Table, Row, Rows, TableWrapper } from 'react-native-tabeller';
|
||||
|
||||
// highlight-start
|
||||
import { read, write } from 'xlsx';
|
||||
@ -1313,7 +1383,7 @@ These errors can be ignored.
|
||||
Add the highlighted lines to `index.js`:
|
||||
|
||||
```js title="index.js"
|
||||
import { Table, Row, Rows, TableWrapper } from 'react-native-table-component';
|
||||
import { Table, Row, Rows, TableWrapper } from 'react-native-tabeller';
|
||||
|
||||
// highlight-start
|
||||
import { read, write } from 'xlsx';
|
||||
@ -1687,7 +1757,7 @@ The Numbers app will load the spreadsheet, confirming that the file is valid.
|
||||
[^3]: See ["Array Output" in "Utility Functions"](/docs/api/utilities/array#array-output)
|
||||
[^4]: See ["Array of Arrays Input" in "Utility Functions"](/docs/api/utilities/array#array-of-arrays-input)
|
||||
[^5]: React-Native commit [`5b597b5`](https://github.com/facebook/react-native/commit/5b597b5ff94953accc635ed3090186baeecb3873) added the final piece required for `fetch` support. It is available in official releases starting from `0.72.0`.
|
||||
[^6]: See [the compatibility table](https://github.com/react-native-community/cli) in the CLI project repository to determine which version of `@react-native-community/cli` is required for a given `react-native` version.
|
||||
[^6]: See [the compatibility table](https://github.com/react-native-community/cli/blob/main/README.md#compatibility) in the CLI project repository to determine which version of `@react-native-community/cli` is required for a given `react-native` version.
|
||||
[^7]: When the demo was last tested, the Temurin distribution of Java 17 was installed through the macOS Brew package manager by running `brew install temurin17`. [Direct downloads are available at `adoptium.net`](https://adoptium.net/temurin/releases/?version=17)
|
||||
[^8]: See ["Running On Device"](https://reactnative.dev/docs/running-on-device) in the React Native documentation
|
||||
[^9]: See [`UIFileSharingEnabled`](https://developer.apple.com/documentation/bundleresources/information_property_list/uifilesharingenabled) in the Apple Developer Documentation.
|
||||
|
@ -56,16 +56,16 @@ This demo was tested in the following environments:
|
||||
|
||||
| OS | Device | NS | Date |
|
||||
|:-----------|:--------------------|:---------|:-----------|
|
||||
| Android 30 | NVIDIA Shield | `8.7.2` | 2024-06-09 |
|
||||
| iOS 15.1 | iPad Pro | `8.7.2` | 2024-06-09 |
|
||||
| Android 30 | NVIDIA Shield | `8.9.2` | 2025-05-06 |
|
||||
| iOS 15.1 | iPad Pro | `8.9.2` | 2025-05-06 |
|
||||
|
||||
**Simulators**
|
||||
|
||||
| OS | Device | NS | Dev Platform | Date |
|
||||
|:-----------|:--------------------|:---------|:-------------|:-----------|
|
||||
| Android 34 | Pixel 3a | `8.7.2` | `darwin-arm` | 2024-06-09 |
|
||||
| iOS 17.5 | iPhone SE (3rd gen) | `8.7.2` | `darwin-arm` | 2024-06-09 |
|
||||
| Android 35 | Pixel 9 | `8.8.3` | `win11-x64` | 2024-12-21 |
|
||||
| Android 35 | Pixel 9 Pro XL | `8.9.2` | `darwin-x64` | 2025-05-06 |
|
||||
| iOS 18.4 | iPhone 16 Pro Max | `8.9.2` | `darwin-x64` | 2025-05-06 |
|
||||
| Android 35 | Pixel 9 | `8.9.2` | `win11-x64` | 2025-06-08 |
|
||||
| Android 35 | Pixel 9 | `8.8.3` | `linux-x64` | 2025-01-02 |
|
||||
|
||||
:::
|
||||
@ -78,15 +78,15 @@ NativeScript 8.6.1 split the telemetry into two parts: "usage" and "error". Both
|
||||
must be disabled separately:
|
||||
|
||||
```bash
|
||||
npx -p nativescript ns usage-reporting disable
|
||||
npx -p nativescript ns error-reporting disable
|
||||
npx -y -p nativescript ns usage-reporting disable
|
||||
npx -y -p nativescript ns error-reporting disable
|
||||
```
|
||||
|
||||
To verify telemetry was disabled:
|
||||
|
||||
```bash
|
||||
npx -p nativescript ns usage-reporting status
|
||||
npx -p nativescript ns error-reporting status
|
||||
npx -y -p nativescript ns usage-reporting status
|
||||
npx -y -p nativescript ns error-reporting status
|
||||
```
|
||||
|
||||
:::
|
||||
@ -120,6 +120,22 @@ for accessing data and are subject to change in future platform versions.
|
||||
<details>
|
||||
<summary><b>Technical Details</b> (click to show)</summary>
|
||||
|
||||
**iOS**
|
||||
|
||||
The following key/value pairs must be added to `Info.plist`:
|
||||
|
||||
```xml title="App_Resources/iOS/Info.plist (add highlighted lines)"
|
||||
<dict>
|
||||
<!-- highlight-start -->
|
||||
<key>UIFileSharingEnabled</key>
|
||||
<true/>
|
||||
<key>LSSupportsOpeningDocumentsInPlace</key>
|
||||
<true/>
|
||||
<!-- highlight-end -->
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
**Android**
|
||||
|
||||
Android security has evolved over the years. In newer Android versions, the
|
||||
@ -265,8 +281,8 @@ const wb = read(ab);
|
||||
0) Disable telemetry:
|
||||
|
||||
```bash
|
||||
npx -p nativescript ns usage-reporting disable
|
||||
npx -p nativescript ns error-reporting disable
|
||||
npx -y -p nativescript ns usage-reporting disable
|
||||
npx -y -p nativescript ns error-reporting disable
|
||||
```
|
||||
|
||||
1) Follow the official Environment Setup instructions[^8].
|
||||
@ -274,14 +290,14 @@ npx -p nativescript ns error-reporting disable
|
||||
:::caution pass
|
||||
|
||||
In previous test runs, NativeScript did not support the latest Android API.
|
||||
The error message from `npx -p nativescript ns doctor android` clearly stated
|
||||
The error message from `npx -y -p nativescript ns doctor android` clearly stated
|
||||
supported versions:
|
||||
|
||||
<pre>
|
||||
<span {...r}>✖</span> No compatible version of the Android SDK Build-tools are installed on your system. You can install any version in the following range: '>=23 <=33'.
|
||||
</pre>
|
||||
|
||||
If NativeScript does not properly supports the latest API level, a previous API
|
||||
If NativeScript does not properly support the latest API level, an older API
|
||||
version should be installed using Android Studio.
|
||||
|
||||
In a previous test run, the following packages were required:
|
||||
@ -290,14 +306,14 @@ In a previous test run, the following packages were required:
|
||||
- `Android SDK Build-Tools` Version `33.0.2`
|
||||
|
||||
It is recommended to install the SDK Platform and corresponding Android SDK
|
||||
Build-Tools for the latest supported API level.ß
|
||||
Build-Tools for the latest supported API level.
|
||||
|
||||
:::
|
||||
|
||||
2) Test the local system configuration for Android development:
|
||||
|
||||
```bash
|
||||
npx -p nativescript ns doctor android
|
||||
npx -y -p nativescript ns doctor android
|
||||
```
|
||||
|
||||
In the last macOS test, the following output was displayed:
|
||||
@ -316,7 +332,7 @@ In the last macOS test, the following output was displayed:
|
||||
<span {...g}>✔</span> Javac is installed and is configured properly.
|
||||
<span {...g}>✔</span> The Java Development Kit (JDK) is installed and is configured properly.
|
||||
<span {...g}>✔</span> Getting NativeScript components versions information...
|
||||
<span {...g}>✔</span> Component nativescript has 8.7.2 version and is up to date.
|
||||
<span {...g}>✔</span> Component nativescript has 8.9.2 version and is up to date.
|
||||
</pre>
|
||||
|
||||
</details>
|
||||
@ -324,7 +340,7 @@ In the last macOS test, the following output was displayed:
|
||||
3) Test the local system configuration for iOS development (macOS only):
|
||||
|
||||
```bash
|
||||
npx -p nativescript ns doctor ios
|
||||
npx -y -p nativescript ns doctor ios
|
||||
```
|
||||
|
||||
In the last macOS test, the following output was displayed:
|
||||
@ -343,9 +359,9 @@ In the last macOS test, the following output was displayed:
|
||||
<span {...g}>✔</span> CocoaPods are configured properly.
|
||||
<span {...g}>✔</span> Your current CocoaPods version is newer than 1.0.0.
|
||||
<span {...g}>✔</span> Python installed and configured correctly.
|
||||
<span {...g}>✔</span> Xcode version 15.4.0 satisfies minimum required version 10.
|
||||
<span {...g}>✔</span> Xcode version 16.3.0 satisfies minimum required version 10.
|
||||
<span {...g}>✔</span> Getting NativeScript components versions information...
|
||||
<span {...g}>✔</span> Component nativescript has 8.7.2 version and is up to date.
|
||||
<span {...g}>✔</span> Component nativescript has 8.9.2 version and is up to date.
|
||||
</pre>
|
||||
|
||||
</details>
|
||||
@ -355,21 +371,21 @@ In the last macOS test, the following output was displayed:
|
||||
4) Create a skeleton NativeScript + Angular app:
|
||||
|
||||
```bash
|
||||
npx -p nativescript ns create SheetJSNS --ng
|
||||
npx -y -p nativescript ns create SheetJSNS --ng
|
||||
```
|
||||
|
||||
5) Launch the app in the android simulator to verify the app:
|
||||
5) Launch the app in the Android simulator to verify the app:
|
||||
|
||||
```bash
|
||||
cd SheetJSNS
|
||||
npx -p nativescript ns run android
|
||||
npx -y -p nativescript ns run android
|
||||
```
|
||||
|
||||
(this may take a while)
|
||||
|
||||
Once the simulator launches and the test app is displayed, end the script by
|
||||
selecting the terminal and pressing <kbd>CTRL</kbd>+<kbd>C</kbd>. On Windows, if
|
||||
prompted to `Terminate batch job`, type `y` and press Enter.
|
||||
prompted to `Terminate batch job`, type <kbd>Y</kbd> and press Enter.
|
||||
|
||||
:::note pass
|
||||
|
||||
@ -381,6 +397,23 @@ Emulator start failed with: No emulator image available for device identifier 'u
|
||||
|
||||
:::
|
||||
|
||||
:::caution pass
|
||||
|
||||
In the most recent test, the build failed with an exception:
|
||||
|
||||
```
|
||||
WARNING: A restricted method in java.lang.System has been called
|
||||
WARNING: java.lang.System::load has been called by net.rubygrapefruit.platform.internal.NativeLibraryLoader in an unnamed module (file:/Users/sheetjs/.gradle/wrapper/dists/gradle-8.7-bin/bhs2wmbdwecv87pi65oeuq5iu/gradle-8.7/lib/native-platform-0.22-milestone-25.jar)
|
||||
WARNING: Use --enable-native-access=ALL-UNNAMED to avoid a warning for callers in this module
|
||||
WARNING: Restricted methods will be blocked in a future release unless native access is enabled
|
||||
```
|
||||
|
||||
**The NativeScript Gradle version is incompatible with Java 24!**
|
||||
|
||||
It is strongly recommended to roll back to Java 21.
|
||||
|
||||
:::
|
||||
|
||||
### Add SheetJS
|
||||
|
||||
:::note pass
|
||||
@ -401,16 +434,15 @@ SheetJS version string and adds it to a `version` variable in the component:
|
||||
```ts title="src/app/item/items.component.ts (add highlighted lines)"
|
||||
// highlight-next-line
|
||||
import { version } from 'xlsx';
|
||||
import { Component, OnInit } from '@angular/core'
|
||||
import { Component, NO_ERRORS_SCHEMA, inject } from '@angular/core'
|
||||
|
||||
// ...
|
||||
|
||||
export class ItemsComponent implements OnInit {
|
||||
items: Array<Item>
|
||||
export class ItemsComponent {
|
||||
// highlight-next-line
|
||||
version = `SheetJS - ${version}`;
|
||||
|
||||
constructor(private itemService: ItemService) {}
|
||||
itemService = inject(ItemService)
|
||||
page = inject(Page)
|
||||
// ...
|
||||
```
|
||||
|
||||
@ -428,7 +460,7 @@ in the title of the action bar:
|
||||
9) End the script and relaunch the app in the Android simulator:
|
||||
|
||||
```bash
|
||||
npx -p nativescript ns run android
|
||||
npx -y -p nativescript ns run android
|
||||
```
|
||||
|
||||
The title bar should show the version.
|
||||
@ -449,7 +481,7 @@ The title bar should show the version.
|
||||
<Button text="Export File" (tap)="export()" style="padding: 10px"></Button>
|
||||
</StackLayout>
|
||||
<!-- highlight-end -->
|
||||
<ListView [items]="items">
|
||||
<ListView [items]="itemService.items()">
|
||||
<!-- ... -->
|
||||
</ListView>
|
||||
<!-- highlight-next-line -->
|
||||
@ -458,15 +490,15 @@ The title bar should show the version.
|
||||
|
||||
11) Add the `import` and `export` methods in the component script:
|
||||
|
||||
```ts title="src/app/item/items.component.ts"
|
||||
```ts title="src/app/item/items.component.ts (add highlighted lines)"
|
||||
// highlight-start
|
||||
import { version, utils, read, write } from 'xlsx';
|
||||
import { Dialogs, getFileAccess } from '@nativescript/core';
|
||||
import { Folder, knownFolders, path } from '@nativescript/core/file-system';
|
||||
// highlight-end
|
||||
import { Component, OnInit } from '@angular/core'
|
||||
|
||||
import { Item } from './item'
|
||||
import { Component, NO_ERRORS_SCHEMA, inject } from '@angular/core'
|
||||
import { NativeScriptCommonModule, NativeScriptRouterModule } from '@nativescript/angular'
|
||||
import { Page } from '@nativescript/core'
|
||||
import { ItemService } from './item.service'
|
||||
|
||||
// highlight-start
|
||||
@ -476,19 +508,12 @@ function get_url_for_filename(filename: string): string {
|
||||
}
|
||||
// highlight-end
|
||||
|
||||
@Component({
|
||||
selector: 'ns-items',
|
||||
templateUrl: './items.component.html',
|
||||
})
|
||||
export class ItemsComponent implements OnInit {
|
||||
items: Array<Item>
|
||||
version: string = `SheetJS - ${version}`;
|
||||
// ...
|
||||
|
||||
constructor(private itemService: ItemService) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.items = this.itemService.getItems()
|
||||
}
|
||||
export class ItemsComponent {
|
||||
version = `SheetJS - ${version}`;
|
||||
itemService = inject(ItemService)
|
||||
page = inject(Page)
|
||||
|
||||
// highlight-start
|
||||
/* Import button */
|
||||
@ -499,13 +524,14 @@ export class ItemsComponent implements OnInit {
|
||||
async export() {
|
||||
}
|
||||
// highlight-end
|
||||
}
|
||||
|
||||
// ...
|
||||
```
|
||||
|
||||
12) End the script and relaunch the app in the Android simulator:
|
||||
|
||||
```bash
|
||||
npx -p nativescript ns run android
|
||||
npx -y -p nativescript ns run android
|
||||
```
|
||||
|
||||
Two buttons should appear just below the header:
|
||||
@ -534,7 +560,7 @@ Two buttons should appear just below the header:
|
||||
const ws = wb.Sheets[wsname];
|
||||
|
||||
/* update table */
|
||||
this.items = utils.sheet_to_json<Item>(ws);
|
||||
this.itemService.items.set(utils.sheet_to_json(ws));
|
||||
} catch(e) { await Dialogs.alert(e.message); }
|
||||
// highlight-end
|
||||
}
|
||||
@ -547,7 +573,7 @@ Two buttons should appear just below the header:
|
||||
|
||||
try {
|
||||
/* create worksheet from data */
|
||||
const ws = utils.json_to_sheet(this.items);
|
||||
const ws = utils.json_to_sheet(this.itemService.items());
|
||||
|
||||
/* create workbook from worksheet */
|
||||
const wb = utils.book_new();
|
||||
@ -569,7 +595,7 @@ Two buttons should appear just below the header:
|
||||
14) Launch the app in the Android Simulator:
|
||||
|
||||
```bash
|
||||
npx -p nativescript ns run android
|
||||
npx -y -p nativescript ns run android
|
||||
```
|
||||
|
||||
If the app does not automatically launch, manually open the `SheetJSNS` app.
|
||||
@ -611,8 +637,8 @@ $bytes = [Convert]::FromBase64String($b64)
|
||||
After the header row, insert a row and make the following assignments:
|
||||
|
||||
- Set cell `A2` to `0`
|
||||
- Set cell `B2` to `SheetJS` (type `'SheetJS` in the formula bar)
|
||||
- Set cell `C2` to `Library` (type `'Library` in the formula bar)
|
||||
- Set cell `B2` to `SheetJS` (type `'SheetJS` in the formula bar)
|
||||
- Set cell `C2` to `Library` (type `'Library` in the formula bar)
|
||||
|
||||
After making the changes, the worksheet should look like the following:
|
||||
|
||||
@ -620,8 +646,6 @@ After making the changes, the worksheet should look like the following:
|
||||
id | name | role
|
||||
# highlight-next-line
|
||||
0 | SheetJS | Library
|
||||
1 | Ter Stegen | Goalkeeper
|
||||
3 | Piqué | Defender
|
||||
...
|
||||
```
|
||||
|
||||
@ -671,7 +695,7 @@ Scroll down to ["Fetching Files"](#android-device) for Android device testing.
|
||||
20) Launch the app in the iOS Simulator:
|
||||
|
||||
```bash
|
||||
npx -p nativescript ns run ios
|
||||
npx -y -p nativescript ns run ios
|
||||
```
|
||||
|
||||
21) Tap "Export File". A dialog will print where the file was written.
|
||||
@ -681,8 +705,8 @@ npx -p nativescript ns run ios
|
||||
After the header row, insert a row and make the following assignments:
|
||||
|
||||
- Set cell `A2` to `0`
|
||||
- Set cell `B2` to `SheetJS` (type `'SheetJS` in the formula bar)
|
||||
- Set cell `C2` to `Library` (type `'Library` in the formula bar)
|
||||
- Set cell `B2` to `SheetJS` (type `'SheetJS` in the formula bar)
|
||||
- Set cell `C2` to `Library` (type `'Library` in the formula bar)
|
||||
|
||||
After making the changes, the worksheet should look like the following:
|
||||
|
||||
@ -690,8 +714,6 @@ After making the changes, the worksheet should look like the following:
|
||||
id | name | role
|
||||
# highlight-next-line
|
||||
0 | SheetJS | Library
|
||||
1 | Ter Stegen | Goalkeeper
|
||||
3 | Piqué | Defender
|
||||
...
|
||||
```
|
||||
|
||||
@ -704,31 +726,21 @@ The first item in the list will change:
|
||||
|
||||
### Fetching Files
|
||||
|
||||
25) In `src/app/item/items.component.ts`, make `ngOnInit` asynchronous:
|
||||
|
||||
```ts title="src/app/item/items.component.ts (replace existing function)"
|
||||
async ngOnInit(): Promise<void> {
|
||||
this.items = await this.itemService.getItems()
|
||||
}
|
||||
```
|
||||
|
||||
26) Replace `item.service.ts` with the following:
|
||||
25) Replace `item.service.ts` with the following:
|
||||
|
||||
```ts title="src/app/item/item.service.ts"
|
||||
import { Injectable } from '@angular/core'
|
||||
|
||||
import { knownFolders, path, getFileAccess } from '@nativescript/core'
|
||||
import { getFile } from '@nativescript/core/http';
|
||||
import { read, utils } from 'xlsx';
|
||||
|
||||
import { Injectable, signal, effect } from '@angular/core'
|
||||
import { knownFolders, path, getFileAccess } from '@nativescript/core';
|
||||
import { getFile } from '@nativescript/core/http';
|
||||
import { Item } from './item'
|
||||
|
||||
interface IPresident { Name: string; Index: number };
|
||||
|
||||
@Injectable({ providedIn: 'root' })
|
||||
export class ItemService {
|
||||
private items: Array<Item>;
|
||||
|
||||
async getItems(): Promise<Array<Item>> {
|
||||
items = signal<Item[]>([]);
|
||||
constructor() { effect(() => { (async() => {
|
||||
/* fetch https://docs.sheetjs.com/pres.xlsx */
|
||||
const temp: string = path.join(knownFolders.temp().path, "pres.xlsx");
|
||||
const ab = await getFile("https://docs.sheetjs.com/pres.xlsx", temp)
|
||||
@ -736,32 +748,33 @@ export class ItemService {
|
||||
const wb = read(await getFileAccess().readBufferAsync(ab.path));
|
||||
/* translate the first worksheet to the required Item type */
|
||||
const data = utils.sheet_to_json<IPresident>(wb.Sheets[wb.SheetNames[0]]);
|
||||
return this.items = data.map((pres, id) => ({id, name: pres.Name, role: ""+pres.Index} as Item));
|
||||
}
|
||||
/* update state */
|
||||
this.items.set(data.map((pres, id) => ({id, name: pres.Name, role: ""+pres.Index} as Item)));
|
||||
})(); }); }
|
||||
|
||||
getItem(id: number): Item {
|
||||
return this.items.filter((item) => item.id === id)[0]
|
||||
return this.items().find((item) => item.id === id)
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
27) End the script and relaunch the app in the Android simulator:
|
||||
26) End the script and relaunch the app in the Android simulator:
|
||||
|
||||
```bash
|
||||
npx -p nativescript ns run android
|
||||
npx -y -p nativescript ns run android
|
||||
```
|
||||
|
||||
The app should show Presidential data.
|
||||
|
||||
### Android Device
|
||||
|
||||
28) Connect an Android device using a USB cable.
|
||||
27) Connect an Android device using a USB cable.
|
||||
|
||||
If the device asks to allow USB debugging, tap "Allow".
|
||||
|
||||
29) Close any Android / iOS emulators.
|
||||
28) Close any Android / iOS emulators.
|
||||
|
||||
30) Enable "Legacy External Storage" in the Android app. The manifest is stored
|
||||
29) Enable "Legacy External Storage" in the Android app. The manifest is stored
|
||||
at `App_Resources/Android/src/main/AndroidManifest.xml`:
|
||||
|
||||
```xml title="App_Resources/Android/src/main/AndroidManifest.xml (add highlighted line)"
|
||||
@ -776,13 +789,13 @@ at `App_Resources/Android/src/main/AndroidManifest.xml`:
|
||||
android:hardwareAccelerated="true">
|
||||
```
|
||||
|
||||
31) Install the `@nativescript-community/perms` dependency:
|
||||
30) Install the `@nativescript-community/perms` dependency:
|
||||
|
||||
```bash
|
||||
npm i --save @nativescript-community/perms
|
||||
```
|
||||
|
||||
32) Add the highlighted lines to `items.component.ts`:
|
||||
31) Add the highlighted lines to `items.component.ts`:
|
||||
|
||||
- Import `File` from NativeScript core and `request` from the new dependency:
|
||||
|
||||
@ -815,10 +828,10 @@ import { Component, OnInit } from '@angular/core'
|
||||
} catch(e) { await Dialogs.alert(e.message); }
|
||||
```
|
||||
|
||||
33) Build APK and run on device:
|
||||
32) Build APK and run on device:
|
||||
|
||||
```bash
|
||||
npx -p nativescript ns run android
|
||||
npx -y -p nativescript ns run android
|
||||
```
|
||||
|
||||
If the Android emulators are closed and an Android device is connected, the last
|
||||
@ -839,22 +852,59 @@ file named `SheetJSNS.xls`.
|
||||
|
||||
### iOS Device
|
||||
|
||||
34) Connect an iOS device using a USB cable
|
||||
33) Connect an iOS device using a USB cable
|
||||
|
||||
35) Close any Android / iOS emulators.
|
||||
34) Close any Android / iOS emulators.
|
||||
|
||||
36) Enable developer code signing certificates:
|
||||
35) Enable developer code signing certificates:
|
||||
|
||||
Open `platforms/ios/SheetJSNS.xcodeproj/project.xcworkspace` in Xcode. Select
|
||||
the "Project Navigator" and select the "App" project. In the main view, select
|
||||
"Signing & Capabilities". Under "Signing", select a team in the dropdown menu.
|
||||
the "Project Navigator" and select `SheetJSNS`. In the main view, select the
|
||||
`SheetJSNS` target. Click "Signing & Capabilities". Under "Signing", select a
|
||||
team in the dropdown menu.
|
||||
|
||||
:::caution pass
|
||||
|
||||
When this demo was last tested, Xcode repeatedly crashed.
|
||||
|
||||
The issue was resolved by cleaning the project:
|
||||
|
||||
```bash
|
||||
npx -y -p nativescript ns platform clean ios
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
36) Add the following key/value pairs to `Info.plist`:
|
||||
|
||||
```xml title="App_Resources/iOS/Info.plist (add highlighted lines)"
|
||||
<dict>
|
||||
<!-- highlight-start -->
|
||||
<key>UIFileSharingEnabled</key>
|
||||
<true/>
|
||||
<key>LSSupportsOpeningDocumentsInPlace</key>
|
||||
<true/>
|
||||
<!-- highlight-end -->
|
||||
```
|
||||
|
||||
37) Run on device:
|
||||
|
||||
```bash
|
||||
npx -p nativescript ns run ios
|
||||
npx -y -p nativescript ns run ios
|
||||
```
|
||||
|
||||
:::info pass
|
||||
|
||||
If this is the first time testing an app on a device, the certificate must be
|
||||
trusted on the device:
|
||||
|
||||
Under "Settings" > "General" > "VPN & Device Management", there should be a
|
||||
"Apple Development" certificate in the "DEVELOPER APP" section. Select the
|
||||
certificate and confirm that "SheetJSNS" is listed under "APPS". Tap "Trust ..."
|
||||
and tap "Trust" in the popup.
|
||||
|
||||
:::
|
||||
|
||||
<details open>
|
||||
<summary><b>iOS Device Testing</b> (click to hide)</summary>
|
||||
|
||||
@ -863,8 +913,9 @@ connected to the Internet, a list of Presidents should be displayed.
|
||||
|
||||
Tap "Export File". The app will show an alert. Tap "OK".
|
||||
|
||||
Switch to the "Files" app and open the "Downloads" folder. There should be a new
|
||||
file named `SheetJSNS.xls`.
|
||||
Switch to the "Files" app and repeatedly tap "<". In the "Browse" window, tap
|
||||
"On My iPhone". There should be a new folder named "SheetJSNS". Tap the folder
|
||||
and look for the file named `SheetJSNS.xls`.
|
||||
|
||||
</details>
|
||||
|
||||
|
@ -53,7 +53,7 @@ This demo was tested in the following environments:
|
||||
|:-----------|:--------------------|:------------------|:-------------|:-----------|
|
||||
| Android 34 | Pixel 3a | `7.1.0` / `7.0.0` | `darwin-arm` | 2025-03-30 |
|
||||
| iOS 18.2 | iPhone 16 Pro Max | `7.1.0` / `7.0.0` | `darwin-arm` | 2025-03-30 |
|
||||
| Android 35 | Pixel 9 | `6.2.0` / `6.0.2` | `win11-x64` | 2024-12-21 |
|
||||
| Android 35 | Pixel 9 Pro XL | `7.3.0` / `7.1.1` | `win11-x64` | 2025-06-08 |
|
||||
| Android 35 | Pixel 9 | `6.2.0` / `6.0.2` | `linux-x64` | 2025-01-02 |
|
||||
|
||||
:::
|
||||
@ -63,13 +63,13 @@ This demo was tested in the following environments:
|
||||
Before starting this demo, manually disable telemetry. On Linux and MacOS:
|
||||
|
||||
```bash
|
||||
npx @capacitor/cli telemetry off
|
||||
npx -y @capacitor/cli telemetry off
|
||||
```
|
||||
|
||||
To verify telemetry was disabled:
|
||||
|
||||
```bash
|
||||
npx @capacitor/cli telemetry
|
||||
npx -y @capacitor/cli telemetry
|
||||
```
|
||||
|
||||
:::
|
||||
@ -224,13 +224,13 @@ Java 20 was required to support Gradle `8.2.1`.
|
||||
1) Disable telemetry.
|
||||
|
||||
```bash
|
||||
npx @capacitor/cli telemetry off
|
||||
npx -y @capacitor/cli telemetry off
|
||||
```
|
||||
|
||||
Verify that telemetry is disabled by running
|
||||
|
||||
```bash
|
||||
npx @capacitor/cli telemetry
|
||||
npx -y @capacitor/cli telemetry
|
||||
```
|
||||
|
||||
(it should print `Telemetry is off`)
|
||||
@ -265,7 +265,7 @@ If prompted to create an Ionic account, type `N` and press <kbd>Enter</kbd>.
|
||||
5) Download [`src/App.svelte`](pathname:///cap/App.svelte) and replace:
|
||||
|
||||
```bash
|
||||
curl -o src/App.svelte -L https://docs.sheetjs.com/cap/App.svelte
|
||||
curl -o src/App.svelte https://docs.sheetjs.com/cap/App.svelte
|
||||
```
|
||||
|
||||
### Android
|
||||
@ -530,7 +530,7 @@ error: Provisioning profile "iOS Team Provisioning Profile: com.sheetjs.cap" doe
|
||||
```
|
||||
|
||||
This error was resolved by manually selecting the device as the primary target
|
||||
in the Xcode workspace.
|
||||
in the Xcode workspace.
|
||||
|
||||
:::
|
||||
|
||||
|
@ -59,7 +59,7 @@ This demo was tested in the following environments:
|
||||
|:-----------|:------------------|:--------|:---------|:-------------|:-----------|
|
||||
| Android 35 | Pixel 9 Pro XL | `3.7.2` | `3.29.2` | `darwin-x64` | 2025-03-31 |
|
||||
| iOS 18.3 | iPhone 16 Pro Max | `3.7.2` | `3.29.2` | `darwin-x64` | 2025-03-31 |
|
||||
| Android 35 | Pixel 3a | `3.5.0` | `3.24.0` | `win11-x64` | 2024-08-10 |
|
||||
| Android 36 | Pixel 9 Pro XL | `3.7.2` | `3.29.3` | `win11-x64` | 2054-04-28 |
|
||||
|
||||
:::
|
||||
|
||||
@ -244,7 +244,7 @@ Run `flutter doctor` and confirm the following items are checked:
|
||||
<TabItem value="win" label="Windows">
|
||||
|
||||
<pre>
|
||||
<span {...g}>[✓]</span> Android toolchain - develop for Android devices (Android SDK version 35.0.0)
|
||||
<span {...g}>[✓]</span> Android toolchain - develop for Android devices (Android SDK version 35.0.1)
|
||||
</pre>
|
||||
|
||||
</TabItem>
|
||||
@ -260,7 +260,7 @@ Run `flutter doctor` and confirm the following items are checked:
|
||||
On first run, there may be a warning with "Android toolchain":
|
||||
|
||||
```
|
||||
[!] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
|
||||
[!] Android toolchain - develop for Android devices (Android SDK version 35.0.1)
|
||||
! Some Android licenses not accepted. To resolve this, run: flutter doctor
|
||||
--android-licenses
|
||||
```
|
||||
@ -386,9 +386,9 @@ Pixel_9_Pro_XL_API_35 • Pixel 9 Pro XL API 35 • Google • android
|
||||
There should be at least one `android` emulator:
|
||||
|
||||
```
|
||||
Id • Name • Manufacturer • Platform
|
||||
Id • Name • Manufacturer • Platform
|
||||
|
||||
Pixel_3a_API_35 • Pixel 3a API 35 • Google • android
|
||||
Pixel_9_Pro_XL • Pixel 9 Pro XL • Google • android
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
@ -445,14 +445,43 @@ emulator -avd Pixel_9_Pro_XL_API_35
|
||||
|
||||
:::note pass
|
||||
|
||||
If `emulator` cannot be found, the folder must be added to the system path.
|
||||
|
||||
<Tabs groupId="os">
|
||||
<TabItem value="macos" label="macOS">
|
||||
|
||||
On macOS, `~/Library/Android/sdk/emulator/` is the typical location for the
|
||||
`emulator` binary. If it cannot be found, add the folder to `PATH`:
|
||||
`emulator` binary:
|
||||
|
||||
```bash
|
||||
export PATH="$PATH":~/Library/Android/sdk/emulator
|
||||
emulator -avd Pixel_9_Pro_XL_API_35
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
<TabItem value="win" label="Windows">
|
||||
|
||||
The Android SDK folder can be found in the SDK manager in Android Studio. It is
|
||||
typically `%LOCALAPPDATA%\Android\Sdk`.
|
||||
|
||||
If it is not assigned, create a User environment variable named `ANDROID_HOME`
|
||||
with the value set to the Android SDK folder.
|
||||
|
||||
---
|
||||
|
||||
There are three folders within the Android SDK folder that should be added to
|
||||
the User `PATH` environment variable. Each folder holds a different tool:
|
||||
|
||||
| Folder | Command-line Tool |
|
||||
|:------------------------------------------|:------------------|
|
||||
| `%ANDROID_HOME%\emulator` | `emulator` |
|
||||
| `%ANDROID_HOME%\cmdline-tools\latest\bin` | `avdmanager` |
|
||||
| `%ANDROID_HOME%\platform-tools` | `adb` |
|
||||
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
|
||||
:::
|
||||
|
||||
</details>
|
||||
@ -645,6 +674,13 @@ flutter -v -d emulator-5554 run
|
||||
|
||||
</details>
|
||||
|
||||
:::caution pass
|
||||
|
||||
In some test runs on low-power devices, it took 20 seconds for the app to fetch
|
||||
and display data!
|
||||
|
||||
:::
|
||||
|
||||
:::info Troubleshooting
|
||||
|
||||
In some demo runs, the build failed with an Android SDK error:
|
||||
@ -852,7 +888,7 @@ Tap "OK" to continue.
|
||||
|
||||
:::info pass
|
||||
|
||||
In some test runs, the app requested for local network access:
|
||||
In some test runs, the app requested for local network access:
|
||||
|
||||
> "Sheetjs Flutter" would like to find and connect to devices on your local network.
|
||||
|
||||
|
@ -176,7 +176,7 @@ The demo uses Lynx `<view/>` and `<text/>` elements to display tabular data:
|
||||
{/* Map through each cell in the current row */}
|
||||
{Array.isArray(row) && row.map((cell, cellIndex) => (
|
||||
{/* Cell with dynamic width based on content */}
|
||||
<view
|
||||
<view
|
||||
key={`cell-${rowIndex}-${cellIndex}`} className="Cell"
|
||||
style={{ width: `${widths[cellIndex]}px` }}>
|
||||
{/* Display cell content as text */}
|
||||
|
@ -40,47 +40,22 @@ app to read and write workbooks. The app will look like the screenshots below:
|
||||
|
||||
## Integration Details
|
||||
|
||||
Electron uses a multi-process architecture, with the main process handling system level operations and I/O, and the renderer process handling UI and web content.
|
||||
The [SheetJS NodeJS Module](/docs/getting-started/installation/nodejs) can be
|
||||
imported from the main or the renderer thread.
|
||||
|
||||
**Renderer Process Limitations**
|
||||
The SheetJS `readFile` and `writeFile` methods will use the Electron `fs` module
|
||||
where available.
|
||||
|
||||
The renderer process is sandboxed and cannot run any non-browser code.
|
||||
<details>
|
||||
<summary><b>Renderer Configuration</b> (click to show)</summary>
|
||||
|
||||
**Main Process Limitations**
|
||||
Electron 9 and later require the preference `nodeIntegration: true` in order to
|
||||
`require('xlsx')` in the renderer process.
|
||||
|
||||
The main process can run any NodeJS code, but it cannot access the DOM or any browser APIs.
|
||||
Electron 12 and later also require `worldSafeExecuteJavascript: true` and
|
||||
`contextIsolation: true`.
|
||||
|
||||
To allow communication between the main and renderer processes, Electron recommends building a [context bridge](https://www.electronjs.org/docs/latest/api/context-bridge) to expose low-level system calls and NodeJS APIs to the renderer process. Such as the [SheetJS NodeJS Module](/docs/getting-started/installation/nodejs) which we will be using here.
|
||||
|
||||
Exposed APIs are available as `SheetJSDemoAPI` on the window object and proxied from the main process.
|
||||
|
||||
```js title="preload.js -- contextBridge API"
|
||||
const { contextBridge, ipcRenderer, shell } = require('electron');
|
||||
// import nodejs modules we wish to expose APIs from.
|
||||
const path = require('path');
|
||||
const XLSX = require('xlsx');
|
||||
|
||||
// The contextBridge API allows us to expose APIs to the renderer process.
|
||||
// highlight-next-line
|
||||
contextBridge.exposeInMainWorld('SheetJSDemoAPI', {
|
||||
// request OS file dialogs from the main process
|
||||
openFile: (filters) => ipcRenderer.invoke('dialog:openFile', filters),
|
||||
saveFile: (filters) => ipcRenderer.invoke('dialog:saveFile', filters),
|
||||
message: (msg) => ipcRenderer.invoke('dialog:message', msg),
|
||||
// open external links in the default browser
|
||||
openExternal: (url) => shell.openExternal(url),
|
||||
// listen for file open events from the main process
|
||||
onFileOpened: (cb) => ipcRenderer.on('file-opened', (_e, fp) => cb(fp)),
|
||||
|
||||
// You can use this to expose nodejs APIs to the renderer process.
|
||||
basename: (p) => path.basename(p),
|
||||
extname: (p) => path.extname(p),
|
||||
|
||||
// Here for example we are exposing the sheetjs package to the renderer process.
|
||||
// highlight-next-line
|
||||
xlsx: XLSX,
|
||||
});
|
||||
```
|
||||
</details>
|
||||
|
||||
### Reading Files
|
||||
|
||||
@ -98,7 +73,7 @@ For example, assuming a file input element on the page:
|
||||
|
||||
The event handler would process the event as if it were a web event:
|
||||
|
||||
```js title="index.js -- renderer process"
|
||||
```js
|
||||
async function handleFile(e) {
|
||||
const file = e.target.files[0];
|
||||
const data = await file.arrayBuffer();
|
||||
@ -112,9 +87,8 @@ document.getElementById("xlf").addEventListener("change", handleFile, false);
|
||||
|
||||
**Drag and Drop**
|
||||
|
||||
In the demo the [drag and drop snippet](/docs/solutions/input#example-user-submissions)
|
||||
applies to the entire window via the `document.body` element. However it can easily be
|
||||
applied to any element on the page.
|
||||
The [drag and drop snippet](/docs/solutions/input#example-user-submissions)
|
||||
applies to DIV elements on the page.
|
||||
|
||||
For example, assuming a DIV on the page:
|
||||
|
||||
@ -124,9 +98,7 @@ For example, assuming a DIV on the page:
|
||||
|
||||
The event handler would process the event as if it were a web event:
|
||||
|
||||
```js title="index.js -- renderer process"
|
||||
const XLSX = window.SheetJSDemoAPI.xlsx; // use xlsx package from bridge process
|
||||
|
||||
```js
|
||||
async function handleDrop(e) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
@ -145,105 +117,88 @@ document.getElementById("drop").addEventListener("drop", handleDrop, false);
|
||||
|
||||
[`XLSX.readFile`](/docs/api/parse-options) reads workbooks from the file system.
|
||||
`showOpenDialog` shows a Save As dialog and returns the selected file name.
|
||||
Unlike the Web APIs, the `showOpenDialog` flow can be initiated by app code:
|
||||
|
||||
We can now use the exposed APIs from our preload script above to show the open dialog and try to parse the workbook from within the renderer process.
|
||||
|
||||
```js title="index.js -- renderer process"
|
||||
// our exposed bridge APIs are available as SheetJSDemoAPI on the window object
|
||||
const openFile = window.SheetJSDemoAPI.openFile; // request the open file dialog from the main process
|
||||
// We can also access the SheetJS package from the exposed bridge APIs
|
||||
// highlight-next-line
|
||||
const XLSX = window.SheetJSDemoAPI.xlsx;
|
||||
```js
|
||||
/* from the renderer thread */
|
||||
const electron = require('@electron/remote');
|
||||
|
||||
/* this function will show the open dialog and try to parse the workbook */
|
||||
async function importFile() {
|
||||
/* show open file dialog */
|
||||
const result = await openFile([{
|
||||
/* show Save As dialog */
|
||||
const result = await electron.dialog.showOpenDialog({
|
||||
title: 'Select a file',
|
||||
filters: [{
|
||||
name: "Spreadsheets",
|
||||
extensions: ["xlsx", "xls", "xlsb", /* ... other formats ... */]
|
||||
}]);
|
||||
}]
|
||||
});
|
||||
/* result.filePaths is an array of selected files */
|
||||
if(result.filePaths.length == 0) throw new Error("No file was selected!");
|
||||
// highlight-next-line
|
||||
return XLSX.readFile(result.filePaths[0]);
|
||||
}
|
||||
```
|
||||
In order to interact with the file system, the `xlsx` package here depends on the Node.js. Which means we need to utilize the Bridge here and make it possible to call these methods from the renderer process. The appropriate IPC event can be found below.
|
||||
|
||||
```js title="main.js -- main process"
|
||||
const { ipcMain, dialog } = require('electron');
|
||||
:::note pass
|
||||
|
||||
ipcMain.handle('dialog:openFile', (_e, filters) =>
|
||||
dialog.showOpenDialog({ title: 'Select a file', filters, properties: ['openFile'] })
|
||||
);
|
||||
`showOpenDialog` originally returned an array of paths:
|
||||
|
||||
```js
|
||||
var dialog = require('electron').remote.dialog;
|
||||
|
||||
function importFile(workbook) {
|
||||
var result = dialog.showOpenDialog({ properties: ['openFile'] });
|
||||
return XLSX.readFile(result[0]);
|
||||
}
|
||||
```
|
||||
|
||||
This method was renamed to `showOpenDialogSync` in Electron 6.
|
||||
|
||||
:::
|
||||
|
||||
### Writing Files
|
||||
|
||||
[`XLSX.writeFile`](/docs/api/write-options) writes workbooks to the file system.
|
||||
`showSaveDialog` shows a Save As dialog and returns the selected file name:
|
||||
|
||||
The implementation for saving files looks very similar to the one above thanks to our bridge API.
|
||||
```js title="index.js -- renderer process"
|
||||
// our exposed bridge APIs are available as SheetJSDemoAPI on the window object
|
||||
const saveFile = window.SheetJSDemoAPI.saveFile; // request the save file dialog from the main process
|
||||
const XLSX = window.SheetJSDemoAPI.xlsx;
|
||||
```js
|
||||
/* from the renderer thread */
|
||||
const electron = require('@electron/remote');
|
||||
|
||||
/* this function will show the save dialog and try to write the workbook */
|
||||
async function exportFile(workbook) {
|
||||
const result = await saveFile([{
|
||||
/* show Save As dialog */
|
||||
const result = await electron.dialog.showSaveDialog({
|
||||
title: 'Save file as',
|
||||
filters: [{
|
||||
name: "Spreadsheets",
|
||||
extensions: ["xlsx", "xls", "xlsb", /* ... other formats ... */]
|
||||
}]);
|
||||
if(result.filePaths.length == 0) throw new Error("No file was selected!");
|
||||
XLSX.writeFile(workbook, result.filePaths[0]);
|
||||
}]
|
||||
});
|
||||
/* write file */
|
||||
// highlight-next-line
|
||||
XLSX.writeFile(workbook, result.filePath);
|
||||
}
|
||||
```
|
||||
And here is the implementation of the `saveFile` event listener in `main.js`:
|
||||
```js title="main.js -- main process"
|
||||
const { ipcMain, dialog } = require('electron');
|
||||
|
||||
ipcMain.handle('dialog:saveFile', (_e, filters) =>
|
||||
dialog.showSaveDialog({ title: 'Save file as', filters })
|
||||
);
|
||||
:::note pass
|
||||
|
||||
`showSaveDialog` originally returned the selected path:
|
||||
|
||||
```js
|
||||
var dialog = require('electron').remote.dialog;
|
||||
|
||||
function exportFile(workbook) {
|
||||
var result = dialog.showSaveDialog();
|
||||
XLSX.writeFile(workbook, result);
|
||||
}
|
||||
```
|
||||
|
||||
### Working with OS level file open events.
|
||||
This method was renamed to `showSaveDialogSync` in Electron 6.
|
||||
|
||||
Electron makes it possible to handle OS level file open events, such as the "open with" context menu or `open` CLI command.
|
||||
|
||||
The example below shows the configuration required to register your application as a handler supporting such events for all file extensions SheetJS supports.
|
||||
|
||||
:::caution
|
||||
|
||||
It is also possible to open files using the "open with" context menu without registering the application as a handler for the specified file types. This however, requires manually selecting the application binary as a target to open the file with.
|
||||
|
||||
**This action might not be supported by some file managers on Linux based systems.**
|
||||
:::
|
||||
|
||||
```json title="package.json"
|
||||
{
|
||||
// ...existing content
|
||||
"build": {
|
||||
"appId": "com.sheetjs.electron",
|
||||
"fileAssociations": [
|
||||
{
|
||||
"ext": [ // supported extensions to register with the OS.
|
||||
"xls","xlsx","xlsm","xlsb","xml","csv","txt","dif",
|
||||
"sylk","slk","prn","ods","fods","htm","html","numbers"
|
||||
],
|
||||
"name": "Spreadsheet / Delimited File",
|
||||
"description": "Spreadsheets and delimited text files opened by SheetJS-Electron",
|
||||
"role": "Editor"
|
||||
}
|
||||
],
|
||||
"mac": { "target": "dmg" },
|
||||
"win": { "target": "nsis" },
|
||||
"linux": { "target": "deb" }
|
||||
},
|
||||
}
|
||||
```
|
||||
This makes it possible to generate installers for MacOS, Windows and Linux which will automatically register the application as a handler for the specified file types avoiding manual registration processes that differ across operating systems.
|
||||
|
||||
## Complete Example
|
||||
|
||||
:::note Tested Deployments
|
||||
@ -253,17 +208,22 @@ This demo was tested in the following environments:
|
||||
| OS and Version | Architecture | Electron | Date |
|
||||
|:---------------|:-------------|:---------|:-----------|
|
||||
| macOS 15.3 | `darwin-x64` | `35.1.2` | 2025-03-31 |
|
||||
| macOS 15.4 | `darwin-arm` | `36.1.0` | 2025-05-03 |
|
||||
| Windows 11 | `win11-x64` | `36.1.0` | 2025-05-03 |
|
||||
| macOS 14.5 | `darwin-arm` | `35.1.2` | 2025-03-30 |
|
||||
| Windows 11 | `win11-x64` | `33.2.1` | 2025-02-11 |
|
||||
| Windows 11 | `win11-arm` | `33.2.1` | 2025-02-23 |
|
||||
| Linux (HoloOS) | `linux-x64` | `33.2.1` | 2025-01-02 |
|
||||
| Linux (Debian) | `linux-arm` | `33.2.1` | 2025-02-16 |
|
||||
|
||||
:::
|
||||
|
||||
The demo project is wired for `electron-forge` to build the standalone binary.
|
||||
This demo includes a drag-and-drop box as well as a file input box, mirroring
|
||||
the [SheetJS Data Preview Live Demo](https://oss.sheetjs.com/sheetjs/)
|
||||
|
||||
You can also use `electron-builder` to build a packaged installer binary.
|
||||
The core data in this demo is an editable HTML table. The readers build up the
|
||||
table using `sheet_to_html` (with `editable:true` option) and the writers scrape
|
||||
the table using `table_to_book`.
|
||||
|
||||
The demo project is wired for `electron-forge` to build the standalone binary.
|
||||
|
||||
1) Download the demo files:
|
||||
|
||||
@ -271,8 +231,6 @@ You can also use `electron-builder` to build a packaged installer binary.
|
||||
- [`main.js`](pathname:///electron/main.js) : main process script
|
||||
- [`index.html`](pathname:///electron/index.html) : window page
|
||||
- [`index.js`](pathname:///electron/index.js) : script loaded in render context
|
||||
- [`preload.js`](pathname:///electron/preload.js) : preload script (ContextBridge API worker)
|
||||
- [`styles.css`](pathname:///electron/styles.css) : stylesheet
|
||||
|
||||
:::caution pass
|
||||
|
||||
@ -290,8 +248,6 @@ curl -LO https://docs.sheetjs.com/electron/package.json
|
||||
curl -LO https://docs.sheetjs.com/electron/main.js
|
||||
curl -LO https://docs.sheetjs.com/electron/index.html
|
||||
curl -LO https://docs.sheetjs.com/electron/index.js
|
||||
curl -LO https://docs.sheetjs.com/electron/preload.js
|
||||
curl -LO https://docs.sheetjs.com/electron/styles.css
|
||||
```
|
||||
|
||||
:::note pass
|
||||
@ -309,8 +265,6 @@ curl.exe -LO https://docs.sheetjs.com/electron/package.json
|
||||
curl.exe -LO https://docs.sheetjs.com/electron/main.js
|
||||
curl.exe -LO https://docs.sheetjs.com/electron/index.html
|
||||
curl.exe -LO https://docs.sheetjs.com/electron/index.js
|
||||
curl.exe -LO https://docs.sheetjs.com/electron/preload.js
|
||||
curl.exe -LO https://docs.sheetjs.com/electron/styles.css
|
||||
```
|
||||
|
||||
:::
|
||||
@ -368,12 +322,12 @@ The program will run on ARM64 Windows.
|
||||
|
||||
#### Electron API
|
||||
|
||||
7) Click "Click here to select a file. With the file picker,
|
||||
7) Click "Click here to select a file from your computer". With the file picker,
|
||||
navigate to the Downloads folder and select `pres.numbers`.
|
||||
|
||||
The application should show a dropdown component for each worksheet contained in your file, clicking on it should display its data within a table.
|
||||
The application should show data in a table.
|
||||
|
||||
8) Click "Export" and click "Save" in the popup. By default, it will try
|
||||
8) Click "Export Data!" and click "Save" in the popup. By default, it will try
|
||||
to write to `Untitled.xls` in the Downloads folder.
|
||||
|
||||
:::note pass
|
||||
@ -387,51 +341,27 @@ If there is no default name, enter `Untitled.xls` and click "Save".
|
||||
The app will show a popup once the data is exported. Open the file in a
|
||||
spreadsheet editor and compare the data to the table shown in the application.
|
||||
|
||||
#### Open with menu
|
||||
#### Drag and Drop
|
||||
|
||||
9) Close the application, end the terminal process and re-launch (see step 6)
|
||||
|
||||
10) Open the Downloads folder in a file explorer or finder window.
|
||||
|
||||
11) Right-click the `pres.numbers` file and select "Open with".
|
||||
11) Click and drag the `pres.numbers` file from the Downloads folder to the
|
||||
bordered "Drop a spreadsheet file" box. The file data should be displayed.
|
||||
|
||||
12) Select your application binary by navigating to the folder where the application was built (see step 4).
|
||||
#### File Input Element
|
||||
|
||||
:::info
|
||||
On some Linux based systems, depending on the file manager in use selecting the binary directly may not be possible.
|
||||
:::
|
||||
12) Close the application, end the terminal process and re-launch (see step 6)
|
||||
|
||||
|
||||
The application should show a dropdown component for each worksheet contained in your file, clicking on it should display its data within a table.
|
||||
|
||||
#### Drag and Drop
|
||||
|
||||
13) Close the application, end the terminal process and re-launch (see step 6)
|
||||
|
||||
14) Open the Downloads folder in a file explorer or finder window.
|
||||
|
||||
15) Click and drag the `pres.numbers` file from the Downloads folder
|
||||
into the application window.
|
||||
|
||||
The application should show a dropdown component for each worksheet contained in your file, clicking on it should display its data within a table.
|
||||
|
||||
:::info
|
||||
On some Linux based systems, the experience can differ depending on the window manager / desktop environment in use.
|
||||
:::
|
||||
|
||||
#### File Picker Element
|
||||
|
||||
16) Close the application, end the terminal process and re-launch (see step 6)
|
||||
|
||||
17) Click "Choose File". With the file picker, navigate to the Downloads folder
|
||||
13) Click "Choose File". With the file picker, navigate to the Downloads folder
|
||||
and select `pres.numbers`.
|
||||
|
||||
The application should show a dropdown component for each worksheet contained in your file, clicking on it should display its data within a table.
|
||||
|
||||
|
||||
## Electron Breaking Changes
|
||||
|
||||
The first version of this demo used Electron `1.7.5`. The current demo includes
|
||||
the required changes for Electron `36.1.0`.
|
||||
the required changes for Electron `35.1.2`.
|
||||
|
||||
There are no Electron-specific workarounds in the library, but Electron broke
|
||||
backwards compatibility multiple times. A summary of changes is noted below.
|
||||
@ -459,8 +389,4 @@ Electron 14 and later must use `@electron/remote` instead of `remote`. An
|
||||
|
||||
:::
|
||||
|
||||
For demos built on top of Electron 36 and later we isolate the processes entirely and the demo no longer requires `@electron/remote`.
|
||||
However, `nodeIntegration: false` by default now means that the renderer process no longer has access to NodeJS APIs.
|
||||
To expose NodeJS APIs to the renderer process, we use the contextBridge API to expose APIs from the main process to the renderer process. [See more](https://www.electronjs.org/docs/latest/api/context-bridge). This has been best practice since Electron 25.
|
||||
|
||||
[^1]: See ["Makers"](https://www.electronforge.io/config/makers) in the Electron Forge documentation. On Linux, the demo generates `rpm` and `deb` distributables. On Arch Linux and the Steam Deck, `sudo pacman -Syu rpm-tools dpkg fakeroot` installed required packages. On Debian and Ubuntu, `sudo apt-get install rpm` sufficed.
|
@ -119,14 +119,14 @@ input.click();
|
||||
|
||||
This demo was tested in the following environments:
|
||||
|
||||
| OS and Version | Architecture | NW.js | Date | Notes |
|
||||
|:---------------|:-------------|:---------|:-----------|:---------------------|
|
||||
| macOS 15.3.2 | `darwin-x64` | `0.94.0` | 2025-03-31 | |
|
||||
| macOS 14.5 | `darwin-arm` | `0.94.0` | 2025-03-30 | |
|
||||
| Windows 11 | `win11-x64` | `0.94.0` | 2024-12-19 | |
|
||||
| Windows 11 | `win11-arm` | `0.94.0` | 2025-02-23 | |
|
||||
| Linux (HoloOS) | `linux-x64` | `0.89.0` | 2025-01-10 | |
|
||||
| Linux (Debian) | `linux-arm` | `0.60.0` | 2025-02-16 | Unofficial build[^1] |
|
||||
| OS and Version | Architecture | NW.js | Date | Notes |
|
||||
|:---------------|:-------------|:----------|:-----------|:---------------------|
|
||||
| macOS 15.3.2 | `darwin-x64` | `0.94.0` | 2025-03-31 | |
|
||||
| macOS 14.5 | `darwin-arm` | `0.94.0` | 2025-03-30 | |
|
||||
| Windows 11 | `win11-x64` | `0.100.0` | 2025-05-27 | |
|
||||
| Windows 11 | `win11-arm` | `0.94.0` | 2025-02-23 | |
|
||||
| Linux (HoloOS) | `linux-x64` | `0.89.0` | 2025-01-10 | |
|
||||
| Linux (Debian) | `linux-arm` | `0.60.0` | 2025-02-16 | Unofficial build[^1] |
|
||||
|
||||
:::
|
||||
|
||||
@ -146,7 +146,7 @@ cd sheetjs-nwjs
|
||||
"version": "0.0.0",
|
||||
"main": "index.html",
|
||||
"dependencies": {
|
||||
"nw": "0.94.0",
|
||||
"nw": "0.100.0",
|
||||
"xlsx": "https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz"
|
||||
}
|
||||
}`}
|
||||
@ -167,6 +167,22 @@ In the terminal window, the download can be performed with:
|
||||
curl -LO https://docs.sheetjs.com/nwjs/index.html
|
||||
```
|
||||
|
||||
:::note pass
|
||||
|
||||
In PowerShell, the command may fail with a parameter error:
|
||||
|
||||
```
|
||||
Invoke-WebRequest : A parameter cannot be found that matches parameter name 'L'.
|
||||
```
|
||||
|
||||
`curl.exe` must be invoked directly:
|
||||
|
||||
```bash
|
||||
curl.exe -LO https://docs.sheetjs.com/nwjs/index.html
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
3) Install dependencies:
|
||||
|
||||
```bash
|
||||
@ -208,15 +224,16 @@ Unfortunately `nw-builder` will not be able to build a standalone program.
|
||||
5) To build a standalone app, run the builder:
|
||||
|
||||
```bash
|
||||
npx -p nw-builder@4.11.6 nwbuild --mode=build --version=0.94.0 --glob=false --outDir=../out ./
|
||||
npx -p nw-builder@4.11.6 nwbuild --mode=build --version=0.100.0 --glob=false --outDir=../out ./
|
||||
```
|
||||
|
||||
This will generate the standalone app in the `..\out\` folder.
|
||||
|
||||
:::caution pass
|
||||
|
||||
There is a regression in `nw-builder` version `4.12.0`. In local `win11-x64`
|
||||
testing, version `4.11.6` correctly generated the standalone application.
|
||||
There is a regression in `nw-builder` versions `4.12.0` and `4.13.14`.
|
||||
|
||||
In local `win11-x64` testing, `4.11.6` generates the standalone application.
|
||||
|
||||
:::
|
||||
|
||||
|
@ -54,6 +54,21 @@ platform provides many native features out of the box.
|
||||
|
||||
:::
|
||||
|
||||
:::note Tested Deployments
|
||||
|
||||
This demo was tested in the following environments:
|
||||
|
||||
| OS and Version | Architecture | Wails | Date |
|
||||
|:---------------|:-------------|:----------|:-----------|
|
||||
| macOS 15.3.2 | `darwin-x64` | `v2.10.1` | 2025-03-31 |
|
||||
| macOS 14.5 | `darwin-arm` | `v2.10.1` | 2025-03-30 |
|
||||
| Windows 11 | `win11-x64` | `v2.10.1` | 2025-05-27 |
|
||||
| Windows 11 | `win11-arm` | `v2.10` | 2025-02-23 |
|
||||
| Linux (HoloOS) | `linux-x64` | `v2.9.2` | 2025-01-02 |
|
||||
| Linux (Debian) | `linux-arm` | `v2.10` | 2025-02-16 |
|
||||
|
||||
:::
|
||||
|
||||
## Integration Details
|
||||
|
||||
The [SheetJS NodeJS Module](/docs/getting-started/installation/nodejs) can be
|
||||
@ -291,21 +306,6 @@ async function exportFile(table_element) {
|
||||
|
||||
## Complete Example
|
||||
|
||||
:::note Tested Deployments
|
||||
|
||||
This demo was tested in the following environments:
|
||||
|
||||
| OS and Version | Architecture | Wails | Date |
|
||||
|:---------------|:-------------|:----------|:-----------|
|
||||
| macOS 15.3.2 | `darwin-x64` | `v2.10.1` | 2025-03-31 |
|
||||
| macOS 14.5 | `darwin-arm` | `v2.10.1` | 2025-03-30 |
|
||||
| Windows 11 | `win11-x64` | `v2.9.2` | 2024-12-21 |
|
||||
| Windows 11 | `win11-arm` | `v2.10` | 2025-02-23 |
|
||||
| Linux (HoloOS) | `linux-x64` | `v2.9.2` | 2025-01-02 |
|
||||
| Linux (Debian) | `linux-arm` | `v2.10` | 2025-02-16 |
|
||||
|
||||
:::
|
||||
|
||||
0) Read the Wails "Getting Started" guide[^14] and install dependencies.
|
||||
|
||||
<details>
|
||||
@ -400,7 +400,11 @@ wails build
|
||||
|
||||
It will print the path to the generated program (typically in `build/bin/`).
|
||||
|
||||
5) Run the generated application.
|
||||
5) Run the generated application:
|
||||
|
||||
| Architecture | Command |
|
||||
|:-------------|:------------------------------------------|
|
||||
| `win11-x64` | `.\build\bin\sheetjs-wails.exe` |
|
||||
|
||||
**Testing**
|
||||
|
||||
|
@ -50,6 +50,21 @@ app to read and write workbooks. The app will look like the screenshots below:
|
||||
|
||||
</td></tr></tbody></table>
|
||||
|
||||
:::note Tested Deployments
|
||||
|
||||
This demo was tested in the following environments:
|
||||
|
||||
| OS and Version | Architecture | Tauri | Date |
|
||||
|:---------------|:-------------|:----------|:-----------|
|
||||
| macOS 15.3.2 | `darwin-x64` | `v1.6.0` | 2025-03-31 |
|
||||
| macOS 14.5 | `darwin-arm` | `v1.6.0` | 2025-03-30 |
|
||||
| Windows 11 | `win11-x64` | `v1.6.0` | 2025-05-27 |
|
||||
| Windows 11 | `win11-arm` | `v1.6.0` | 2025-02-23 |
|
||||
| Linux (HoloOS) | `linux-x64` | `v1.6.0` | 2025-01-02 |
|
||||
| Linux (Debian) | `linux-arm` | `v1.6.0` | 2025-05-27 |
|
||||
|
||||
:::
|
||||
|
||||
## Integration Details
|
||||
|
||||
The [SheetJS NodeJS Module](/docs/getting-started/installation/nodejs) can be
|
||||
@ -347,21 +362,6 @@ function SheetJSExportKaioponent() {
|
||||
|
||||
## Complete Example
|
||||
|
||||
:::note Tested Deployments
|
||||
|
||||
This demo was tested in the following environments:
|
||||
|
||||
| OS and Version | Architecture | Tauri | Date |
|
||||
|:---------------|:-------------|:----------|:-----------|
|
||||
| macOS 15.3.2 | `darwin-x64` | `v1.6.0` | 2025-03-31 |
|
||||
| macOS 14.5 | `darwin-arm` | `v1.6.0` | 2025-03-30 |
|
||||
| Windows 11 | `win11-x64` | `v1.6.0` | 2024-12-21 |
|
||||
| Windows 11 | `win11-arm` | `v1.6.0` | 2025-02-23 |
|
||||
| Linux (HoloOS) | `linux-x64` | `v1.6.0` | 2025-01-02 |
|
||||
| Linux (Debian) | `linux-arm` | `v1.6.0` | 2025-02-16 |
|
||||
|
||||
:::
|
||||
|
||||
0) Read Tauri "Getting Started" guide and install prerequisites.[^16]
|
||||
|
||||
<details>
|
||||
@ -386,15 +386,15 @@ If required dependencies are installed, the output will show a checkmark next to
|
||||
<span {...g}>[✔]</span> <span style={{...y.style,...B.style}}>Environment</span>
|
||||
{` `}<span {...c}>-</span> <span {...B}>OS</span>: Mac OS 14.5.0 arm64 (X64)
|
||||
{` `}<span {...g}>✔</span> <span {...B}>Xcode Command Line Tools</span>: installed
|
||||
{` `}<span {...g}>✔</span> <span {...B}>rustc</span>: 1.85.1 (4eb161250 2025-03-15)
|
||||
{` `}<span {...g}>✔</span> <span {...B}>cargo</span>: 1.85.1 (d73d2caf9 2024-12-31)
|
||||
{` `}<span {...g}>✔</span> <span {...B}>rustup</span>: 1.28.1 (f9edccde0 2025-03-05)
|
||||
{` `}<span {...g}>✔</span> <span {...B}>rustc</span>: 1.87.0 (17067e9ac 2025-05-09)
|
||||
{` `}<span {...g}>✔</span> <span {...B}>cargo</span>: 1.87.0 (99624be96 2025-05-06)
|
||||
{` `}<span {...g}>✔</span> <span {...B}>rustup</span>: 1.28.2 (e4f3ad6f8 2025-04-28)
|
||||
{` `}<span {...g}>✔</span> <span {...B}>Rust toolchain</span>: stable-aarch64-apple-darwin (default)
|
||||
{` `}<span {...c}>-</span> <span {...B}>node</span>: 20.18.0
|
||||
{` `}<span {...c}>-</span> <span {...B}>pnpm</span>: 9.12.3
|
||||
{` `}<span {...c}>-</span> <span {...B}>npm</span>: 10.8.2
|
||||
{` `}<span {...c}>-</span> <span {...B}>bun</span>: 1.2.7
|
||||
{` `}<span {...c}>-</span> <span {...B}>deno</span>: deno 2.2.6
|
||||
{` `}<span {...c}>-</span> <span {...B}>bun</span>: 1.2.14
|
||||
{` `}<span {...c}>-</span> <span {...B}>deno</span>: deno 2.3.3
|
||||
</pre>
|
||||
|
||||
:::caution pass
|
||||
@ -642,8 +642,9 @@ The following features should be manually verified:
|
||||
|
||||
- When it is loaded, the app will download https://docs.sheetjs.com/pres.numbers
|
||||
and display the data in a table.
|
||||
- Clicking "Save Data" will show a save dialog. After selecting a path and name,
|
||||
the app will write a file. That file can be opened in a spreadsheet editor.
|
||||
- Clicking "Save Data" will show a save dialog. If there is no filename, type
|
||||
`SheetJSTauri.xlsb`. Click "Save". The app will write a file which can be
|
||||
opened in a spreadsheet editor.
|
||||
- Edit the file in a spreadsheet editor, then click "Load Data" and select the
|
||||
edited file. The table will refresh with new contents.
|
||||
|
||||
|
@ -45,6 +45,24 @@ app to read and write workbooks. The app will look like the screenshots below:
|
||||
|
||||
</td></tr></tbody></table>
|
||||
|
||||
:::note Tested Deployments
|
||||
|
||||
This demo was tested in the following environments:
|
||||
|
||||
| OS and Version | Architecture | Server | Client | Date |
|
||||
|:---------------|:-------------|:---------|:---------|:-----------|
|
||||
| macOS 15.3.2 | `darwin-x64` | `6.0.0` | `6.0.0` | 2025-03-31 |
|
||||
| macOS 14.5 | `darwin-arm` | `6.0.0` | `6.0.0` | 2025-03-30 |
|
||||
| Windows 11 | `win11-x64` | `6.1.0` | `6.1.0` | 2025-05-27 |
|
||||
| Windows 11 | `win11-arm` | `5.6.0` | `5.6.0` | 2025-02-23 |
|
||||
| Linux (HoloOS) | `linux-x64` | `5.5.0` | `5.5.0` | 2025-01-02 |
|
||||
| Linux (Debian) | `linux-arm` | `5.6.0` | `5.6.0` | 2025-02-16 |
|
||||
|
||||
NeutralinoJS on Windows on ARM generates X64 binaries that run using the X64
|
||||
compatibility layer. The binaries are not native ARM64 programs!
|
||||
|
||||
:::
|
||||
|
||||
## Integration Details
|
||||
|
||||
The [SheetJS Standalone scripts](/docs/getting-started/installation/standalone)
|
||||
@ -186,24 +204,6 @@ const save_button_callback = async() => {
|
||||
|
||||
## Complete Example
|
||||
|
||||
:::note Tested Deployments
|
||||
|
||||
This demo was tested in the following environments:
|
||||
|
||||
| OS and Version | Architecture | Server | Client | Date |
|
||||
|:---------------|:-------------|:---------|:---------|:-----------|
|
||||
| macOS 15.3.2 | `darwin-x64` | `6.0.0` | `6.0.0` | 2025-03-31 |
|
||||
| macOS 14.5 | `darwin-arm` | `6.0.0` | `6.0.0` | 2025-03-30 |
|
||||
| Windows 11 | `win11-x64` | `5.5.0` | `5.5.0` | 2024-12-20 |
|
||||
| Windows 11 | `win11-arm` | `5.6.0` | `5.6.0` | 2025-02-23 |
|
||||
| Linux (HoloOS) | `linux-x64` | `5.5.0` | `5.5.0` | 2025-01-02 |
|
||||
| Linux (Debian) | `linux-arm` | `5.6.0` | `5.6.0` | 2025-02-16 |
|
||||
|
||||
NeutralinoJS on Windows on ARM generates X64 binaries that run using the X64
|
||||
compatibility layer. The binaries are not native ARM64 programs!
|
||||
|
||||
:::
|
||||
|
||||
The app core state will be the HTML table. Reading files will add the table to
|
||||
the window. Writing files will parse the table into a spreadsheet.
|
||||
|
||||
@ -247,6 +247,22 @@ subdirectory in the `sheetjs-neu` folder:
|
||||
curl -L -o resources/js/xlsx.full.min.js https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.full.min.js`}
|
||||
</CodeBlock>
|
||||
|
||||
:::note pass
|
||||
|
||||
In PowerShell, the command may fail with a parameter error:
|
||||
|
||||
```
|
||||
Invoke-WebRequest : A parameter cannot be found that matches parameter name 'L'.
|
||||
```
|
||||
|
||||
`curl.exe` must be invoked directly:
|
||||
|
||||
<CodeBlock language="bash">{`\
|
||||
curl.exe -L -o resources/js/xlsx.full.min.js https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.full.min.js`}
|
||||
</CodeBlock>
|
||||
|
||||
:::
|
||||
|
||||
3) Add the highlighted line to `neutralino.config.json` in `nativeAllowList`:
|
||||
|
||||
```json title="neutralino.config.json (add highlighted line)"
|
||||
|
@ -46,12 +46,12 @@ This demo was tested in the following environments:
|
||||
|
||||
| OS and Version | Architecture | RN Platform | Date |
|
||||
|:---------------|:-------------|:------------|:-----------|
|
||||
| Windows 11 C++ | `win11-x64` | `v0.75.11` | 2024-12-22 |
|
||||
| Windows 11 C# | `win11-x64` | `v0.75.11` | 2024-12-22 |
|
||||
| Windows 11 C++ | `win11-x64` | `v0.78.8` | 2025-06-08 |
|
||||
| Windows 11 C# | `win11-x64` | `v0.78.8` | 2025-06-08 |
|
||||
| Windows 11 C++ | `win11-arm` | `v0.77.2` | 2025-02-23 |
|
||||
| Windows 11 C# | `win11-arm` | `v0.77.2` | 2025-02-23 |
|
||||
| MacOS 15.3.2 | `darwin-x64` | `v0.76.7` | 2025-03-31 |
|
||||
| MacOS 14.5 | `darwin-arm` | `v0.75.16` | 2024-12-22 |
|
||||
| MacOS 14.5 | `darwin-arm` | `v0.78.3` | 2025-06-14 |
|
||||
|
||||
:::
|
||||
|
||||
@ -432,12 +432,12 @@ not a requirement for this demo.
|
||||
|
||||
### Project Setup
|
||||
|
||||
1) Create a new project using React Native `0.77.1`:
|
||||
1) Create a new project using React Native `0.78.2`:
|
||||
|
||||
```bash
|
||||
npx -y @react-native-community/cli@16 init SheetJSWin --version="0.77.1"
|
||||
npx -y @react-native-community/cli@15 init SheetJSWin --version="0.78.2"
|
||||
cd SheetJSWin
|
||||
npm install --save react-native-windows@0.77.2
|
||||
npm install --save react-native-windows@0.78.8
|
||||
```
|
||||
|
||||
:::info pass
|
||||
@ -500,7 +500,7 @@ npx react-native run-windows --no-telemetry
|
||||
|
||||
When the demo was tested in Windows 11, the run step failed with the message:
|
||||
|
||||
> The Windows SDK version `10.0.19041.0` was not found
|
||||
> The Windows SDK version `10.0.22621.0` was not found
|
||||
|
||||
Specific Windows SDK versions can be installed through Visual Studio Installer.
|
||||
|
||||
@ -530,6 +530,18 @@ When this demo was last tested on Windows 11 ARM, the build failed.
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
:::info pass
|
||||
|
||||
In PowerShell, the command will fail with `msbuild` errors:
|
||||
|
||||
```
|
||||
× Could not find MSBuild with VCTools for Visual Studio 17.11.0 or later. Make sure all required components have been installed
|
||||
```
|
||||
|
||||
**The commands must be run in a "Native Tools Command Prompt"!**
|
||||
|
||||
:::
|
||||
|
||||
### Native Module
|
||||
|
||||
<Tabs groupId="rnwlang">
|
||||
@ -546,7 +558,7 @@ iwr -Uri https://docs.sheetjs.com/reactnative/DocumentPicker.cs -OutFile windows
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
<TabItem value="bash" label="WSL Bash">
|
||||
<TabItem value="bash" label="WSL Bash / Command Prompt">
|
||||
|
||||
```bash
|
||||
curl -Lo windows/SheetJSWin/DocumentPicker.cs https://docs.sheetjs.com/reactnative/DocumentPicker.cs
|
||||
@ -583,7 +595,7 @@ iwr -Uri https://docs.sheetjs.com/reactnative/DocumentPicker.h -OutFile windows/
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
<TabItem value="bash" label="WSL Bash">
|
||||
<TabItem value="bash" label="WSL Bash / Command Prompt">
|
||||
|
||||
```bash
|
||||
curl -Lo windows/SheetJSWin/DocumentPicker.h https://docs.sheetjs.com/reactnative/DocumentPicker.h
|
||||
@ -619,7 +631,7 @@ iwr -Uri https://docs.sheetjs.com/reactnative/rnw/App.tsx -OutFile App.tsx
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
<TabItem value="bash" label="WSL Bash">
|
||||
<TabItem value="bash" label="WSL Bash / Command Prompt">
|
||||
|
||||
```bash
|
||||
rm App.js
|
||||
@ -680,10 +692,10 @@ select `pres.xlsx` . The app will refresh and display the data from the file.
|
||||
|
||||
### Project Setup
|
||||
|
||||
1) Create a new React Native project using React Native `0.76.8`:
|
||||
1) Create a new React Native project using React Native `0.78.2`:
|
||||
|
||||
```bash
|
||||
npx -y @react-native-community/cli init SheetJSmacOS --version 0.76.8
|
||||
npx -y @react-native-community/cli@15 init SheetJSmacOS --version 0.78.2
|
||||
cd SheetJSmacOS
|
||||
```
|
||||
|
||||
@ -1011,9 +1023,9 @@ If there are no instances, the app path can be found in the `DerivedData` folder
|
||||
find ~/Library/Developer/Xcode/DerivedData -name SheetJSmacOS.app | grep Release
|
||||
```
|
||||
|
||||
:::caution pass
|
||||
:::info pass
|
||||
|
||||
During the last test, `xcodebuild` failed. Scrolling through the log reveals:
|
||||
In an older test run, `xcodebuild` failed. Scrolling through the log reveals:
|
||||
|
||||
```
|
||||
Welcome to Metro v0.80.12
|
||||
|
@ -38,8 +38,8 @@ This demo was tested in the following deployments:
|
||||
| Architecture | Version | NodeJS | Source | Date |
|
||||
|:-------------|:---------------|:----------|:----------|:-----------|
|
||||
| `darwin-x64` | `5.0.0-beta.4` | `14.15.3` | Pre-built | 2025-04-21 |
|
||||
| `darwin-arm` | `4.0.0-rc.6` | `22.14.0` | Compiled | 2025-04-03 |
|
||||
| `win11-x64` | `4.0.0-rc.6` | `14.15.3` | Pre-built | 2024-12-19 |
|
||||
| `darwin-arm` | `5.0.0-beta.4` | `22.14.0` | Compiled | 2025-06-18 |
|
||||
| `win11-x64` | `5.0.0-beta.4` | `14.15.3` | Pre-built | 2025-05-07 |
|
||||
| `win11-arm` | `4.0.0-rc.6` | `22.14.0` | Compiled | 2025-02-23 |
|
||||
| `linux-x64` | `5.0.0-beta.4` | `14.15.3` | Pre-built | 2025-04-21 |
|
||||
| `linux-arm` | `4.0.0-rc.6` | `22.13.0` | Compiled | 2025-02-15 |
|
||||
|
@ -38,8 +38,8 @@ This demo was tested in the following deployments:
|
||||
| Architecture | Version | NodeJS | Date |
|
||||
|:-------------|:--------|:---------|:-----------|
|
||||
| `darwin-x64` | `5.8.1` | `18.5.0` | 2025-04-21 |
|
||||
| `darwin-arm` | `5.8.1` | `18.5.0` | 2025-02-13 |
|
||||
| `win11-x64` | `5.8.1` | `18.5.0` | 2024-12-19 |
|
||||
| `darwin-arm` | `5.8.1` | `18.5.0` | 2025-06-18 |
|
||||
| `win11-x64` | `5.8.1` | `18.5.0` | 2025-05-07 |
|
||||
| `win11-arm` | `5.8.1` | `18.5.0` | 2025-02-23 |
|
||||
| `linux-x64` | `5.8.1` | `18.5.0` | 2025-04-21 |
|
||||
| `linux-arm` | `5.8.1` | `18.5.0` | 2025-02-15 |
|
||||
@ -78,7 +78,7 @@ When this demo was last tested, `pkg` failed with an error referencing `node20`:
|
||||
> Error! No available node version satisfies 'node20'
|
||||
```
|
||||
|
||||
**`pkg` does not support NodeJS 20 or 22!**
|
||||
**`pkg` does not support NodeJS 20 or 22 or 24!**
|
||||
|
||||
The local NodeJS version must be rolled back to version 18.
|
||||
|
||||
|
@ -31,8 +31,8 @@ This demo was tested in the following deployments:
|
||||
| Architecture | Version | NodeJS | Date |
|
||||
|:-------------|:--------|:----------|:-----------|
|
||||
| `darwin-x64` | `2.4.4` | `23.11.0` | 2025-04-21 |
|
||||
| `darwin-arm` | `2.4.4` | `22.14.0` | 2025-04-03 |
|
||||
| `win11-x64` | `2.4.4` | `16.20.2` | 2024-12-19 |
|
||||
| `darwin-arm` | `2.4.4` | `23.11.0` | 2025-06-18 |
|
||||
| `win11-x64` | `2.4.4` | `16.20.2` | 2025-05-07 |
|
||||
| `linux-x64` | `2.4.4` | `23.11.0` | 2025-04-21 |
|
||||
| `linux-arm` | `2.4.4` | `23.8.0` | 2025-02-15 |
|
||||
|
||||
@ -136,7 +136,7 @@ workload, Python 3.11, and NASM[^2].
|
||||
|
||||
:::caution pass
|
||||
|
||||
When the demo was last tested, the build failed:
|
||||
In some test runs, the build failed:
|
||||
|
||||
```
|
||||
Not an executable Python program
|
||||
@ -168,8 +168,11 @@ When the demo was last tested on Windows, the build failed:
|
||||
error MSB8020: The build tools for Visual Studio 2019 (Platform Toolset = 'v142') cannot be found. To build using the v142 build tools, please install Visual Studio 2019 build tools.
|
||||
```
|
||||
|
||||
This error was fixed by installing the `v142` build tools through the Visual
|
||||
Studio installer.
|
||||
This error was fixed by installing the following components from Visual Studio:
|
||||
|
||||
- `C++/CLI support for v142 build tools`
|
||||
- `MSVC v142 - VS 2019 - C++ x64/x86 build tools`
|
||||
- `MSVC v142 - VS 2019 - C++ x64/x86 Spectre-mitigated libs`
|
||||
|
||||
:::
|
||||
|
||||
|
@ -159,10 +159,10 @@ This demo was tested in the following deployments:
|
||||
| Architecture | NodeJS | Date |
|
||||
|:-------------|:----------|:-----------|
|
||||
| `darwin-x64` | `22.14.0` | 2025-04-21 |
|
||||
| `darwin-arm` | `23.8.0` | 2025-02-16 |
|
||||
| `win11-x64` | `22.13.0` | 2025-01-19 |
|
||||
| `darwin-arm` | `24.2.0` | 2025-06-18 |
|
||||
| `win11-x64` | `24.2.0` | 2025-06-17 |
|
||||
| `win11-arm` | `22.14.0` | 2025-02-23 |
|
||||
| `linux-x64` | `22.12.0` | 2025-01-02 |
|
||||
| `linux-x64` | `24.2.0` | 2025-06-16 |
|
||||
| `linux-arm` | `22.13.0` | 2025-02-16 |
|
||||
|
||||
:::
|
||||
|
@ -80,10 +80,10 @@ This demo was last tested in the following deployments:
|
||||
| Architecture | BunJS | Date |
|
||||
|:-------------|:---------|:-----------|
|
||||
| `darwin-x64` | `1.2.10` | 2025-04-21 |
|
||||
| `darwin-arm` | `1.2.8` | 2025-04-03 |
|
||||
| `win11-x64` | `1.1.40` | 2024-12-19 |
|
||||
| `darwin-arm` | `1.2.16` | 2025-06-18 |
|
||||
| `win11-x64` | `1.2.13` | 2025-05-07 |
|
||||
| `win11-arm` | `1.2.3` | 2025-02-23 |
|
||||
| `linux-x64` | `1.1.43` | 2025-01-10 |
|
||||
| `linux-x64` | `1.2.16` | 2025-06-16 |
|
||||
| `linux-arm` | `1.2.2` | 2025-02-16 |
|
||||
|
||||
:::
|
||||
|
@ -103,10 +103,10 @@ This demo was last tested in the following deployments:
|
||||
| Architecture | Deno | Date |
|
||||
|:-------------|:---------|:-----------|
|
||||
| `darwin-x64` | `2.2.11` | 2025-04-21 |
|
||||
| `darwin-arm` | `2.1.10` | 2025-02-13 |
|
||||
| `win11-x64` | `2.1.6` | 2025-01-19 |
|
||||
| `darwin-arm` | `2.3.6` | 2025-06-18 |
|
||||
| `win11-x64` | `2.3.6` | 2025-06-17 |
|
||||
| `win11-arm` | `2.2.1` | 2025-02-23 |
|
||||
| `linux-x64` | `2.1.4` | 2025-01-02 |
|
||||
| `linux-x64` | `2.3.6` | 2025-06-16 |
|
||||
| `linux-arm` | `2.1.10` | 2025-02-15 |
|
||||
|
||||
:::
|
||||
|
@ -4,7 +4,7 @@ sidebar_label: txiki.js
|
||||
pagination_prev: demos/desktop/index
|
||||
pagination_next: demos/data/index
|
||||
sidebar_custom_props:
|
||||
summary: Compiled apps powered by QuickJS and txiki.js
|
||||
summary: Compiled apps powered by QuickJS and txiki.js
|
||||
---
|
||||
|
||||
import current from '/version.js';
|
||||
|
@ -12,7 +12,7 @@ import CodeBlock from '@theme/CodeBlock';
|
||||
|
||||
[MongoDB](https://mongodb.github.io/node-mongodb-native/) is a document-oriented
|
||||
database engine. [FerretDB](https://www.ferretdb.com/) is a truly open source
|
||||
implementation of the MongoDB wire protocol
|
||||
implementation of the MongoDB wire protocol.
|
||||
|
||||
[SheetJS](https://sheetjs.com) is a JavaScript library for reading and writing
|
||||
data from spreadsheets.
|
||||
|
@ -228,7 +228,7 @@ order of todo items in the export matches the list displayed in the webpage.
|
||||
5) Start a local web server:
|
||||
|
||||
```bash
|
||||
npx http-server .
|
||||
npx -y http-server .
|
||||
```
|
||||
|
||||
The command will display a URL (typically `http://localhost:8080`) which can be
|
||||
|
@ -11,8 +11,10 @@ simple key-value stores that only support string values and keys.
|
||||
|
||||
This demo covers two common use patterns:
|
||||
|
||||
- "Row Objects" shows a simple convention for loading and storing row objects
|
||||
- "Simple Strings" discusses how to persist and recover a raw Storage
|
||||
- ["Row Objects"](#row-objects) shows a simple convention for loading and
|
||||
storing row objects.
|
||||
- ["Simple Strings"](#simple-strings) discusses how to persist and recover keys
|
||||
and string values.
|
||||
|
||||
:::note Tested Deployments
|
||||
|
||||
@ -20,8 +22,8 @@ Each browser demo was tested in the following environments:
|
||||
|
||||
| Browser | Date |
|
||||
|:-------------|:-----------|
|
||||
| Chromium 131 | 2024-12-23 |
|
||||
| Safari 18.2 | 2024-12-31 |
|
||||
| Chromium 136 | 2025-05-21 |
|
||||
| Safari 18.2 | 2025-05-21 |
|
||||
| Konqueror 22 | 2025-04-23 |
|
||||
|
||||
:::
|
||||
@ -49,10 +51,13 @@ strings using `JSON.stringify` and store using the row index as a key:
|
||||
|
||||
#### Importing Data
|
||||
|
||||
Starting from a worksheet, the SheetJS `sheet_to_json` method[^1] generates an
|
||||
array of row objects. `localStorage.setItem` will store data in Local Storage:
|
||||
`localStorage.setItem` will store data in Local Storage.
|
||||
|
||||
```js
|
||||
Starting from a worksheet, the SheetJS `sheet_to_json` method[^1] generates an
|
||||
array of row objects. Each object in the array can be saved in the Local Storage
|
||||
using the row index as the key.
|
||||
|
||||
```js title="Store a SheetJS worksheet in Local Storage"
|
||||
function sheet_to_localStorage(worksheet) {
|
||||
const aoo = XLSX.utils.sheet_to_json(worksheet);
|
||||
for(let i = 0; i < aoo.length; ++i) {
|
||||
@ -96,7 +101,7 @@ function localStorage_to_array_of_objects() {
|
||||
The SheetJS `json_to_sheet`[^2] method will create a new worksheet from the
|
||||
array of objects:
|
||||
|
||||
```js
|
||||
```js title="Generate a SheetJS worksheet from records in Local Storage "
|
||||
function localStorage_to_sheet() {
|
||||
const aoo = [];
|
||||
for(let i = 0; i < localStorage.length; ++i) {
|
||||
@ -118,8 +123,8 @@ After saving the exported file, the Local Storage can be inspected in the
|
||||
|
||||
:::caution pass
|
||||
|
||||
This example is for illustration purposes. If array of objects is available, it
|
||||
is strongly recommended to convert that array to a worksheet directly.
|
||||
This example is for illustration purposes. If an array of objects is available,
|
||||
it is strongly recommended to convert that array to a worksheet directly.
|
||||
|
||||
:::
|
||||
|
||||
@ -203,7 +208,7 @@ In modern browsers, `Object.entries` will generate an array of key/value pairs.
|
||||
The SheetJS `aoa_to_sheet`[^3] method will interpret that array as a worksheet
|
||||
with 2 columns (key and value):
|
||||
|
||||
```js
|
||||
```js title="Generate a SheetJS two-column worksheet from Local Storage"
|
||||
function localStorage_to_ws() {
|
||||
const aoa = Object.entries(localStorage);
|
||||
return XLSX.utils.aoa_to_sheet(aoa);
|
||||
@ -216,7 +221,7 @@ In the other direction, the worksheet is assumed to store keys in column A and
|
||||
values in column B. The SheetJS `sheet_to_json`[^1] method, with the option
|
||||
`header: 1`, will generate key/value pairs that can be assigned to a storage:
|
||||
|
||||
```js
|
||||
```js title="Store a SheetJS two-column worksheet in Local Storage"
|
||||
function ws_to_localStorage(ws) {
|
||||
const aoa = XLSX.utils.sheet_to_json(ws, { header: 1 });
|
||||
aoa.forEach(([key, val]) => localStorage.setItem(key, val));
|
||||
|
@ -8,7 +8,7 @@ sidebar_custom_props:
|
||||
|
||||
<head>
|
||||
<script type="text/javascript" src="https://unpkg.com/localforage@1.10.0/dist/localforage.min.js"></script>
|
||||
<script type="text/javascript" src="https://unpkg.com/dexie@4.0.10/dist/dexie.js"></script>
|
||||
<script type="text/javascript" src="https://unpkg.com/dexie@4.0.11/dist/dexie.js"></script>
|
||||
</head>
|
||||
|
||||
:::danger pass
|
||||
@ -43,8 +43,8 @@ This demo was last tested in the following environments:
|
||||
|
||||
| Browser | Date | `localForage` |
|
||||
|:-------------|:-----------|:--------------|
|
||||
| Chromium 131 | 2024-12-31 | `1.10.0` |
|
||||
| Safari 18.2 | 2024-12-31 | `1.10.0` |
|
||||
| Chromium 136 | 2025-05-21 | `1.10.0` |
|
||||
| Safari 18.2 | 2025-05-21 | `1.10.0` |
|
||||
| Konqueror 22 | 2025-04-23 | `1.10.0` |
|
||||
|
||||
:::
|
||||
@ -116,8 +116,8 @@ This demo was last tested in the following environments:
|
||||
|
||||
| Browser | Date | DexieJS |
|
||||
|:-------------|:-----------|:---------|
|
||||
| Chromium 131 | 2024-12-31 | `4.0.10` |
|
||||
| Safari 18.2 | 2024-12-31 | `4.0.10` |
|
||||
| Chromium 136 | 2025-05-21 | `4.0.11` |
|
||||
| Safari 18.2 | 2025-05-21 | `4.0.11` |
|
||||
| Konqueror 22 | 2025-04-23 | `4.0.10` |
|
||||
|
||||
:::
|
||||
|
@ -33,7 +33,7 @@ This demo was tested in the following deployments:
|
||||
|
||||
| Lightning API | Date |
|
||||
|:--------------|:-----------|
|
||||
| `61.0` | 2024-10-06 |
|
||||
| `62.0` | 2025-05-27 |
|
||||
|
||||
:::
|
||||
|
||||
@ -331,7 +331,7 @@ npx @salesforce/cli --version
|
||||
When the demo was last tested, the command printed
|
||||
|
||||
```
|
||||
@salesforce/cli/2.60.13 darwin-arm64 node-v20.18.0
|
||||
@salesforce/cli/2.89.8 win32-x64 node-v24.1.0
|
||||
```
|
||||
|
||||
:::
|
||||
@ -380,7 +380,7 @@ with the following XML:
|
||||
```xml title="force-app\main\default\lwc\sheetComponent\sheetComponent.js-meta.xml (replace highlighted lines)"
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
|
||||
<apiVersion>61.0</apiVersion>
|
||||
<apiVersion>62.0</apiVersion>
|
||||
<!-- highlight-start -->
|
||||
<isExposed>true</isExposed>
|
||||
<masterLabel>SheetForce</masterLabel>
|
||||
@ -412,7 +412,7 @@ A) In the Salesforce site, click on the gear icon in the top-right corner of the
|
||||
page and select "Setup" (Setup for current app).
|
||||
|
||||
B) Type "Custom Code" in the left sidebar search box. Expand "Custom Code",
|
||||
expand "Lightning Components" and click "Lightning Components".
|
||||
expand "Lightning Components" and click the inner "Lightning Components".
|
||||
|
||||
:::caution pass
|
||||
|
||||
@ -430,8 +430,8 @@ Click the link to open the page in Salesforce Classic.
|
||||
|
||||
A) Click the "Setup" link in the top-right corner of the page.
|
||||
|
||||
B) Type "Lightning" in the left sidebar search box. Expand "Develop", expand
|
||||
"Lightning Components" and click "Lightning Components".
|
||||
B) Type "Custom Code" in the left sidebar search box. In the section, expand
|
||||
"Lightning Components" and click the inner "Lightning Components".
|
||||
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
@ -505,7 +505,8 @@ When the "Page Saved" modal is displayed, click "Activate".
|
||||
|
||||
The following options should be set:
|
||||
- Click "Change..." next to "Icon" and pick a memorable icon
|
||||
- Under "Lightning Experience" click "LightningBolt" then "Add page to app"
|
||||
- Under "Lightning Experience" select "LightningBolt" in the left column and
|
||||
click "Add page to app" in the right side
|
||||
|
||||
Click "Save" to activate the page.
|
||||
|
||||
|
@ -24,10 +24,10 @@ This demo was verified by NetSuite consultants in the following deployments:
|
||||
|
||||
| `@NScriptType` | `@NApiVersion` | Date |
|
||||
|:----------------|:---------------|:-----------|
|
||||
| ScheduledScript | 2.1 | 2024-12-06 |
|
||||
| Restlet | 2.1 | 2024-12-06 |
|
||||
| Suitelet | 2.1 | 2024-12-06 |
|
||||
| MapReduceScript | 2.1 | 2024-12-06 |
|
||||
| ScheduledScript | 2.1 | 2025-06-08 |
|
||||
| Restlet | 2.1 | 2025-06-08 |
|
||||
| Suitelet | 2.1 | 2025-06-08 |
|
||||
| MapReduceScript | 2.1 | 2025-06-08 |
|
||||
|
||||
:::
|
||||
|
||||
|
@ -35,7 +35,7 @@ will be available in the future.
|
||||
|
||||
:::note Tested Deployments
|
||||
|
||||
This demo was last tested on 2024-06-12.
|
||||
This demo was last tested on 2025-05-11.
|
||||
|
||||
:::
|
||||
|
||||
@ -59,7 +59,8 @@ Azure Functions Core Tools (`func`) telemetry is controlled through the
|
||||
<Tabs groupId="os">
|
||||
<TabItem value="unix" label="Linux/MacOS">
|
||||
|
||||
Add the following line to `.profile`, `.bashrc` and `.zshrc`:
|
||||
Add the following line to `.profile`, `.bash_profile`, `.bashrc`, `.zprofile`,
|
||||
`.zshrc`, and any other configuration files:
|
||||
|
||||
```bash
|
||||
export FUNCTIONS_CORE_TOOLS_TELEMETRY_OPTOUT=1
|
||||
@ -131,7 +132,7 @@ Uploaded files can be pulled into `ArrayBuffer` objects.
|
||||
|
||||
This function returns a promise that resolves to an `ArrayBuffer` object:
|
||||
|
||||
```js
|
||||
```js title="Get raw data from an uploaded file"
|
||||
const { Blob } = require('buffer');
|
||||
|
||||
async function get_file_from_request(request, form_field_name) {
|
||||
@ -158,7 +159,7 @@ SheetJS workbook objects[^3] which can be processed with other API functions.
|
||||
For example, a handler can use `sheet_to_csv`[^4] to generate CSV text from
|
||||
user-submitted spreadsheets:
|
||||
|
||||
```js
|
||||
```js title="Function that reads uploaded workbooks and converts to CSV"
|
||||
const { Blob } = require('buffer');
|
||||
const { app } = require('@azure/functions');
|
||||
const XLSX = require('xlsx');
|
||||
@ -194,7 +195,7 @@ The following example generates a sample worksheet using the `aoa_to_sheet`[^6]
|
||||
method, generates a sample workbook using worksheet helper methods[^7], writes
|
||||
the workbook to XLSX format in a Buffer, and sends the Buffer in the response:
|
||||
|
||||
```js
|
||||
```js title="Function that exports data and initiates a download to XLSX"
|
||||
const { app } = require('@azure/functions');
|
||||
const XLSX = require('xlsx');
|
||||
|
||||
@ -299,10 +300,20 @@ Until the bugs are resolved, JavaScript should be preferred over TypeScript.
|
||||
npm start
|
||||
```
|
||||
|
||||
7) While the server is running, open a new terminal window and make a request:
|
||||
The process will display the functions and respective URLs:
|
||||
|
||||
```text title="Expected output"
|
||||
Functions:
|
||||
|
||||
SheetJSAzure: [GET,POST] http://localhost:7071/api/SheetJSAzure
|
||||
(access this URL)------^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
|
||||
```
|
||||
|
||||
7) While the server is running, open a new terminal window and make a GET
|
||||
request to the URL listed in the previous step:
|
||||
|
||||
```bash
|
||||
curl -L http://localhost:7071/api/SheetJSAzure
|
||||
curl http://localhost:7071/api/SheetJSAzure
|
||||
```
|
||||
|
||||
The terminal should display `Hello, world!`
|
||||
@ -333,7 +344,7 @@ npm start
|
||||
make a POST request to the dev server:
|
||||
|
||||
```bash
|
||||
curl -LO https://docs.sheetjs.com/pres.numbers
|
||||
curl -o pres.numbers https://docs.sheetjs.com/pres.numbers
|
||||
curl -X POST -F "upload=@pres.numbers" http://localhost:7071/api/SheetJSAzure
|
||||
```
|
||||
|
||||
@ -354,19 +365,20 @@ Open in Excel or another spreadsheet editor to confirm the file is valid.
|
||||
|
||||
15) Click "+ Create"
|
||||
|
||||
16) Select the following options:
|
||||
16) In the "Create Function App" screen, click "Consumption" and click "Select".
|
||||
|
||||
- "Select a hosting option": "Consumption"
|
||||
17) In the next screen, select the following options:
|
||||
|
||||
- Type a memorable "Function Name" ("sheetjsazure" when last tested)
|
||||
- Look for the "Function App name" input field and type a memorable function
|
||||
name. When this demo was last tested, the name "sheetjsazure" was chosen.
|
||||
|
||||
- "Operating System": "Windows"
|
||||
|
||||
- "Runtime stack": select `Node.js`
|
||||
|
||||
17) Click "Review + create", then click "Create" to create the function.
|
||||
18) Click "Review + create", then click "Create" to create the function.
|
||||
|
||||
The page will display a status message
|
||||
The page will redirect to a new page. It will display a status message:
|
||||
|
||||
> ... Deployment is in progress
|
||||
|
||||
@ -374,21 +386,19 @@ When the resources are configured, the status will change to
|
||||
|
||||
> Your deployment is complete
|
||||
|
||||
18) Click "Go to Resource".
|
||||
|
||||
19) Take note of the URL from the "Essentials" table.
|
||||
19) Click "Go to Resource".
|
||||
|
||||
#### Deploy to Azure
|
||||
|
||||
20) Sign into Azure:
|
||||
20) Sign into Azure from the command line:
|
||||
|
||||
```
|
||||
```bash
|
||||
az login
|
||||
```
|
||||
|
||||
The login flow resumes in the browser.
|
||||
|
||||
21) Deploy to Azure. Replace `FUNCTION_NAME` with the name from Step 16:
|
||||
21) Deploy to Azure. Replace `FUNCTION_NAME` with the name from Step 17:
|
||||
|
||||
```bash
|
||||
func azure functionapp publish FUNCTION_NAME
|
||||
@ -429,7 +439,7 @@ make a POST request to the production server. Replace `FUNCTION_URL` with the
|
||||
Invoke URL from Step 21:
|
||||
|
||||
```bash
|
||||
curl -LO https://docs.sheetjs.com/pres.numbers
|
||||
curl -o pres.numbers https://docs.sheetjs.com/pres.numbers
|
||||
curl -X POST -F "upload=@pres.numbers" FUNCTION_URL
|
||||
```
|
||||
|
||||
@ -546,9 +556,9 @@ requests and 2000 write requests per month.
|
||||
|
||||
- "Redundancy": select LRS (Locally-redundant storage)
|
||||
|
||||
5) Click "Review", then click "Create" to create the storage.
|
||||
5) Click "Review + create", then click "Create" to create the storage.
|
||||
|
||||
The page will display a status message
|
||||
The page will redirect to a new page. It will display a status message:
|
||||
|
||||
> ... Deployment is in progress
|
||||
|
||||
@ -596,11 +606,64 @@ npm init -y
|
||||
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz @azure/storage-blob`}
|
||||
</CodeBlock>
|
||||
|
||||
14) Copy the [`SheetJSReadFromAzure.mjs` code block](#downloading-data) and save
|
||||
to `SheetJSReadFromAzure.mjs`.
|
||||
14) Save the following codeblock to `SheetJSReadFromAzure.mjs`:
|
||||
|
||||
15) Copy the [`SheetJSWriteToAzure.mjs` code block](#uploading-data) and save
|
||||
to `SheetJSWriteToAzure.mjs`.
|
||||
```js title="SheetJSReadFromAzure.mjs"
|
||||
import { BlobServiceClient } from "@azure/storage-blob";
|
||||
import { read, utils } from "xlsx";
|
||||
|
||||
/* replace these constants */
|
||||
// highlight-start
|
||||
const connStr = "<REPLACE WITH CONNECTION STRING>";
|
||||
const containerName = "<REPLACE WITH CONTAINER NAME>";
|
||||
// highlight-end
|
||||
|
||||
/* Blob name */
|
||||
const blobName = "SheetJSBloblobber.xlsx";
|
||||
|
||||
/* get a readable stream*/
|
||||
const blobServiceClient = BlobServiceClient.fromConnectionString(connStr);
|
||||
const containerClient = blobServiceClient.getContainerClient(containerName);
|
||||
const blobClient = containerClient.getBlobClient(blobName);
|
||||
const response = (await blobClient.download()).readableStreamBody;
|
||||
|
||||
/* collect data into a Buffer */
|
||||
const bufs = [];
|
||||
for await(const buf of response) bufs.push(buf);
|
||||
const downloaded = Buffer.concat(bufs);
|
||||
|
||||
/* parse downloaded buffer */
|
||||
const wb = read(downloaded);
|
||||
/* print first worksheet */
|
||||
console.log(utils.sheet_to_csv(wb.Sheets[wb.SheetNames[0]]));
|
||||
```
|
||||
|
||||
15) Save the following codeblock to `SheetJSWriteToAzure.mjs`:
|
||||
|
||||
```js title="SheetJSWriteToAzure.mjs"
|
||||
import { BlobServiceClient } from "@azure/storage-blob";
|
||||
import { write, utils } from "xlsx";
|
||||
|
||||
/* replace these constants */
|
||||
// highlight-start
|
||||
const connStr = "<REPLACE WITH CONNECTION STRING>";
|
||||
const containerName = "<REPLACE WITH CONTAINER NAME>";
|
||||
// highlight-end
|
||||
|
||||
/* Blob name */
|
||||
const blobName = "SheetJSBloblobber.xlsx";
|
||||
|
||||
/* Create a simple workbook and write XLSX to buffer */
|
||||
const ws = utils.aoa_to_sheet(["SheetJS".split(""), [5,4,3,3,7,9,5]]);
|
||||
const wb = utils.book_new(); utils.book_append_sheet(wb, ws, "Sheet1");
|
||||
const buf = write(wb, {type: "buffer", bookType: "xlsx"});
|
||||
|
||||
/* upload buffer */
|
||||
const blobServiceClient = BlobServiceClient.fromConnectionString(connStr);
|
||||
const containerClient = blobServiceClient.getContainerClient(containerName);
|
||||
const blockBlobClient = containerClient.getBlockBlobClient(blobName);
|
||||
const uploadBlobResponse = await blockBlobClient.upload(buf, buf.length);
|
||||
```
|
||||
|
||||
16) Edit both `SheetJSReadFromAzure.mjs` and `SheetJSWriteToAzure.mjs`:
|
||||
|
||||
@ -616,7 +679,7 @@ the buffer to a file named `SheetJSBloblobber.xlsx` on Azure Blob Storage.
|
||||
|
||||
The read demo fetches `SheetJSBloblobber.xlsx` and displays the data.
|
||||
|
||||
```
|
||||
```text title="Data in SheetJSBloblobber.xlsx"
|
||||
| A | B | C | D | E | F | G |
|
||||
---+---|---|---|---|---|---|---|
|
||||
1 | S | h | e | e | t | J | S |
|
||||
@ -641,7 +704,7 @@ node SheetJSReadFromAzure.mjs
|
||||
|
||||
It will fetch the file created in the previous step and display CSV rows.
|
||||
|
||||
```
|
||||
```text title="Expected output"
|
||||
S,h,e,e,t,J,S
|
||||
5,4,3,3,7,9,5
|
||||
```
|
||||
|
@ -111,6 +111,7 @@ const jwt = new google.auth.JWT({
|
||||
key: creds.private_key,
|
||||
scopes: [
|
||||
'https://www.googleapis.com/auth/spreadsheets', // Google Sheets
|
||||
'https://www.googleapis.com/auth/drive', // Google Drive
|
||||
'https://www.googleapis.com/auth/drive.file', // Google Drive
|
||||
]
|
||||
});
|
||||
@ -495,7 +496,7 @@ At this point `wb` is a SheetJS workbook object[^10].
|
||||
|
||||
:::note Tested Deployments
|
||||
|
||||
This demo was last tested on 2024-06-08 using `googleapis` version `140.0.0`.
|
||||
This demo was last tested on 2025-05-14 using `googleapis` version `148.0.0`.
|
||||
The demo uses Sheets v4 and Drive v3 APIs.
|
||||
|
||||
:::
|
||||
@ -551,10 +552,10 @@ be a selection box. Click the `▼` icon to show the modal.
|
||||
|
||||
If the selection box is missing, expand the browser window.
|
||||
|
||||
3) Click "NEW PROJECT" in the top right corner of the modal.
|
||||
3) Click "New project" in the top right corner of the modal.
|
||||
|
||||
4) In the New Project screen, enter "SheetJS Test" in the Project name textbox
|
||||
and select "No organization" in the Location box. Click "CREATE".
|
||||
and select "No organization" in the Location box. Click "Create".
|
||||
|
||||
A notification will confirm that the project was created:
|
||||
|
||||
@ -569,14 +570,13 @@ The goal of this section is to enable Google Sheets API and Google Drive API.
|
||||
|
||||
:::
|
||||
|
||||
5) Open the Project Selector (`▼` icon) and select "SheetJS Test"
|
||||
5) Click "Select a project" and select "SheetJS Test" from the Recent tab.
|
||||
|
||||
6) In the search bar, type "Enabled" and select "Enabled APIs & services". This
|
||||
item will be in the "PRODUCTS & PAGES" part of the search results.
|
||||
6) In the search bar, type "Enabled" and select "Enabled APIs & services".
|
||||
|
||||
#### Enable Google Sheets API
|
||||
|
||||
7) Near the top of the page, click "+ ENABLE APIS AND SERVICES".
|
||||
7) Near the top of the page, click "+ Enable APIs and services".
|
||||
|
||||
8) In the search bar near the middle of the page (not the search bar at the top),
|
||||
type "Sheets" and press <kbd>Enter</kbd>.
|
||||
@ -585,11 +585,11 @@ In the results page, look for "Google Sheets API". Click the card
|
||||
|
||||
9) In the Product Details screen, click the blue "ENABLE" button.
|
||||
|
||||
10) Click the left arrow (`<-`) next to "API/Service details".
|
||||
10) Click the left arrow (`<-`) next to "API/Service Details".
|
||||
|
||||
#### Enable Google Drive API
|
||||
|
||||
11) Near the top of the page, click "+ ENABLE APIS AND SERVICES".
|
||||
11) Near the top of the page, click "+ Enable APIs and services".
|
||||
|
||||
12) In the search bar near the middle of the page (not the search bar at the top),
|
||||
type "Drive" and press <kbd>Enter</kbd>.
|
||||
@ -614,13 +614,13 @@ the top bar.
|
||||
15) Click the Project Selector (`:·` icon) and select "SheetJS Test".
|
||||
|
||||
16) In the search bar, type "Credentials" and select the "Credentials" item with
|
||||
subtitle "APIs & Services". This item will be in the "PRODUCTS & PAGES" group:
|
||||
subtitle "APIs & Services":
|
||||
|
||||

|
||||
|
||||
17) Click "+ CREATE CREDENTIALS". In the dropdown, select "Service Account"
|
||||
17) Click "+ Create credentials". In the dropdown, select "Service account"
|
||||
|
||||
18) Enter "SheetJService" for Service account name. Click "CREATE AND CONTINUE"
|
||||
18) Enter "SheetJService" for Service account name. Click "Create and continue".
|
||||
|
||||
:::note pass
|
||||
|
||||
@ -628,24 +628,24 @@ The Service account ID is generated automatically.
|
||||
|
||||
:::
|
||||
|
||||
19) In Step 2 "Grant this service account access to project", click CONTINUE
|
||||
19) In Step 2 "Grant this service account access to project", click Continue.
|
||||
|
||||
20) In Step 3 click "DONE". You will be taken back to the credentials screen
|
||||
20) In Step 3 click "Done". You will be taken back to the credentials screen
|
||||
|
||||
#### Create JSON Key
|
||||
|
||||
21) Look for "SheetJService" in the "Service Accounts" table and click the email
|
||||
address in the row.
|
||||
|
||||
22) Click "KEYS" in the horizontal bar near the top of the page.
|
||||
22) Click "Keys" in the horizontal bar near the top of the page.
|
||||
|
||||
23) Click "ADD KEY" and select "Create new key" in the dropdown.
|
||||
23) Click "Add key" and select "Create new key" in the dropdown.
|
||||
|
||||
24) In the popup, select the "JSON" radio button and click "CREATE".
|
||||
24) In the popup, select the "JSON" radio button and click "Create".
|
||||
|
||||
The page will download a JSON file. If prompted, allow the download.
|
||||
|
||||
25) Click "CLOSE"
|
||||
25) Click "Close"
|
||||
|
||||
### Create Document
|
||||
|
||||
@ -675,7 +675,7 @@ npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz googlea
|
||||
29) Download [`init.mjs`](pathname:///gsheet/init.mjs):
|
||||
|
||||
```bash
|
||||
curl -LO https://docs.sheetjs.com/gsheet/init.mjs
|
||||
curl -o init.mjs https://docs.sheetjs.com/gsheet/init.mjs
|
||||
```
|
||||
|
||||
Edit the marked lines near the top of the file:
|
||||
@ -713,11 +713,12 @@ Shared a-long-string-of-characters with YOUR_ACCOUNT@gmail.com
|
||||
The long string of characters after "Created Google Workbook" is the ID. Take
|
||||
note of this ID.
|
||||
|
||||
31) Sign into Google Sheets. A shared document "SheetJS Test" should be
|
||||
displayed in the table. It will be owned by the service account.
|
||||
31) Sign into Google Drive and select "Shared with me" from the left sidebar. A
|
||||
shared document "SheetJS Test" should be displayed in the table. It will be
|
||||
owned by the service account.
|
||||
|
||||
32) Open the shared document from step 31 and confirm that the document has two
|
||||
worksheets named "SheetJS1" and "SheetJS2".
|
||||
32) Click `⋮` next to "SheetJS Test" and select "Open with" > "Google Sheets".
|
||||
Confirm that the document has two worksheets named "SheetJS1" and "SheetJS2".
|
||||
|
||||
Confirm the worksheet data matches the following screenshots:
|
||||
|
||||
@ -786,13 +787,13 @@ NUMBERS file.
|
||||
34) Download the [test file `pres.numbers`](https://docs.sheetjs.com/pres.numbers):
|
||||
|
||||
```bash
|
||||
curl -LO https://docs.sheetjs.com/pres.numbers
|
||||
curl -o pres.numbers https://docs.sheetjs.com/pres.numbers
|
||||
```
|
||||
|
||||
35) Download [`load.mjs`](pathname:///gsheet/load.mjs):
|
||||
|
||||
```bash
|
||||
curl -LO https://docs.sheetjs.com/gsheet/load.mjs
|
||||
curl -o load.mjs https://docs.sheetjs.com/gsheet/load.mjs
|
||||
```
|
||||
|
||||
Edit the marked lines near the top of the file:
|
||||
@ -830,7 +831,7 @@ The goal of this section is to export the raw data from Google Sheets to XLSB.
|
||||
38) Download [`dump.mjs`](pathname:///gsheet/dump.mjs):
|
||||
|
||||
```bash
|
||||
curl -LO https://docs.sheetjs.com/gsheet/dump.mjs
|
||||
curl -o dump.mjs https://docs.sheetjs.com/gsheet/dump.mjs
|
||||
```
|
||||
|
||||
Edit the marked lines near the top of the file:
|
||||
@ -876,7 +877,7 @@ assign a grid of values
|
||||
43) Download [`raw.mjs`](pathname:///gsheet/raw.mjs):
|
||||
|
||||
```bash
|
||||
curl -LO https://docs.sheetjs.com/gsheet/raw.mjs
|
||||
curl -o raw.mjs https://docs.sheetjs.com/gsheet/raw.mjs
|
||||
```
|
||||
|
||||
Edit the marked lines near the top of the file:
|
||||
|
@ -266,7 +266,7 @@ function SheetJSEnregistrez() {
|
||||
|
||||
:::note Tested Deployments
|
||||
|
||||
This demo was last tested on 2024-05-27.
|
||||
This demo was last tested on 2025-05-14.
|
||||
|
||||
:::
|
||||
|
||||
|
@ -41,7 +41,7 @@ This demo was tested in the following deployments:
|
||||
|:---------------|:-------------|:-----------|:-----------|
|
||||
| macOS 15.3 | `darwin-x64` | 16.95.4 | 2025-04-17 |
|
||||
| macOS 14.5 | `darwin-arm` | 16.96.1 | 2025-04-24 |
|
||||
| Windows 11 | `win11-x64` | 365 (2501) | 2025-01-19 |
|
||||
| Windows 11 | `win11-x64` | 365 (2506) | 2025-06-17 |
|
||||
| Windows 11 | `win11-arm` | 365 (2503) | 2025-04-24 |
|
||||
|
||||
:::
|
||||
@ -299,7 +299,7 @@ npm run stop
|
||||
npm start
|
||||
```
|
||||
|
||||
4) Activate the Task Pane for the addin (click "Show Task Pane" in the ribbon).
|
||||
4) Activate the Task Pane for the addin (click "Show Task Pane" in the ribbon).
|
||||
|
||||
5) Hover near the top-right corner of the addin and click the `i` icon.
|
||||
|
||||
|
@ -37,9 +37,9 @@ remote file, parses the contents, and writes data to the sheet:
|
||||
|
||||
This demo was tested in the following deployments:
|
||||
|
||||
| Clasp | Date |
|
||||
|:--------|:-----------|
|
||||
| `2.4.2` | 2024-12-31 |
|
||||
| Clasp | Date |
|
||||
|:--------------|:-----------|
|
||||
| `3.0.4-alpha` | 2025-05-21 |
|
||||
|
||||
:::
|
||||
|
||||
@ -112,7 +112,7 @@ the result of setting cell `A1` to the formula `=AOA()`:
|
||||
```js
|
||||
function AOA(url) {
|
||||
return [
|
||||
["Sheet", "JS"],
|
||||
["Sheet", "JS"],
|
||||
[ 72, 62]
|
||||
];
|
||||
}
|
||||
@ -153,6 +153,10 @@ The next page will include the following title:
|
||||
|
||||
3) At the bottom of the screen, click "Continue".
|
||||
|
||||
The next page will include the following title:
|
||||
|
||||
> clasp – The Apps Script CLI wants access to your Google Account
|
||||
|
||||
4) In the next screen, check every box that mentions "Google Apps Script". When
|
||||
the demo was last tested, the following were required:
|
||||
|
||||
@ -183,7 +187,8 @@ Authorization successful.
|
||||
|
||||

|
||||
|
||||
9) Click the gear icon (Project Settings) and copy the Script ID
|
||||
9) Click the gear icon (Project Settings) in the left sidebar. Scroll down to
|
||||
the "IDs" section and copy the Script ID.
|
||||
|
||||
### Cloning the Apps Script
|
||||
|
||||
|
336
docz/docs/03-demos/32-extensions/05-vscode.md
Normal file
336
docz/docs/03-demos/32-extensions/05-vscode.md
Normal file
@ -0,0 +1,336 @@
|
||||
---
|
||||
title: Visualizing Data in VS Code
|
||||
sidebar_label: Visual Studio Code
|
||||
description: View Excel files directly in VS Code. Seamlessly browse spreadsheet data without leaving your editor using SheetJS. Navigate between worksheets and pages of data with a responsive
|
||||
pagination_prev: demos/cloud/index
|
||||
pagination_next: demos/bigdata/index
|
||||
sidebar_custom_props:
|
||||
summary: View Excel files directly within Visual Studio Code
|
||||
---
|
||||
|
||||
import current from '/version.js';
|
||||
import Tabs from '@theme/Tabs';
|
||||
import TabItem from '@theme/TabItem';
|
||||
import CodeBlock from '@theme/CodeBlock';
|
||||
|
||||
[SheetJS](https://sheetjs.com) is a JavaScript library for reading and writing
|
||||
data from spreadsheets.
|
||||
|
||||
[Visual Studio Code](https://code.visualstudio.com) is a popular code editor
|
||||
that supports JavaScript extensions for customizing and enhancing functionality.
|
||||
|
||||
The ["Complete Example"](#complete-example) uses SheetJS in a VS Code extension
|
||||
to view Excel files directly within the editor. The extension leverages the VS
|
||||
Code "Custom Editor API"[^2] and "WebView API"[^1] to display spreadsheet data
|
||||
as HTML tables.
|
||||
|
||||
:::tip pass
|
||||
|
||||
["SheetJS Spreadsheet Viewer"](https://marketplace.visualstudio.com/items?itemName=asadbek.sheetjs-demo)
|
||||
is a sample extension based on this demo.
|
||||
|
||||
[The source code](https://git.sheetjs.com/asadbek064/sheetjs-vscode-extension)
|
||||
is available on the SheetJS Git server. Feedback and contributions are welcome!
|
||||
|
||||
:::
|
||||
|
||||

|
||||
|
||||
:::note Tested Deployments
|
||||
|
||||
This demo was verified in the following deployments:
|
||||
|
||||
| Platform | Architecture | Date |
|
||||
|:-----------------|:-------------|:-----------|
|
||||
| VS Code 1.100.0 | `darwin-arm` | 2025-05-15 | TODO
|
||||
| VSCodium 1.100.0 | `darwin-arm` | 2025-05-15 | TODO
|
||||
| Cursor | `win11-arm` | 2025-05-15 | TODO
|
||||
| Windsurf | `win11-arm` | 2025-05-15 | TODO
|
||||
| Void | `win11-arm` | 2025-05-15 | TODO
|
||||
|
||||
:::
|
||||
|
||||
## Integration Details
|
||||
|
||||
The [SheetJS NodeJS Module](/docs/getting-started/installation/nodejs) can be
|
||||
imported from any component or script in the extension.
|
||||
|
||||
:::caution pass
|
||||
|
||||
The module must be installed as a development dependency. If the module is
|
||||
installed as a normal dependency, `vsce`[^5] (Visual Studio Code Extension
|
||||
Manager) will fail to package or publish your extension correctly.
|
||||
|
||||
<Tabs groupId="pm">
|
||||
<TabItem value="npm" label="npm">
|
||||
<CodeBlock language="bash">{`\
|
||||
npm rm --save xlsx
|
||||
npm i --save-dev https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
|
||||
</CodeBlock>
|
||||
</TabItem>
|
||||
<TabItem value="pnpm" label="pnpm">
|
||||
<CodeBlock language="bash">{`\
|
||||
pnpm rm xlsx
|
||||
pnpm install -D https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
|
||||
</CodeBlock>
|
||||
</TabItem>
|
||||
<TabItem value="yarn" label="Yarn" default>
|
||||
<CodeBlock language="bash">{`\
|
||||
yarn remove xlsx
|
||||
yarn add -D https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
|
||||
</CodeBlock>
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
:::
|
||||
|
||||
## Extension Architecture
|
||||
|
||||
The VS Code Spreadsheet viewer extension has three main components:
|
||||
|
||||
- **Extension Entry Point:** Registers the extension with VS Code
|
||||
- **Custom Editor Provider:** Handles Excel files and converts them to web content
|
||||
- **WebView Content:** Displays Excel data as HTML tables
|
||||
|
||||
The extension uses VS Code's `Custom Editor API`[^2] to register as a handler for Excel files. When a file is opened,
|
||||
SheetJS parses it and displays the data in a WebView component.
|
||||
|
||||
### Extension Entry Point
|
||||
|
||||
The main entry point registers the custom editor provider:
|
||||
|
||||
```ts title="src/extension.ts"
|
||||
import * as vscode from 'vscode';
|
||||
// highlight-start
|
||||
import { ExcelEditorProvider } from './excelEditorProvider';
|
||||
// highlight-end
|
||||
|
||||
export function activate(context: vscode.ExtensionContext) {
|
||||
// SheetJS Spreadsheet Viewer extension activating...
|
||||
// highlight-start
|
||||
const provider = ExcelEditorProvider.register(context);
|
||||
context.subscriptions.push(provider);
|
||||
// highlight-end
|
||||
}
|
||||
export function deactivate() {}`}
|
||||
```
|
||||
|
||||
The `custom editor`[^3] is configured to support specific file types, giving us complete control over how each file is
|
||||
presented to the user. Additionally, `custom document`[^4] enables us to maintain and persist the state of each individual
|
||||
file that's opened.
|
||||
|
||||
<CodeBlock language="typescript" value="typescript" title="src/excelEditorProvider.ts">
|
||||
{`import * as vscode from 'vscode';
|
||||
// highlight-start
|
||||
import * as XLSX from 'xlsx';
|
||||
import { ExcelDocument } from './excelDocument';
|
||||
// highlight-end
|
||||
|
||||
// A simple class to store document state (one per opened file)
|
||||
class ExcelDocument implements vscode.CustomDocument {
|
||||
constructor(public readonly uri: vscode.Uri) {}
|
||||
dispose() {}
|
||||
}
|
||||
|
||||
export class ExcelEditorProvider implements vscode.CustomReadonlyEditorProvider<ExcelDocument> {
|
||||
// ...
|
||||
public static register(context: vscode.ExtensionContext): vscode.Disposable {
|
||||
return vscode.window.registerCustomEditorProvider(
|
||||
'excelViewer.spreadsheet',
|
||||
new ExcelEditorProvider(),
|
||||
{ webviewOptions: { retainContextWhenHidden: true } } // keep webview state when hidden
|
||||
);
|
||||
}
|
||||
// ...
|
||||
}`}
|
||||
</CodeBlock>
|
||||
|
||||
### Reading Files
|
||||
|
||||
The extension reads Excel files using the VS Code filesystem API and passes
|
||||
the data to SheetJS for parsing:
|
||||
|
||||
<CodeBlock language="typescript" value="typescript" title="src/excelEditorProvider.ts">
|
||||
{`export class ExcelEditorProvider implements vscode.CustomReadonlyEditorProvider<ExcelDocument> {
|
||||
// ...
|
||||
private async loadWorkbook(document: ExcelDocument, webviewPanel: vscode.WebviewPanel): Promise<XLSX.WorkBook> {
|
||||
const data: Uint8Array = await vscode.workspace.fs.readFile(document.uri);
|
||||
|
||||
const options: XLSX.ParsingOptions = {
|
||||
type: 'array',
|
||||
cellStyles: true,
|
||||
cellDates: true,
|
||||
};
|
||||
|
||||
return XLSX.read(new Uint8Array(data), options); // returns a XLSX.WorkBook
|
||||
}
|
||||
|
||||
// This is called when the first time an editor for a given resource is opened
|
||||
async openCustomDocument(uri: vscode.Uri): Promise<ExcelDocument> {
|
||||
return new ExcelDocument(uri);
|
||||
}
|
||||
|
||||
// This is called whenever the user opens a new editor
|
||||
async resolveCustomEditor(document: ExcelDocument, webviewPanel: vscode.WebviewPanel): Promise<void> {
|
||||
const wb: XLSX.WorkBook = await this.loadWorkbook(document, webviewPanel);
|
||||
const htmlTable = XLSX.utils.sheet_to_html(wb.Sheets[wb.SheetNames[0]]);
|
||||
webviewPanel.webview.html = \`<!DOCTYPE html><html><body>\${htmlTable}</body></html>\`;
|
||||
}
|
||||
}`}
|
||||
</CodeBlock>
|
||||
|
||||
### Usage Flow
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
actor User
|
||||
participant VSCode as VS Code
|
||||
participant Provider as ExcelEditorProvider
|
||||
participant SheetJS
|
||||
participant WebView
|
||||
|
||||
User->>VSCode: Open .xlsx file
|
||||
VSCode->>Provider: openCustomDocument(uri)
|
||||
Provider-->>VSCode: return ExcelDocument
|
||||
VSCode->>Provider: resolveCustomEditor(document, webviewPanel)
|
||||
Provider->>VSCode: workspace.fs.readFile(document.uri)
|
||||
VSCode-->>Provider: return file data
|
||||
Provider->>SheetJS: XLSX.read(data, options)
|
||||
SheetJS-->>Provider: return workbook
|
||||
Provider->>SheetJS: XLSX.utils.sheet_to_html(sheet)
|
||||
SheetJS-->>Provider: return HTML
|
||||
Provider->>WebView: set webview.html
|
||||
WebView-->>User: Display Excel data
|
||||
```
|
||||
|
||||
## Complete Example
|
||||
|
||||
1) Create a new VS Code extension
|
||||
|
||||
```bash
|
||||
npx --package yo --package generator-code -- yo code
|
||||
```
|
||||
|
||||
When prompted, enter the following options:
|
||||
|
||||
- `What type of extension do you want to create?`: Select `New Extension (TypeScript)` and press <kbd>Enter</kbd>
|
||||
- `What's the name of your extension?`: Type `sheetjs-demo` and press <kbd>Enter</kbd>
|
||||
- `What's the identifier of your extension?`: Press <kbd>Enter</kbd>
|
||||
- `What's the description of your extension?`: Press <kbd>Enter</kbd>
|
||||
- `Initialize a git repository?`: Type `n` and press <kbd>Enter</kbd>
|
||||
- `Which bundler to use?`: Select `webpack` and press <kbd>Enter</kbd>
|
||||
- `Which package manager to use?`: Select `pnpm` and press <kbd>Enter</kbd>
|
||||
|
||||

|
||||
|
||||
- `Do you want to open the new folder with Visual Studio Code?`: Press <kbd>Enter</kbd>
|
||||
|
||||
2) [Install the dependencies](#integration-details) and start the dev server:
|
||||
|
||||
<CodeBlock language="bash">{`\
|
||||
cd sheetjs-demo
|
||||
pnpm install -D https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz
|
||||
pnpm run watch
|
||||
`}
|
||||
</CodeBlock>
|
||||
|
||||
3) Save the following code snippet to `src/excelEditorProvider.ts`:
|
||||
|
||||
<CodeBlock language="typescript" value="typescript" title="src/excelEditorProvider.ts">{`\
|
||||
import * as vscode from 'vscode';
|
||||
import * as XLSX from 'xlsx';
|
||||
|
||||
class ExcelDocument implements vscode.CustomDocument {
|
||||
constructor(public readonly uri: vscode.Uri) { }
|
||||
dispose() { }
|
||||
}
|
||||
|
||||
export class ExcelEditorProvider implements vscode.CustomReadonlyEditorProvider<ExcelDocument> {
|
||||
public static register(context: vscode.ExtensionContext): vscode.Disposable {
|
||||
return vscode.window.registerCustomEditorProvider(
|
||||
'excelViewer.spreadsheet',
|
||||
new ExcelEditorProvider(),
|
||||
{ webviewOptions: { retainContextWhenHidden: true } } // keep webview state when hidden
|
||||
);
|
||||
}
|
||||
|
||||
private async loadWorkbook(document: ExcelDocument, webviewPanel: vscode.WebviewPanel): Promise<XLSX.WorkBook> {
|
||||
const data: Uint8Array = await vscode.workspace.fs.readFile(document.uri);
|
||||
|
||||
const options: XLSX.ParsingOptions = {
|
||||
type: 'array',
|
||||
cellStyles: true,
|
||||
cellDates: true,
|
||||
};
|
||||
|
||||
return XLSX.read(new Uint8Array(data), options); // returns a XLSX.WorkBook
|
||||
}
|
||||
|
||||
// This is called when the first time an editor for a given resource is opened
|
||||
async openCustomDocument(uri: vscode.Uri): Promise<ExcelDocument> {
|
||||
return new ExcelDocument(uri);
|
||||
}
|
||||
|
||||
// This is called whenever the user opens a new editor
|
||||
async resolveCustomEditor(document: ExcelDocument, webviewPanel: vscode.WebviewPanel): Promise<void> {
|
||||
const wb: XLSX.WorkBook = await this.loadWorkbook(document, webviewPanel);
|
||||
const htmlTable = XLSX.utils.sheet_to_html(wb.Sheets[wb.SheetNames[0]]);
|
||||
webviewPanel.webview.html = \`<!DOCTYPE html><html><body>\${htmlTable}</body></html>\`;
|
||||
}
|
||||
}`}
|
||||
</CodeBlock>
|
||||
|
||||
4) Register the custom editor provider in `src/extension.ts`:
|
||||
|
||||
<CodeBlock language="typescript" value="typescript" title="src/extension.ts (replace contents)">{`\
|
||||
import * as vscode from 'vscode';
|
||||
import { ExcelEditorProvider } from './excelEditorProvider';
|
||||
|
||||
export function activate(context: vscode.ExtensionContext) {
|
||||
// SheetJS Spreadsheet Viewer extension activating...
|
||||
const provider = ExcelEditorProvider.register(context);
|
||||
context.subscriptions.push(provider);
|
||||
}
|
||||
export function deactivate() {}`}
|
||||
</CodeBlock>
|
||||
|
||||
5) Register the custom editor in the `contributes` section of `package.json`:
|
||||
|
||||
<CodeBlock language="json" value="json" title="package.json (add highlighted lines)">{`\
|
||||
"main": "./dist/extension.js",
|
||||
"contributes": {
|
||||
// highlight-start
|
||||
"customEditors": [
|
||||
{
|
||||
"viewType": "excelViewer.spreadsheet",
|
||||
"displayName": "SheetJS Demo",
|
||||
"selector": [
|
||||
{ "filenamePattern": "*.xlsx" },
|
||||
{ "filenamePattern": "*.xls" }
|
||||
]
|
||||
}
|
||||
],
|
||||
// highlight-end
|
||||
"commands": [
|
||||
{
|
||||
"command": "sheetjs-demo.helloWorld",
|
||||
"title": "Hello World"
|
||||
}
|
||||
]
|
||||
},
|
||||
`}
|
||||
</CodeBlock>
|
||||
|
||||
6. Inside the editor, open `src/extension.ts` and press <kbd>F5</kbd> or run the command **Debug: Start Debugging**
|
||||
from the Command Palette (<kbd>⇧⌘P</kbd>). This will compile and run the extension in a new Extension Development Host window.
|
||||
|
||||
7. Select the new VSCode Window and open a `.xlsx` or `.xls` file.
|
||||
|
||||
|
||||
---
|
||||
|
||||
[^1]: See [`Webview API`](https://code.visualstudio.com/api/extension-guides/webview) for more details.
|
||||
[^2]: See [`Custom Editor API`](https://code.visualstudio.com/api/extension-guides/custom-editors) documentation for more details.
|
||||
[^3]: See [`Custom Editor`](https://code.visualstudio.com/api/extension-guides/custom-editors#custom-editor) for more details.
|
||||
[^4]: See [`CustomDocument`](https://code.visualstudio.com/api/extension-guides/custom-editors#customdocument) for more details.
|
||||
[^5]: See [`Visual Studio Code Extension Manager`](https://code.visualstudio.com/api/working-with-extensions/publishing-extension) for more details.
|
@ -30,7 +30,7 @@ This demo was tested by SheetJS users in the following deployments:
|
||||
| Architecture | Version | Date |
|
||||
|:-------------|:--------|:-----------|
|
||||
| `darwin-x64` | `14.1` | 2025-03-31 |
|
||||
| `win11-x64` | `14.0` | 2024-12-19 |
|
||||
| `win11-x64` | `14.2` | 2025-05-21 |
|
||||
|
||||
:::
|
||||
|
||||
@ -181,12 +181,12 @@ This demo tests the NodeJS external engine and dedicated command line tools.
|
||||
|
||||
### NodeJS Engine
|
||||
|
||||
0) Install NodeJS. When the demo was tested, version `20.19.0` was installed.
|
||||
0) Install NodeJS. When the demo was tested, version `20.19.2` was installed.
|
||||
|
||||
1) Install dependencies in the Home folder (`~` or `$HOME` or `%HOMEPATH%`):
|
||||
|
||||
<CodeBlock language="bash">{`\
|
||||
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz zeromq@6.4.0`}
|
||||
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz zeromq@6.4.2`}
|
||||
</CodeBlock>
|
||||
|
||||
2) Open a new Mathematica Notebook and register NodeJS. When the example was
|
||||
|
@ -55,7 +55,7 @@ This demo was tested in the following deployments:
|
||||
|:-------------|:------------------|:-----------|
|
||||
| `darwin-x64` | `18.5` (StataNow) | 2025-01-08 |
|
||||
| `darwin-arm` | `18.5` (StataNow) | 2025-04-24 |
|
||||
| `win11-x64` | `18.5` (StataNow) | 2024-12-19 |
|
||||
| `win11-x64` | `18.5` (StataNow) | 2025-04-28 |
|
||||
| `win11-arm` | `18.5` (StataNow) | 2025-02-23 |
|
||||
| `linux-x64` | `18.5` (StataNow) | 2025-01-09 |
|
||||
|
||||
@ -257,6 +257,22 @@ curl -LO https://www.stata.com/plugins/stplugin.c
|
||||
curl -LO https://www.stata.com/plugins/stplugin.h
|
||||
```
|
||||
|
||||
:::danger pass
|
||||
|
||||
**When this demo was last tested, `stplugin.h` was removed from the website!**
|
||||
|
||||
If the official links do not work, the following files should be used:
|
||||
|
||||
- [`stplugin.c`](pathname:///stata/stplugin.c)
|
||||
- [`stplugin.h`](pathname:///stata/stplugin.h)
|
||||
|
||||
```bash
|
||||
curl -LO https://docs.sheetjs.com/plugins/stplugin.c
|
||||
curl -LO https://docs.sheetjs.com/plugins/stplugin.h
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
4) Download Duktape. In Windows, the following commands should be run in WSL. In
|
||||
macOS, the commands should be run in the same Terminal session.
|
||||
|
||||
@ -463,67 +479,32 @@ The output will show the import result:
|
||||
(2 vars, 5 obs)
|
||||
</pre>
|
||||
|
||||
20) Open the Data Editor (in Browse or Edit mode) and compare to the screenshot:
|
||||
20) List the dataset:
|
||||
|
||||
```stata
|
||||
browse Name Index
|
||||
list Name Index
|
||||
```
|
||||
|
||||
The result should match the following listing:
|
||||
|
||||
```
|
||||
. list Name Index
|
||||
|
||||
+----------------------+
|
||||
| Name Index |
|
||||
|----------------------|
|
||||
1. | Bill Clinton 42 |
|
||||
2. | GeorgeW Bush 43 |
|
||||
3. | Barack Obama 44 |
|
||||
4. | Donald Trump 45 |
|
||||
5. | Joseph Biden 46 |
|
||||
+----------------------+
|
||||
```
|
||||
|
||||
In the Stata GUI, the Data Editor should match the following screenshot:
|
||||
|
||||

|
||||
|
||||
:::info pass
|
||||
|
||||
In the terminal version of Stata, `browse` does not work:
|
||||
|
||||
```
|
||||
. browse Name Index
|
||||
command browse is unrecognized
|
||||
r(199);
|
||||
```
|
||||
|
||||
The `codebook` command will display details.
|
||||
|
||||
<details>
|
||||
<summary><b>Expected Output</b> (click to show)</summary>
|
||||
|
||||
```text title="Expected output for 80-column terminal windows"
|
||||
-------------------------------------------------------------------------------
|
||||
Name Name
|
||||
-------------------------------------------------------------------------------
|
||||
|
||||
Type: String (str12)
|
||||
|
||||
Unique values: 5 Missing "": 0/5
|
||||
|
||||
Tabulation: Freq. Value
|
||||
1 "Barack Obama"
|
||||
1 "Bill Clinton"
|
||||
1 "Donald Trump"
|
||||
1 "GeorgeW Bush"
|
||||
1 "Joseph Biden"
|
||||
|
||||
Warning: Variable has embedded blanks.
|
||||
|
||||
-------------------------------------------------------------------------------
|
||||
Index Index
|
||||
-------------------------------------------------------------------------------
|
||||
|
||||
Type: Numeric (byte)
|
||||
|
||||
Range: [42,46] Units: 1
|
||||
Unique values: 5 Missing .: 0/5
|
||||
|
||||
Tabulation: Freq. Value
|
||||
1 42
|
||||
1 43
|
||||
1 44
|
||||
1 45
|
||||
1 46
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
:::
|
||||
|
||||
[^1]: Run `help import excel` in Stata or see ["import excel"](https://www.stata.com/manuals/dimportexcel.pdf) in the Stata documentation.
|
||||
[^2]: See [`read` in "Reading Files"](/docs/api/parse-options)
|
||||
|
@ -30,7 +30,7 @@ This demo was tested by SheetJS users in the following deployments:
|
||||
| Architecture | Version | Date |
|
||||
|:-------------|:--------|:-----------|
|
||||
| `darwin-x64` | R2024b | 2025-03-31 |
|
||||
| `win11-x64` | R2024b | 2024-12-21 |
|
||||
| `win11-x64` | R2024b | 2025-05-10 |
|
||||
|
||||
:::
|
||||
|
||||
@ -234,14 +234,14 @@ run in the macOS Terminal or Windows PowerShell:
|
||||
|
||||
<CodeBlock language="bash">{`\
|
||||
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
|
||||
curl -o xlsx-cli.js https://docs.sheetjs.com/cli/xlsx-cli.js
|
||||
npx -y nexe -t 14.15.3 xlsx-cli.js`}
|
||||
</CodeBlock>
|
||||
|
||||
2) Download https://docs.sheetjs.com/pres.numbers to the workspace folder:
|
||||
|
||||
```bash
|
||||
curl -LO https://docs.sheetjs.com/pres.numbers
|
||||
curl -o pres.numbers https://docs.sheetjs.com/pres.numbers
|
||||
```
|
||||
|
||||
4) Save the following to `SheetJSMATLAB.m` in the workspace folder:
|
||||
|
@ -23,7 +23,7 @@ library to read data from spreadsheets and converts to a Maple-friendly format.
|
||||
|
||||
```mermaid
|
||||
flowchart LR
|
||||
ofile[(workbook\nXLSB file)]
|
||||
ofile[(generic\nworkbook)]
|
||||
nfile[(clean file\nXLSX)]
|
||||
data[[Maple\nTable]]
|
||||
ofile --> |Maple Extension\nSheetJS + Duktape| nfile
|
||||
@ -37,7 +37,7 @@ This demo was tested by SheetJS users in the following deployments:
|
||||
| Architecture | Version | Date |
|
||||
|:-------------|:---------|:-----------|
|
||||
| `darwin-x64` | `2024.0` | 2025-01-10 |
|
||||
| `win11-x64` | `2024.0` | 2024-12-19 |
|
||||
| `win11-x64` | `2024.2` | 2025-05-07 |
|
||||
|
||||
:::
|
||||
|
||||
@ -60,7 +60,7 @@ and generates clean XLSX files that Maple can import.
|
||||
The extension function ultimately pairs the SheetJS `read`[^2] and `write`[^3]
|
||||
methods to read data from the old file and write a new file:
|
||||
|
||||
```js
|
||||
```js title="Script that will be run by Maple extension"
|
||||
var workbook = XLSX.read(original_file_data, { type: "buffer" });
|
||||
var new_file_data = XLSX.write(workbook, { type: "array", bookType: "xlsx" });
|
||||
```
|
||||
@ -84,6 +84,7 @@ flowchart LR
|
||||
wb --> |SheetJS\n`write`| njbuf
|
||||
njbuf --> |Duktape\nBuffer Ops| nbuf
|
||||
nbuf --> |C\nWrite File| nfile
|
||||
linkStyle 2,3 color:blue,stroke:blue;
|
||||
```
|
||||
|
||||
### C Extensions
|
||||
@ -128,7 +129,7 @@ file, exports data to `sheetjsw.xlsx` and returns the string `"sheetjsw.xlsx"`.
|
||||
|
||||
This can be chained with `Import` from `ExcelTools`:
|
||||
|
||||
```maple
|
||||
```maple title="Sample usage of SheetToXLSX extension"
|
||||
with(ExcelTools);
|
||||
Import(SheetToXLSX("pres.numbers"))
|
||||
```
|
||||
|
@ -344,7 +344,7 @@ If prompted, enter the path to the JDK installation. On macOS, JDK installations
|
||||
are typically stored in `/Library/Java/JavaVirtualMachines`. The required path
|
||||
is the `/Contents/Home/` folder within the specific JDK installation.
|
||||
|
||||
When this demo was last tested, Zulu JDK 21 was installed with Homebrew:
|
||||
When this demo was last tested, Zulu JDK 21 was installed with Homebrew:
|
||||
|
||||
```bash
|
||||
brew install --cask zulu@21
|
||||
|
@ -193,18 +193,18 @@ Each browser demo was tested in the following environments:
|
||||
|
||||
| Browser | Date | Comments |
|
||||
|:-------------|:-----------|:----------------------------------------|
|
||||
| Chromium 131 | 2024-12-31 | |
|
||||
| Edge 131 | 2024-12-31 | |
|
||||
| Safari 17.5 | 2024-12-31 | File System Access API is not supported |
|
||||
| Brave 1.63 | 2024-12-31 | File System Access API is not supported |
|
||||
| Chromium 136 | 2025-05-27 | |
|
||||
| Edge 135 | 2025-05-27 | |
|
||||
| Safari 17.1 | 2025-05-27 | File System Access API is not supported |
|
||||
| Brave 1.78 | 2025-05-27 | File System Access API is not supported |
|
||||
| Konqueror 22 | 2025-04-23 | File System Access API is not supported |
|
||||
| Firefox 133 | 2024-12-31 | File System Access API is not supported |
|
||||
| Firefox 138 | 2025-05-27 | File System Access API is not supported |
|
||||
|
||||
:::
|
||||
|
||||
### Downloading a Remote File
|
||||
|
||||
:::note fetch in Web Workers
|
||||
:::note `fetch` in Web Workers
|
||||
|
||||
`fetch` was enabled in Web Workers in Chrome 42 and Safari 10.3
|
||||
|
||||
@ -400,7 +400,7 @@ self.addEventListener('message', async(e) => {
|
||||
|
||||
### User-Submitted File
|
||||
|
||||
:::note FileReaderSync
|
||||
:::note `FileReaderSync`
|
||||
|
||||
Typically `FileReader` is used in the main browser context. In Web Workers, the
|
||||
synchronous version `FileReaderSync` is more efficient.
|
||||
|
@ -130,7 +130,7 @@ This demo was tested in the following deployments:
|
||||
|:-------------|:--------|:-----------|
|
||||
| `darwin-x64` | `2.7.0` | 2025-03-31 |
|
||||
| `darwin-arm` | `2.7.0` | 2025-02-13 |
|
||||
| `win11-x64` | `2.7.0` | 2024-12-20 |
|
||||
| `win11-x64` | `2.7.0` | 2025-04-28 |
|
||||
| `win11-arm` | `2.7.0` | 2025-02-23 |
|
||||
| `linux-x64` | `2.7.0` | 2025-04-21 |
|
||||
| `linux-arm` | `2.7.0` | 2025-02-15 |
|
||||
@ -692,7 +692,7 @@ The main Duktape code can be added to the Zig build pipeline.
|
||||
|
||||
:::note pass
|
||||
|
||||
The following explanation was verified against Zig 0.12.0.
|
||||
The following explanation was verified against Zig 0.14.0.
|
||||
|
||||
:::
|
||||
|
||||
@ -710,7 +710,7 @@ folder must be added to the include path list:
|
||||
```
|
||||
|
||||
The `duktape.c` source file must be added to the build sequence. For Zig version
|
||||
0.12.0, Duktape must be compiled with flags `-std=c99 -fno-sanitize=undefined`
|
||||
0.14.0, Duktape must be compiled with flags `-std=c99 -fno-sanitize=undefined`
|
||||
and linked against `libc` and `libm`:
|
||||
|
||||
```zig title="build.zig"
|
||||
@ -786,7 +786,7 @@ This demo was tested in the following deployments:
|
||||
|:-------------|:--------|:---------|:-----------|
|
||||
| `darwin-x64` | `2.7.0` | `0.14.0` | 2025-03-31 |
|
||||
| `darwin-arm` | `2.7.0` | `0.13.0` | 2025-02-13 |
|
||||
| `win11-x64` | `2.7.0` | `0.13.0` | 2024-12-20 |
|
||||
| `win11-x64` | `2.7.0` | `0.14.0` | 2025-04-28 |
|
||||
| `win11-arm` | `2.7.0` | `0.13.0` | 2025-02-23 |
|
||||
| `linux-x64` | `2.7.0` | `0.14.0` | 2025-04-21 |
|
||||
| `linux-arm` | `2.7.0` | `0.13.0` | 2025-02-15 |
|
||||
@ -855,8 +855,8 @@ The following commands should be run within WSL bash.
|
||||
For X64 Windows:
|
||||
|
||||
```bash
|
||||
curl -LO https://ziglang.org/download/0.13.0/zig-windows-x86_64-0.13.0.zip
|
||||
unzip zig-windows-x86_64-0.13.0.zip
|
||||
curl -LO https://ziglang.org/download/0.14.0/zig-windows-x86_64-0.14.0.zip
|
||||
unzip zig-windows-x86_64-0.14.0.zip
|
||||
```
|
||||
|
||||
For ARM64 Windows:
|
||||
|
@ -148,8 +148,8 @@ This demo was tested in the following deployments:
|
||||
|:--------------|:-------------|:--------------|:-----------------|:-----------|
|
||||
| `13.7.5` | `darwin-x64` | macOS 15.3.2 | `clang 16.0.0` | 2025-03-31 |
|
||||
| `13.5.92` | `darwin-arm` | macOS 14.5 | `clang 16.0.0` | 2025-02-15 |
|
||||
| `12.7.130` | `win11-x64` | Windows 11 | `CL 19.42.34435` | 2024-12-20 |
|
||||
| `12.7.130` | `linux-x64` | HoloOS 3.6.20 | `gcc 13.2.1` | 2025-01-02 |
|
||||
| `13.8.124` | `win11-x64` | Windows 11 | `CL 19.43.34810` | 2025-05-11 |
|
||||
| `13.5.92` | `linux-x64` | Ubuntu 24.04 | `gcc 13.3.0` | 2025-06-16 |
|
||||
| `13.5.92` | `linux-arm` | Debian 12 | `gcc 12.2.0` | 2025-02-15 |
|
||||
|
||||
:::
|
||||
@ -204,13 +204,15 @@ installation steps.
|
||||
Using the installer tool, the "Desktop development with C++" workload must be
|
||||
installed. In the sidebar, verify the following components are checked:
|
||||
|
||||
- "C++ ATL for latest ... build tools" (`v143` when last tested)
|
||||
- "C++ MFC for latest ... build tools" (`v143` when last tested)
|
||||
- "C++ ATL for latest ... build tools (x86 & x64)" (`v143` when last tested)
|
||||
- "C++ ATL for latest ... build tools with Spectre Mitigations (x86 & x64)" (`v143` when last tested)
|
||||
- "C++ MFC for latest ... build tools (x86 & x64)" (`v143` when last tested)
|
||||
- "C++ MFC for latest ... build tools with Spectre Mitigations (x86 & x64)" (`v143` when last tested)
|
||||
|
||||
In the "Individual components" tab, search for "Windows 11 SDK" and verify that
|
||||
"Windows 11 SDK (10.0.22621.0)" is checked.
|
||||
"Windows 11 SDK (10.0.26100.0)" is checked.
|
||||
|
||||
**Even though newer SDKs exist, Windows 11 SDK 10.0.22621.0 must be installed!**
|
||||
**Even though newer SDKs may exist, V8 expects specific Windows SDK versions!**
|
||||
|
||||
Click "Modify" and allow the installer to finish.
|
||||
|
||||
@ -222,7 +224,7 @@ The SDK debugging tools must be installed after the SDK is installed.
|
||||
available, search for "Installed apps".
|
||||
|
||||
2) When the setting panel opens, scroll down to "Windows Software Development
|
||||
Kit - Windows 10.0.22621" and click "Modify".
|
||||
Kit - Windows 10.0.26100" and click "Modify".
|
||||
|
||||
3) In the new window, select "Change" and click "Next"
|
||||
|
||||
@ -266,13 +268,12 @@ sudo chmod 777 /usr/local/lib
|
||||
</TabItem>
|
||||
<TabItem value="win" label="Windows">
|
||||
|
||||
[The bundle](https://storage.googleapis.com/chrome-infra/depot_tools.zip) is a
|
||||
ZIP file that should be downloaded and extracted.
|
||||
|
||||
The demo was last tested on a NTFS-formatted drive (mounted at `C:\`). The ZIP
|
||||
was extracted to `C:\src\depot_tools`.
|
||||
|
||||
After extracting, verify that the `depot_tools` folder is not read-only.
|
||||
```bash
|
||||
cd c:\
|
||||
mkdir src
|
||||
cd src
|
||||
git clone https://chromium.googlesource.com/chromium/tools/depot_tools.git
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
@ -334,7 +335,22 @@ gclient
|
||||
gclient
|
||||
```
|
||||
|
||||
:::caution pass
|
||||
:::info Troubleshooting
|
||||
|
||||
In test runs on fresh machines, `gclient` failed with the following message:
|
||||
|
||||
```
|
||||
Error: client not configured; see 'gclient config'
|
||||
```
|
||||
|
||||
This was fixed by setting `user.name` and `user.email` in the Git configuration:
|
||||
|
||||
```bash
|
||||
git config --global user.name "John Doe"
|
||||
git config --global user.email "jdoe@email.com"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
`gclient` may throw errors related to `git` and permissions issues:
|
||||
|
||||
@ -349,9 +365,7 @@ To add an exception for this directory, call:
|
||||
These issues are related to the exFAT file system. They were resolved by running
|
||||
the recommended commands and re-running `gclient`.
|
||||
|
||||
:::
|
||||
|
||||
:::caution pass
|
||||
---
|
||||
|
||||
There may be errors pertaining to `gitconfig`:
|
||||
|
||||
@ -435,11 +449,11 @@ The recommended fix is to delete the referenced folder and re-run `gclient sync`
|
||||
</Tabs>
|
||||
|
||||
|
||||
5) Checkout the desired version. The following command pulls `13.7.5`:
|
||||
5) Checkout the desired version. The following command pulls `13.8.124`:
|
||||
|
||||
|
||||
```bash
|
||||
git checkout tags/13.7.5 -b sample
|
||||
git checkout tags/13.8.124 -b sample
|
||||
```
|
||||
|
||||
:::caution pass
|
||||
@ -447,14 +461,14 @@ git checkout tags/13.7.5 -b sample
|
||||
The official documentation recommends:
|
||||
|
||||
```bash
|
||||
git checkout refs/tags/13.7.5 -b sample -t
|
||||
git checkout refs/tags/13.8.124 -b sample -t
|
||||
```
|
||||
|
||||
This command failed in local testing:
|
||||
|
||||
```
|
||||
E:\v8\v8>git checkout refs/tags/13.7.5 -b sample -t
|
||||
fatal: cannot set up tracking information; starting point 'refs/tags/13.7.5' is not a branch
|
||||
E:\v8\v8>git checkout refs/tags/13.8.124 -b sample -t
|
||||
fatal: cannot set up tracking information; starting point 'refs/tags/13.8.124' is not a branch
|
||||
```
|
||||
|
||||
:::
|
||||
@ -511,6 +525,18 @@ ninja -C out.gn/arm64.release.sample v8_monolith
|
||||
|
||||
```bash
|
||||
tools/dev/v8gen.py x64.release.sample
|
||||
```
|
||||
|
||||
Append the following lines to `out.gn/x64.release.sample/args.gn`:
|
||||
|
||||
```text title="out.gn/x64.release.sample/args.gn (add to file)"
|
||||
is_clang = false
|
||||
treat_warnings_as_errors = false
|
||||
```
|
||||
|
||||
Run the build:
|
||||
|
||||
```bash
|
||||
ninja -C out.gn/x64.release.sample v8_monolith
|
||||
```
|
||||
|
||||
@ -643,6 +669,24 @@ python3 tools\dev\v8gen.py -vv x64.release.sample
|
||||
ninja -C out.gn\x64.release.sample v8_monolith
|
||||
```
|
||||
|
||||
:::info pass
|
||||
|
||||
If the expected Windows SDK version is missing or the debugging tools are not
|
||||
installed, the build will fail with an error referencing `include`:
|
||||
|
||||
```
|
||||
Exception: Path "C:\Program Files (x86)\Windows Kits\10\\include\10.0.26100.0\\um" from environment variable "include" does not exist. Make sure the necessary SDK is installed.
|
||||
```
|
||||
|
||||
In the error message, the expected Windows SDK version is listed in the path.
|
||||
For example, in the aforementioned message, `10.0.26100.0` is the SDK version.
|
||||
|
||||
The expected version of the Windows SDK should be installed from Visual Studio
|
||||
Installer. After installing the SDK, the corresponding SDK debugging tools
|
||||
should be installed using the procedure from Step 0.
|
||||
|
||||
:::
|
||||
|
||||
:::caution pass
|
||||
|
||||
In local testing, the build sometimes failed with a `dbghelp.dll` error:
|
||||
@ -744,7 +788,7 @@ ld: multiple errors: unknown file type in '/Users/sheetjs/dev/v8/v8/out.gn/x64.r
|
||||
```bash
|
||||
g++ -I. -Iinclude samples/hello-world.cc -o hello_world -fno-rtti -lv8_monolith \
|
||||
-lv8_libbase -lv8_libplatform -ldl -Lout.gn/x64.release.sample/obj/ -pthread \
|
||||
-std=c++17 -DV8_COMPRESS_POINTERS=1 -DV8_ENABLE_SANDBOX
|
||||
-std=c++20 -DV8_COMPRESS_POINTERS=1 -DV8_ENABLE_SANDBOX
|
||||
./hello_world
|
||||
```
|
||||
|
||||
@ -762,10 +806,32 @@ g++ -I. -Iinclude samples/hello-world.cc -o hello_world -fno-rtti -lv8_monolith
|
||||
<TabItem value="win11-x64" label="Windows">
|
||||
|
||||
```bash
|
||||
cl /I. /Iinclude samples/hello-world.cc /GR- v8_monolith.lib Advapi32.lib Winmm.lib Dbghelp.lib /std:c++17 /DV8_COMPRESS_POINTERS=1 /DV8_ENABLE_SANDBOX /link /out:hello_world.exe /LIBPATH:out.gn\x64.release.sample\obj\
|
||||
cl /I. /Iinclude samples/hello-world.cc /GR- v8_monolith.lib Advapi32.lib Winmm.lib Dbghelp.lib /std:c++20 /DV8_COMPRESS_POINTERS=1 /DV8_ENABLE_SANDBOX /link /out:hello_world.exe /LIBPATH:out.gn\x64.release.sample\obj\
|
||||
.\hello_world.exe
|
||||
```
|
||||
|
||||
:::caution pass
|
||||
|
||||
When this demo was last tested, the build failed with a `C++` standard error:
|
||||
|
||||
```
|
||||
c:\v8\v8\include\v8config.h(13): fatal error C1189: #error: "C++20 or later required."
|
||||
```
|
||||
|
||||
The `/std:c++20` option sets the `C++` standard in use. The workaround is to
|
||||
suppress the broken version check:
|
||||
|
||||
```c++ title="include\v8config.h (edit highlighted line)"
|
||||
#if __cplusplus <= 201703L
|
||||
// highlight-next-line
|
||||
//#error "C++20 or later required."
|
||||
#endif
|
||||
```
|
||||
|
||||
After suppressing the error, re-run the build commands.
|
||||
|
||||
:::
|
||||
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
@ -901,7 +967,7 @@ g++ -I. -Iinclude hello-world.cc -o hello_world -fno-rtti -lv8_monolith \
|
||||
<TabItem value="win" label="Windows">
|
||||
|
||||
```bash
|
||||
cl /MT /I..\v8\v8\ /I..\v8\v8\include hello-world.cc /GR- v8_monolith.lib Advapi32.lib Winmm.lib Dbghelp.lib /std:c++17 /DV8_COMPRESS_POINTERS=1 /DV8_ENABLE_SANDBOX /link /out:hello_world.exe /LIBPATH:..\v8\v8\out.gn\x64.release.sample\obj\
|
||||
cl /MT /I..\v8\v8\ /I..\v8\v8\include hello-world.cc /GR- v8_monolith.lib Advapi32.lib Winmm.lib Dbghelp.lib /std:c++20 /DV8_COMPRESS_POINTERS=1 /DV8_ENABLE_SANDBOX /link /out:hello_world.exe /LIBPATH:..\v8\v8\out.gn\x64.release.sample\obj\
|
||||
.\hello_world.exe
|
||||
```
|
||||
|
||||
@ -974,7 +1040,7 @@ g++ -I. -Iinclude sheetjs.v8.cc -o sheetjs.v8 -fno-rtti -lv8_monolith \
|
||||
<TabItem value="win" label="Windows">
|
||||
|
||||
```bash
|
||||
cl /MT /I..\v8\v8\ /I..\v8\v8\include sheetjs.v8.cc /GR- v8_monolith.lib Advapi32.lib Winmm.lib Dbghelp.lib /std:c++17 /DV8_COMPRESS_POINTERS=1 /DV8_ENABLE_SANDBOX /link /out:sheetjs.v8.exe /LIBPATH:..\v8\v8\out.gn\x64.release.sample\obj\
|
||||
cl /MT /I..\v8\v8\ /I..\v8\v8\include sheetjs.v8.cc /GR- v8_monolith.lib Advapi32.lib Winmm.lib Dbghelp.lib /std:c++20 /DV8_COMPRESS_POINTERS=1 /DV8_ENABLE_SANDBOX /link /out:sheetjs.v8.exe /LIBPATH:..\v8\v8\out.gn\x64.release.sample\obj\
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
@ -1036,8 +1102,8 @@ This demo was last tested in the following deployments:
|
||||
|:-------------|:----------|:-----------|
|
||||
| `darwin-x64` | `136.0.0` | 2025-04-21 |
|
||||
| `darwin-arm` | `134.3.0` | 2025-02-13 |
|
||||
| `win11-x64` | `130.0.2` | 2024-12-20 |
|
||||
| `linux-x64` | `130.0.7` | 2025-01-09 |
|
||||
| `win11-x64` | `137.1.0` | 2025-05-11 |
|
||||
| `linux-x64` | `137.2.0` | 2025-06-16 |
|
||||
| `linux-arm` | `134.4.0` | 2025-02-15 |
|
||||
|
||||
:::
|
||||
@ -1070,12 +1136,45 @@ curl -LO https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.full.min.js
|
||||
curl -LO https://docs.sheetjs.com/pres.numbers`}
|
||||
</CodeBlock>
|
||||
|
||||
:::note pass
|
||||
|
||||
In PowerShell, the command may fail with a parameter error:
|
||||
|
||||
```
|
||||
Invoke-WebRequest : A parameter cannot be found that matches parameter name 'LO'.
|
||||
```
|
||||
|
||||
`curl.exe` must be invoked directly:
|
||||
|
||||
<CodeBlock language="bash">{`\
|
||||
curl.exe -LO https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.full.min.js
|
||||
curl.exe -LO https://docs.sheetjs.com/pres.numbers`}
|
||||
</CodeBlock>
|
||||
|
||||
:::
|
||||
|
||||
4) Download [`main.rs`](pathname:///v8/main.rs) and replace `src/main.rs`:
|
||||
|
||||
```bash
|
||||
curl -L -o src/main.rs https://docs.sheetjs.com/v8/main.rs
|
||||
```
|
||||
|
||||
:::note pass
|
||||
|
||||
In PowerShell, the command may fail with a parameter error:
|
||||
|
||||
```
|
||||
Invoke-WebRequest : A parameter cannot be found that matches parameter name 'LO'.
|
||||
```
|
||||
|
||||
`curl.exe` must be invoked directly:
|
||||
|
||||
```bash
|
||||
curl.exe -L -o src/main.rs https://docs.sheetjs.com/v8/main.rs
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
:::info pass
|
||||
|
||||
There was a breaking change in version `0.102.0` affecting `v8::Context::new`.
|
||||
@ -1119,7 +1218,7 @@ This demo was last tested in the following deployments:
|
||||
|:-------------|:--------------|:--------|:----------|:-----------|
|
||||
| `darwin-x64` | `13.2.152.16` | `4.1.1` | `24.0.1` | 2025-04-21 |
|
||||
| `darwin-arm` | `13.2.152.16` | `4.1.1` | `17.0.14` | 2025-03-30 |
|
||||
| `win11-x64` | `12.6.228.13` | `3.1.3` | `21.0.5` | 2024-12-20 |
|
||||
| `win11-x64` | `13.2.152.16` | `4.1.1` | `17.0.13` | 2025-05-11 |
|
||||
| `linux-x64` | `13.2.152.16` | `4.1.1` | `21.0.6` | 2025-04-21 |
|
||||
| `linux-arm` | `13.2.152.16` | `4.1.1` | `17.0.14` | 2025-02-16 |
|
||||
|
||||
@ -1176,9 +1275,27 @@ curl -LO https://repo1.maven.org/maven2/com/caoccao/javet/javet-v8-linux-arm64/4
|
||||
<TabItem value="win" label="Windows">
|
||||
|
||||
```bash
|
||||
curl -LO https://repo1.maven.org/maven2/com/caoccao/javet/javet/3.1.3/javet-3.1.3.jar
|
||||
curl -LO https://repo1.maven.org/maven2/com/caoccao/javet/javet/4.1.1/javet-4.1.1.jar
|
||||
curl -LO https://repo1.maven.org/maven2/com/caoccao/javet/javet-v8-windows-x86_64/4.1.1/javet-v8-windows-x86_64-4.1.1.jar
|
||||
```
|
||||
|
||||
:::note pass
|
||||
|
||||
In PowerShell, the command may fail with a parameter error:
|
||||
|
||||
```
|
||||
Invoke-WebRequest : A parameter cannot be found that matches parameter name 'LO'.
|
||||
```
|
||||
|
||||
`curl.exe` must be invoked directly:
|
||||
|
||||
```bash
|
||||
curl.exe -LO https://repo1.maven.org/maven2/com/caoccao/javet/javet/4.1.1/javet-4.1.1.jar
|
||||
curl.exe -LO https://repo1.maven.org/maven2/com/caoccao/javet/javet-v8-windows-x86_64/4.1.1/javet-v8-windows-x86_64-4.1.1.jar
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
@ -1195,12 +1312,45 @@ curl -LO https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.full.min.js
|
||||
curl -LO https://docs.sheetjs.com/pres.xlsx`}
|
||||
</CodeBlock>
|
||||
|
||||
:::note pass
|
||||
|
||||
In PowerShell, the command may fail with a parameter error:
|
||||
|
||||
```
|
||||
Invoke-WebRequest : A parameter cannot be found that matches parameter name 'LO'.
|
||||
```
|
||||
|
||||
`curl.exe` must be invoked directly:
|
||||
|
||||
<CodeBlock language="bash">{`\
|
||||
curl.exe -LO https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.full.min.js
|
||||
curl.exe -LO https://docs.sheetjs.com/pres.xlsx`}
|
||||
</CodeBlock>
|
||||
|
||||
:::
|
||||
|
||||
4) Download [`SheetJSJavet.java`](pathname:///v8/SheetJSJavet.java):
|
||||
|
||||
```bash
|
||||
curl -LO https://docs.sheetjs.com/v8/SheetJSJavet.java
|
||||
```
|
||||
|
||||
:::note pass
|
||||
|
||||
In PowerShell, the command may fail with a parameter error:
|
||||
|
||||
```
|
||||
Invoke-WebRequest : A parameter cannot be found that matches parameter name 'LO'.
|
||||
```
|
||||
|
||||
`curl.exe` must be invoked directly:
|
||||
|
||||
```bash
|
||||
curl.exe -LO https://docs.sheetjs.com/v8/SheetJSJavet.java
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
5) Build and run the Java application:
|
||||
|
||||
<Tabs groupId="os">
|
||||
@ -1245,8 +1395,8 @@ java -cp ".:javet-4.1.1.jar:javet-v8-linux-arm64-4.1.1.jar" SheetJSJavet pres.xl
|
||||
<TabItem value="win" label="Windows">
|
||||
|
||||
```bash
|
||||
javac -cp ".;javet-3.1.3.jar" SheetJSJavet.java
|
||||
java -cp ".;javet-3.1.3.jar" SheetJSJavet pres.xlsx
|
||||
javac -cp ".;javet-4.1.1.jar;javet-v8-windows-x86_64-4.1.1.jar" SheetJSJavet.java
|
||||
java -cp ".;javet-4.1.1.jar;javet-v8-windows-x86_64-4.1.1.jar" SheetJSJavet pres.xlsx
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
@ -1282,9 +1432,9 @@ This demo was last tested in the following deployments:
|
||||
|:-------------|:--------------|:-----------|
|
||||
| `darwin-x64` | `13.3.415.23` | 2025-03-31 |
|
||||
| `darwin-arm` | `13.3.415.23` | 2025-03-31 |
|
||||
| `win11-x64` | `12.3.219.12` | 2024-12-20 |
|
||||
| `win11-x64` | `13.3.415.23` | 2025-05-11 |
|
||||
| `win11-arm` | `12.3.219.12` | 2025-02-23 |
|
||||
| `linux-x64` | `12.3.219.12` | 2025-01-10 |
|
||||
| `linux-x64` | `12.3.219.12` | 2025-06-16 |
|
||||
| `linux-arm` | `12.3.219.12` | 2025-02-16 |
|
||||
|
||||
:::
|
||||
@ -1328,7 +1478,7 @@ Click "OK" in each window (3 windows) and restart your computer.
|
||||
<details>
|
||||
<summary><b>Installation Notes</b> (click to show)</summary>
|
||||
|
||||
For macOS x64 and ARM64, install the `dotnet-sdk` Cask with Homebrew:
|
||||
For macOS x64 and ARM64, the `dotnet-sdk` cask can be installed with Homebrew:
|
||||
|
||||
```bash
|
||||
brew install --cask dotnet-sdk
|
||||
@ -1376,6 +1526,23 @@ curl -LO https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.full.min.js
|
||||
curl -LO https://docs.sheetjs.com/pres.xlsx`}
|
||||
</CodeBlock>
|
||||
|
||||
:::note pass
|
||||
|
||||
In PowerShell, the command may fail with a parameter error:
|
||||
|
||||
```
|
||||
Invoke-WebRequest : A parameter cannot be found that matches parameter name 'LO'.
|
||||
```
|
||||
|
||||
`curl.exe` must be invoked directly:
|
||||
|
||||
<CodeBlock language="bash">{`\
|
||||
curl.exe -LO https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.full.min.js
|
||||
curl.exe -LO https://docs.sheetjs.com/pres.xlsx`}
|
||||
</CodeBlock>
|
||||
|
||||
:::
|
||||
|
||||
6) Replace `Program.cs` with the following:
|
||||
|
||||
```csharp title="Program.cs"
|
||||
@ -1404,7 +1571,7 @@ var xlsb = (ITypedArray<byte>)engine.Evaluate("XLSX.write(wb, {bookType: 'xlsb',
|
||||
File.WriteAllBytes("SheetJSClearScript.xlsb", xlsb.ToArray());
|
||||
```
|
||||
|
||||
After saving, run the program and pass the test file name as an argument:
|
||||
7) Run the program, passing the test file name as an argument:
|
||||
|
||||
```bash
|
||||
dotnet run pres.xlsx
|
||||
@ -1484,6 +1651,8 @@ This demo was last tested in the following deployments:
|
||||
|:-------------|:--------------|:---------|:-----------|
|
||||
| `darwin-x64` | `13.1.201.22` | `3.13.1` | 2025-03-31 |
|
||||
| `darwin-arm` | `13.1.201.22` | `3.13.2` | 2025-04-24 |
|
||||
| `win11-x64` | `13.1.201.22` | `3.11.9` | 2025-04-28 |
|
||||
| `linux-x64` | `13.1.201.22` | `3.12.3` | 2025-06-16 |
|
||||
|
||||
:::
|
||||
|
||||
@ -1515,7 +1684,7 @@ download and install version `13.0.245.16` for Python `3.13` on `darwin-arm`:
|
||||
|
||||
```bash
|
||||
curl -LO https://github.com/cloudflare/stpyv8/releases/download/v13.1.201.22/stpyv8-13.1.201.22-cp313-cp313-macosx_14_0_arm64.whl
|
||||
sudo python -m pip install --upgrade stpyv8-13.1.201.22-cp313-cp313-macosx_14_0_arm64.whl --break-system-packages
|
||||
sudo python -m pip install --break-system-packages --upgrade stpyv8-13.1.201.22-cp313-cp313-macosx_14_0_arm64.whl
|
||||
```
|
||||
|
||||
:::
|
||||
@ -1548,6 +1717,26 @@ python sheetjs-stpyv8.py pres.xlsx
|
||||
The script will display CSV rows from the first worksheet. It will also create
|
||||
`SheetJSSTPyV8.xlsb`, a workbook that can be opened with a spreadsheet editor.
|
||||
|
||||
:::caution pass
|
||||
|
||||
On Windows, this may fail with a `charmap` error:
|
||||
|
||||
```
|
||||
return codecs.charmap_decode(input,self.errors,decoding_table)[0]
|
||||
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
|
||||
UnicodeDecodeError: 'charmap' codec can't decode byte 0x90 in position 380: character maps to <undefined>
|
||||
```
|
||||
|
||||
`sheetjs-stpyv8.py` must be altered to read `xlsx.full.min.js` with mode `rb`:
|
||||
|
||||
```python title="sheetjs-stpyv8.py (edit highlighted line)"
|
||||
# Read xlsx.full.min.js
|
||||
# highlight-next-line
|
||||
with open("xlsx.full.min.js", "rb") as f:
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## Snapshots
|
||||
|
||||
At a high level, V8 snapshots are raw dumps of the V8 engine state. It is much
|
||||
@ -1574,8 +1763,8 @@ This demo was last tested in the following deployments:
|
||||
|:-------------|:--------------|:----------|:-----------|
|
||||
| `darwin-x64` | `13.5.212.10` | `136.0.0` | 2025-04-21 |
|
||||
| `darwin-arm` | `13.5.212.10` | `136.0.0` | 2025-04-24 |
|
||||
| `win11-x64` | `12.6.228.3` | `0.92.0` | 2024-12-20 |
|
||||
| `linux-x64` | `12.6.228.3` | `0.92.0` | 2025-01-02 |
|
||||
| `win11-x64` | `13.5.212.10` | `136.0.0` | 2025-05-11 |
|
||||
| `linux-x64` | `13.5.212.10` | `136.0.0` | 2025-06-16 |
|
||||
| `linux-arm` | `13.4.114.9` | `134.4.0` | 2025-02-15 |
|
||||
|
||||
:::
|
||||
|
@ -30,22 +30,23 @@ This demo was tested in the following deployments:
|
||||
|
||||
| OpenJDK | Rhino | Date |
|
||||
|:--------|:---------|:-----------|
|
||||
| 23.0.1 | `1.7.15` | 2025-01-10 |
|
||||
| 22.0.2 | `1.7.15` | 2025-01-10 |
|
||||
| 21.0.5 | `1.7.15` | 2025-01-10 |
|
||||
| 20.0.2 | `1.7.15` | 2025-01-10 |
|
||||
| 19.0.2 | `1.7.15` | 2025-01-10 |
|
||||
| 18.0.2 | `1.7.15` | 2025-01-10 |
|
||||
| 17.0.13 | `1.7.15` | 2025-01-10 |
|
||||
| 16.0.2 | `1.7.15` | 2025-01-10 |
|
||||
| 15.0.2 | `1.7.15` | 2025-01-10 |
|
||||
| 14.0.2 | `1.7.15` | 2025-01-10 |
|
||||
| 13.0.2 | `1.7.15` | 2025-01-10 |
|
||||
| 12.0.2 | `1.7.15` | 2025-01-10 |
|
||||
| 11.0.25 | `1.7.15` | 2025-01-10 |
|
||||
| 10.0.2 | `1.7.15` | 2025-01-10 |
|
||||
| 9.0.4 | `1.7.15` | 2025-01-10 |
|
||||
| 1.8.0 | `1.7.15` | 2025-01-10 |
|
||||
| 24.0.1 | `1.7.15` | 2025-05-06 |
|
||||
| 23.0.2 | `1.7.15` | 2025-05-06 |
|
||||
| 22.0.2 | `1.7.15` | 2025-05-06 |
|
||||
| 21.0.7 | `1.7.15` | 2025-05-06 |
|
||||
| 20.0.2 | `1.7.15` | 2025-05-06 |
|
||||
| 19.0.2 | `1.7.15` | 2025-05-06 |
|
||||
| 18.0.2 | `1.7.15` | 2025-05-06 |
|
||||
| 17.0.15 | `1.7.15` | 2025-05-06 |
|
||||
| 16.0.1 | `1.7.15` | 2025-05-06 |
|
||||
| 15.0.10 | `1.7.15` | 2025-05-06 |
|
||||
| 14.0.2 | `1.7.15` | 2025-05-06 |
|
||||
| 13.0.2 | `1.7.15` | 2025-05-06 |
|
||||
| 12.0.1 | `1.7.15` | 2025-05-06 |
|
||||
| 11.0.27 | `1.7.15` | 2025-05-06 |
|
||||
| 10 | `1.7.15` | 2025-05-06 |
|
||||
| 9.0.4 | `1.7.15` | 2025-05-06 |
|
||||
| 1.8.0 | `1.7.15` | 2025-05-06 |
|
||||
|
||||
:::
|
||||
|
||||
|
@ -165,9 +165,9 @@ This demo was tested in the following deployments:
|
||||
|:-------------|:--------|:-----------|
|
||||
| `darwin-x64` | `4.2.1` | 2025-03-31 |
|
||||
| `darwin-arm` | `4.2.0` | 2025-02-13 |
|
||||
| `win11-x64` | `4.1.0` | 2024-12-20 |
|
||||
| `win11-x64` | `4.2.2` | 2026-04-28 |
|
||||
| `win11-arm` | `4.2.0` | 2025-02-23 |
|
||||
| `linux-x64` | `4.1.0` | 2025-01-09 |
|
||||
| `linux-x64` | `4.2.2` | 2025-06-16 |
|
||||
| `linux-arm` | `4.2.0` | 2025-02-15 |
|
||||
|
||||
:::
|
||||
@ -248,7 +248,7 @@ dotnet run
|
||||
|
||||
```bash
|
||||
dotnet nuget add source https://www.myget.org/F/jint/api/v3/index.json
|
||||
dotnet add package Jint --version 4.2.1
|
||||
dotnet add package Jint --version 4.2.2
|
||||
```
|
||||
|
||||
To verify Jint is installed, replace `Program.cs` with the following:
|
||||
@ -283,6 +283,25 @@ curl -LO https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.full.min.js
|
||||
curl -LO https://docs.sheetjs.com/pres.xlsx`}
|
||||
</CodeBlock>
|
||||
|
||||
:::caution pass
|
||||
|
||||
PowerShell `curl` is incompatible with the official `curl` program. The command
|
||||
may fail with a parameter error:
|
||||
|
||||
```
|
||||
Invoke-WebRequest : A parameter cannot be found that matches parameter name 'LO'.
|
||||
```
|
||||
|
||||
`curl.exe` must be used instead:
|
||||
|
||||
<CodeBlock language="bash">{`\
|
||||
curl.exe -LO https://cdn.sheetjs.com/xlsx-${current}/package/dist/shim.min.js
|
||||
curl.exe -LO https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.full.min.js
|
||||
curl.exe -LO https://docs.sheetjs.com/pres.xlsx`}
|
||||
</CodeBlock>
|
||||
|
||||
:::
|
||||
|
||||
6) Replace `Program.cs` with the following:
|
||||
|
||||
```csharp title="Program.cs"
|
||||
@ -499,7 +518,7 @@ cp bin/Release/net*/linux-arm64/publish/SheetJSJint .
|
||||
For Windows 11 x64, the RID is `win-x64` and the command is:
|
||||
|
||||
```powershell
|
||||
copy .\bin\Release\net9.0\win-x64\publish\SheetJSJint.exe .
|
||||
copy .\bin\Release\net*\win-x64\publish\SheetJSJint.exe .
|
||||
```
|
||||
|
||||
:::caution pass
|
||||
@ -513,7 +532,7 @@ The system cannot find the path specified.
|
||||
The correct command was
|
||||
|
||||
```powershell
|
||||
copy .\bin\x64\Release\net9.0\win-x64\publish\SheetJSJint.exe .
|
||||
copy .\bin\x64\Release\net*\win-x64\publish\SheetJSJint.exe .
|
||||
```
|
||||
|
||||
:::
|
||||
|
@ -106,10 +106,10 @@ This demo was tested in the following deployments:
|
||||
| Architecture | Git Commit | Go version | Date |
|
||||
|:-------------|:-----------|:-----------|:-----------|
|
||||
| `darwin-x64` | `bcd7cc6` | `1.24.1` | 2025-03-31 |
|
||||
| `darwin-arm` | `5ef83b8` | `1.24.0` | 2025-02-13 |
|
||||
| `win11-x64` | `79f3a7e` | `1.23.4` | 2024-12-20 |
|
||||
| `darwin-arm` | `cb187b0` | `1.24.0` | 2025-06-18 |
|
||||
| `win11-x64` | `bcd7cc6` | `1.24.2` | 2025-04-28 |
|
||||
| `win11-arm` | `5ef83b8` | `1.24.0` | 2025-02-23 |
|
||||
| `linux-x64` | `79f3a7e` | `1.22.0` | 2025-01-02 |
|
||||
| `linux-x64` | `cb187b0` | `1.22.2` | 2025-06-16 |
|
||||
| `linux-arm` | `5ef83b8` | `1.19.8` | 2025-02-15 |
|
||||
|
||||
At the time of writing, Goja did not have proper version numbers. Versions are
|
||||
@ -141,12 +141,48 @@ curl -LO https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.full.min.js
|
||||
curl -LO https://docs.sheetjs.com/pres.numbers`}
|
||||
</CodeBlock>
|
||||
|
||||
:::caution pass
|
||||
|
||||
PowerShell `curl` is incompatible with the official `curl` program. The command
|
||||
may fail with a parameter error:
|
||||
|
||||
```
|
||||
Invoke-WebRequest : A parameter cannot be found that matches parameter name 'LO'.
|
||||
```
|
||||
|
||||
`curl.exe` must be used instead:
|
||||
|
||||
<CodeBlock language="bash">{`\
|
||||
curl.exe -LO https://cdn.sheetjs.com/xlsx-${current}/package/dist/shim.min.js
|
||||
curl.exe -LO https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.full.min.js
|
||||
curl.exe -LO https://docs.sheetjs.com/pres.numbers`}
|
||||
</CodeBlock>
|
||||
|
||||
:::
|
||||
|
||||
2) Download [`SheetGoja.go`](pathname:///goja/SheetGoja.go):
|
||||
|
||||
```bash
|
||||
curl -LO https://docs.sheetjs.com/goja/SheetGoja.go
|
||||
```
|
||||
|
||||
:::caution pass
|
||||
|
||||
PowerShell `curl` is incompatible with the official `curl` program. The command
|
||||
may fail with a parameter error:
|
||||
|
||||
```
|
||||
Invoke-WebRequest : A parameter cannot be found that matches parameter name 'LO'.
|
||||
```
|
||||
|
||||
`curl.exe` must be used instead:
|
||||
|
||||
```bash
|
||||
curl.exe -LO https://docs.sheetjs.com/goja/SheetGoja.go
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
3) Build the standalone `SheetGoja` binary:
|
||||
|
||||
```bash
|
||||
|
@ -105,22 +105,23 @@ This demo was tested in the following deployments:
|
||||
|
||||
| OpenJDK | Nashorn | Date |
|
||||
|:--------|:----------------|:-----------|
|
||||
| 23.0.1 | 15.4 standalone | 2024-12-17 |
|
||||
| 22.0.2 | 15.4 standalone | 2024-12-17 |
|
||||
| 21.0.5 | 15.4 standalone | 2024-12-17 |
|
||||
| 20.0.2 | 15.4 standalone | 2024-12-17 |
|
||||
| 19.0.2 | 15.4 standalone | 2024-12-17 |
|
||||
| 18.0.2 | 15.4 standalone | 2024-12-17 |
|
||||
| 17.0.13 | 15.4 standalone | 2024-12-17 |
|
||||
| 16.0.1 | 15.4 standalone | 2024-12-17 |
|
||||
| 15.0.10 | 15.4 standalone | 2024-12-17 |
|
||||
| 14.0.2 | Built-in | 2024-12-17 |
|
||||
| 13.0.14 | Built-in | 2024-12-17 |
|
||||
| 12.0.2 | Built-in | 2024-12-17 |
|
||||
| 11.0.25 | Built-in | 2024-12-17 |
|
||||
| 10.0.2 | Built-in | 2024-12-17 |
|
||||
| 9 | Built-in | 2024-12-17 |
|
||||
| 1.8.0 | Built-in | 2024-12-17 |
|
||||
| 24.0.1 | 15.4 standalone | 2025-05-06 |
|
||||
| 23.0.2 | 15.4 standalone | 2025-05-06 |
|
||||
| 22.0.2 | 15.4 standalone | 2025-05-06 |
|
||||
| 21.0.7 | 15.4 standalone | 2025-05-06 |
|
||||
| 20.0.2 | 15.4 standalone | 2025-05-06 |
|
||||
| 19.0.2 | 15.4 standalone | 2025-05-06 |
|
||||
| 18.0.2 | 15.4 standalone | 2025-05-06 |
|
||||
| 17.0.15 | 15.4 standalone | 2025-05-06 |
|
||||
| 16.0.1 | 15.4 standalone | 2025-05-06 |
|
||||
| 15.0.10 | 15.4 standalone | 2025-05-06 |
|
||||
| 14.0.2 | Built-in | 2025-05-06 |
|
||||
| 13.0.2 | Built-in | 2025-05-06 |
|
||||
| 12.0.1 | Built-in | 2025-05-06 |
|
||||
| 11.0.27 | Built-in | 2025-05-06 |
|
||||
| 10 | Built-in | 2025-05-06 |
|
||||
| 9.0.4 | Built-in | 2025-05-06 |
|
||||
| 1.8.0 | Built-in | 2025-05-06 |
|
||||
|
||||
:::
|
||||
|
||||
|
@ -267,7 +267,7 @@ This demo was tested in the following deployments:
|
||||
| `darwin-arm` | QuickJS | `3306254` | 2025-04-24 |
|
||||
| `win11-x64` | QuickJS-NG | `865ba1f` | 2025-04-18 |
|
||||
| `win11-arm` | QuickJS-NG | `865ba1f` | 2025-04-18 |
|
||||
| `linux-x64` | QuickJS | `6e2e68f` | 2025-01-09 |
|
||||
| `linux-x64` | QuickJS | `3306254` | 2025-06-18 |
|
||||
| `linux-arm` | QuickJS | `6e2e68f` | 2025-02-15 |
|
||||
|
||||
When the demo was tested, `0d7aaed` was the HEAD commit on the `master` branch.
|
||||
|
@ -374,33 +374,33 @@ fork, which powers React Native for Windows, does have built-in support[^5]
|
||||
|
||||
| Architecture | Git Commit | Date |
|
||||
|:-------------|:-----------|:-----------|
|
||||
| `win11-x64` | `4c64b05` | 2024-12-20 |
|
||||
| `win11-x64` | `254fb48` | 2025-04-28 |
|
||||
| `win11-arm` | `4c64b05` | 2025-02-23 |
|
||||
|
||||
The ["Windows Example"](#windows-example) covers `hermes-windows`.
|
||||
|
||||
:::
|
||||
|
||||
0) Install [dependencies](https://hermesengine.dev/docs/building-and-running/#dependencies)
|
||||
0) Install [dependencies](https://github.com/facebook/hermes/blob/eda3c083a57e9aa3b5b04df12ef8588b2961c02e/doc/BuildingAndRunning.md#dependencies)
|
||||
|
||||
<details>
|
||||
<summary><b>Installation Notes</b> (click to show)</summary>
|
||||
|
||||
The official guidance[^6] has been verified in macOS and HoloOS (Linux).
|
||||
|
||||
On macOS:
|
||||
On macOS, the Xcode command-line tools ship with `git`. The other dependencies
|
||||
should be installed with `brew`:
|
||||
|
||||
```bash
|
||||
brew install icu4c cmake ninja
|
||||
```
|
||||
|
||||
On HoloOS (and other Arch Linux distros):
|
||||
On HoloOS (and other Arch Linux distros), the dependencies must be installed
|
||||
from the root user (using `sudo`):
|
||||
|
||||
```bash
|
||||
sudo pacman -Syu cmake git ninja icu python zip readline
|
||||
```
|
||||
|
||||
On Debian and Ubuntu:
|
||||
On Debian and Ubuntu, `python-is-python3` should be installed:
|
||||
|
||||
```bash
|
||||
sudo apt install cmake git ninja-build libicu-dev python3 python-is-python3 zip libreadline-dev
|
||||
@ -408,7 +408,7 @@ sudo apt install cmake git ninja-build libicu-dev python3 python-is-python3 zip
|
||||
|
||||
:::note pass
|
||||
|
||||
When using virtual machines, Linux builds require at least 8 GB memory.
|
||||
Linux builds require at least 8 GB memory.
|
||||
|
||||
:::
|
||||
|
||||
@ -690,7 +690,7 @@ cd sheetjs-hermes
|
||||
```bash
|
||||
git clone https://github.com/microsoft/hermes-windows
|
||||
cd hermes-windows
|
||||
git checkout 4c64b05
|
||||
git checkout 254fb48
|
||||
cd ..
|
||||
```
|
||||
|
||||
@ -849,7 +849,7 @@ This demo was tested in the following deployments:
|
||||
|:-------------|:---------|:-----------|
|
||||
| `darwin-x64` | `0.13.0` | 2025-03-31 |
|
||||
| `darwin-arm` | `0.13.0` | 2025-04-23 |
|
||||
| `win11-x64` | `0.13.0` | 2024-12-20 |
|
||||
| `win11-x64` | `0.13.0` | 2025-04-28 |
|
||||
| `win11-arm` | `0.13.0` | 2025-02-23 |
|
||||
| `linux-x64` | `0.13.0` | 2025-04-21 |
|
||||
|
||||
@ -978,6 +978,5 @@ If successful, the script will print CSV data from the test file.
|
||||
[^3]: See ["Workbook Object"](/docs/csf/book)
|
||||
[^4]: See [`sheet_to_csv` in "Utilities"](/docs/api/utilities/csv#csv-output)
|
||||
[^5]: See [`microsoft/hermes-windows`](https://github.com/microsoft/hermes-windows) on GitHub
|
||||
[^6]: See ["Dependencies" in "Building and Running"](https://hermesengine.dev/docs/building-and-running/#dependencies) in the Hermes Documentation. If this page redirects to the source repo, [see the following `archive.org` snapshot.](https://web.archive.org/web/20240103234151/http://hermesengine.dev/docs/building-and-running/)
|
||||
[^7]: See ["Download Python"](https://www.python.org/downloads/) in the Python website. When the demo was last tested, Python 3.11.9 was installed.
|
||||
[^8]: See [the Visual Studio website](https://visualstudio.microsoft.com/#vs-section) for download links.
|
||||
|
@ -89,7 +89,7 @@ This demo was tested in the following deployments:
|
||||
|:-------------|:---------|:---------|:-----------|
|
||||
| `darwin-x64` | `2.6.10` | `2.10.0` | 2025-03-31 |
|
||||
| `darwin-arm` | `2.6.10` | `2.10.0` | 2025-02-13 |
|
||||
| `win11-x64` | `3.3.6` | `2.10.0` | 2024-12-20 |
|
||||
| `win11-x64` | `3.3.8` | `2.10.0` | 2025-04-28 |
|
||||
| `win11-arm` | `3.2.3` | `2.10.0` | 2025-02-23 |
|
||||
| `linux-x64` | `3.2.3` | `2.10.0` | 2025-04-21 |
|
||||
| `linux-arm` | `3.1.2` | `2.10.0` | 2025-02-15 |
|
||||
@ -157,12 +157,47 @@ curl -LO https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.full.min.js
|
||||
curl -LO https://docs.sheetjs.com/pres.numbers`}
|
||||
</CodeBlock>
|
||||
|
||||
:::caution pass
|
||||
|
||||
PowerShell `curl` is incompatible with the official `curl` program. The command
|
||||
may fail with a parameter error:
|
||||
|
||||
```
|
||||
Invoke-WebRequest : A parameter cannot be found that matches parameter name 'LO'.
|
||||
```
|
||||
|
||||
`curl.exe` must be used instead:
|
||||
|
||||
<CodeBlock language="bash">{`\
|
||||
curl.exe -LO https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.full.min.js
|
||||
curl.exe -LO https://docs.sheetjs.com/pres.numbers`}
|
||||
</CodeBlock>
|
||||
|
||||
:::
|
||||
|
||||
3) Download [`ExecSheetJS.rb`](pathname:///execjs/ExecSheetJS.rb):
|
||||
|
||||
```bash
|
||||
curl -LO https://docs.sheetjs.com/execjs/ExecSheetJS.rb
|
||||
```
|
||||
|
||||
:::caution pass
|
||||
|
||||
PowerShell `curl` is incompatible with the official `curl` program. The command
|
||||
may fail with a parameter error:
|
||||
|
||||
```
|
||||
Invoke-WebRequest : A parameter cannot be found that matches parameter name 'LO'.
|
||||
```
|
||||
|
||||
`curl.exe` must be used instead:
|
||||
|
||||
```bash
|
||||
curl.exe -LO https://docs.sheetjs.com/execjs/ExecSheetJS.rb
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
4) Run the demo:
|
||||
|
||||
```bash
|
||||
|
@ -133,10 +133,10 @@ This demo was tested in the following deployments:
|
||||
| Architecture | Git Commit | Date |
|
||||
|:-------------|:-----------|:-----------|
|
||||
| `darwin-x64` | `36becec` | 2025-03-31 |
|
||||
| `darwin-arm` | `e26c81f` | 2025-01-13 |
|
||||
| `win11-x64` | `e26c81f` | 2024-12-19 |
|
||||
| `darwin-arm` | `36becec` | 2025-06-20 |
|
||||
| `win11-x64` | `36becec` | 2025-04-28 |
|
||||
| `win11-arm` | `e26c81f` | 2025-02-23 |
|
||||
| `linux-x64` | `e26c81f` | 2025-01-09 |
|
||||
| `linux-x64` | `36becec` | 2025-06-18 |
|
||||
|
||||
:::
|
||||
|
||||
@ -152,8 +152,17 @@ brew install icu4c cmake
|
||||
</TabItem>
|
||||
<TabItem value="darwin-arm" label="ARM64 Mac">
|
||||
|
||||
:::caution pass
|
||||
|
||||
When this demo was last tested, the Homebrew version of `cmake` did not support
|
||||
the project. Cmake version 3 should be installed. Binary releases can be found
|
||||
[at the Cmake project website](https://cmake.org/) or installed using Homebrew
|
||||
with third-party formulae.
|
||||
|
||||
:::
|
||||
|
||||
```bash
|
||||
brew install icu4c cmake
|
||||
brew install icu4c botantony/cmake3/cmake3
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
@ -163,6 +172,12 @@ On Arch Linux / HoloOS:
|
||||
|
||||
```bash
|
||||
sudo pacman -S cmake clang
|
||||
```
|
||||
|
||||
On Debian / Ubuntu:
|
||||
|
||||
```bash
|
||||
sudo apt-get install cmake clang
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
@ -276,12 +291,14 @@ When the demo was last tested, ChakraCore JIT was not supported.
|
||||
|
||||
```bash
|
||||
cd ChakraCore
|
||||
./build.sh --static --icu=/usr/local/opt/icu4c/include --test-build -j=8 --no-jit
|
||||
export PATH="$(brew --prefix cmake3)/bin:${PATH}"
|
||||
./build.sh --static --icu=$(brew --prefix)/opt/icu4c/include --test-build -j=8 --no-jit
|
||||
cd ..
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
:::note pass
|
||||
:::caution Troubleshooting
|
||||
|
||||
In some test runs, the build failed with the message:
|
||||
|
||||
@ -298,9 +315,7 @@ ln -s /opt/homebrew/opt/icu4c usr/local/opt/icu4c
|
||||
cd ..
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
:::caution pass
|
||||
---
|
||||
|
||||
In some test runs, compilation failed with `operator` errors:
|
||||
|
||||
@ -347,6 +362,25 @@ index 5a3a099bc..e05a7390f 100644
|
||||
#endif
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
In some test runs, compilation failed with C++17 errors:
|
||||
|
||||
```
|
||||
/opt/homebrew/opt/icu4c/include/unicode/char16ptr.h:271:38: error: no template named 'enable_if_t' in namespace 'std'
|
||||
271 | template<typename T, typename = std::enable_if_t<std::is_same_v<T, UChar>>>
|
||||
| ~~~~~^
|
||||
```
|
||||
|
||||
ChakraCore can be compiled without ICU support:
|
||||
|
||||
```bash
|
||||
cd ChakraCore
|
||||
export PATH="$(brew --prefix cmake3)/bin:${PATH}"
|
||||
./build.sh --static --no-icu --test-build -j=8 --no-jit
|
||||
cd ..
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
</TabItem>
|
||||
@ -575,7 +609,7 @@ If successful, the program will print the contents of the first sheet as CSV.
|
||||
|
||||
:::note Tested Deployments
|
||||
|
||||
This demo was last tested on 2025-03-31 against `ch` commit `36becec`.
|
||||
This demo was last tested on 2025-06-20 against `ch` commit `36becec`.
|
||||
|
||||
:::
|
||||
|
||||
|
@ -106,7 +106,7 @@ This demo was tested in the following deployments:
|
||||
|:-------------|:---------|:-----------|
|
||||
| `darwin-x64` | `0.20.0` | 2025-03-31 |
|
||||
| `darwin-arm` | `0.20.0` | 2025-02-13 |
|
||||
| `win11-x64` | `0.20.0` | 2024-12-19 |
|
||||
| `win11-x64` | `0.20.0` | 2025-04-28 |
|
||||
| `win11-arm` | `0.20.0` | 2025-02-23 |
|
||||
| `linux-x64` | `0.20.0` | 2025-04-21 |
|
||||
| `linux-arm` | `0.20.0` | 2025-02-15 |
|
||||
@ -152,12 +152,47 @@ curl -LO https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.full.min.js
|
||||
curl -LO https://docs.sheetjs.com/pres.xlsx`}
|
||||
</CodeBlock>
|
||||
|
||||
:::caution pass
|
||||
|
||||
PowerShell `curl` is incompatible with the official `curl` program. The command
|
||||
may fail with a parameter error:
|
||||
|
||||
```
|
||||
Invoke-WebRequest : A parameter cannot be found that matches parameter name 'LO'.
|
||||
```
|
||||
|
||||
`curl.exe` must be used instead:
|
||||
|
||||
<CodeBlock language="bash">{`\
|
||||
curl.exe -LO https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.full.min.js
|
||||
curl.exe -LO https://docs.sheetjs.com/pres.xlsx`}
|
||||
</CodeBlock>
|
||||
|
||||
:::
|
||||
|
||||
4) Download [`main.rs`](pathname:///boa/main.rs) and replace `src/main.rs`:
|
||||
|
||||
```bash
|
||||
curl -L -o src/main.rs https://docs.sheetjs.com/boa/main.rs
|
||||
```
|
||||
|
||||
:::caution pass
|
||||
|
||||
PowerShell `curl` is incompatible with the official `curl` program. The command
|
||||
may fail with a parameter error:
|
||||
|
||||
```
|
||||
Invoke-WebRequest : A parameter cannot be found that matches parameter name 'LO'.
|
||||
```
|
||||
|
||||
`curl.exe` must be used instead:
|
||||
|
||||
```bash
|
||||
curl.exe -L -o src/main.rs https://docs.sheetjs.com/boa/main.rs
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
5) Build and run the app in release mode:
|
||||
|
||||
```bash
|
||||
|
@ -129,7 +129,7 @@ This demo was tested in the following deployments:
|
||||
|:-------------|:--------|:-----------|
|
||||
| `darwin-x64` | `0.066` | 2025-03-31 |
|
||||
| `darwin-arm` | `0.066` | 2025-02-13 |
|
||||
| `linux-x64` | `0.066` | 2025-01-10 |
|
||||
| `linux-x64` | `0.066` | 2025-06-16 |
|
||||
| `linux-arm` | `0.066` | 2025-02-15 |
|
||||
|
||||
:::
|
||||
|
@ -54,13 +54,14 @@ This demo was tested in the following deployments:
|
||||
|
||||
| OpenJDK | GraalJS | Date |
|
||||
|:--------|:--------|:-----------|
|
||||
| 23.0.1 | 24.1.1 | 2024-12-17 |
|
||||
| 22.0.2 | 24.1.1 | 2024-12-17 |
|
||||
| 21.0.5 | 24.1.1 | 2024-12-17 |
|
||||
| 20.0.2 | 24.1.1 | 2024-12-17 |
|
||||
| 19.0.2 | 24.1.1 | 2024-12-17 |
|
||||
| 18.0.2 | 24.1.1 | 2024-12-17 |
|
||||
| 17.0.13 | 24.1.1 | 2024-12-17 |
|
||||
| 24.0.1 | 24.2.1 | 2025-05-06 |
|
||||
| 23.0.2 | 24.2.1 | 2025-05-06 |
|
||||
| 22.0.2 | 24.2.1 | 2025-05-06 |
|
||||
| 21.0.7 | 24.2.1 | 2025-05-06 |
|
||||
| 20.0.2 | 24.2.1 | 2025-05-06 |
|
||||
| 19.0.2 | 24.2.1 | 2025-05-06 |
|
||||
| 18.0.2 | 24.2.1 | 2025-05-06 |
|
||||
| 17.0.15 | 24.2.1 | 2025-05-06 |
|
||||
|
||||
:::
|
||||
|
||||
@ -69,14 +70,14 @@ This demo was tested in the following deployments:
|
||||
0) Download GraalJS and its dependencies:
|
||||
|
||||
```bash
|
||||
curl -LO "https://repo1.maven.org/maven2/org/graalvm/js/js-scriptengine/24.1.1/js-scriptengine-24.1.1.jar"
|
||||
curl -LO "https://repo1.maven.org/maven2/org/graalvm/js/js-language/24.1.1/js-language-24.1.1.jar"
|
||||
curl -LO "https://repo1.maven.org/maven2/org/graalvm/polyglot/polyglot/24.1.1/polyglot-24.1.1.jar"
|
||||
curl -LO "https://repo1.maven.org/maven2/org/graalvm/sdk/collections/24.1.1/collections-24.1.1.jar"
|
||||
curl -LO "https://repo1.maven.org/maven2/org/graalvm/truffle/truffle-api/24.1.1/truffle-api-24.1.1.jar"
|
||||
curl -LO "https://repo1.maven.org/maven2/org/graalvm/sdk/nativeimage/24.1.1/nativeimage-24.1.1.jar"
|
||||
curl -LO "https://repo1.maven.org/maven2/org/graalvm/shadowed/icu4j/24.1.1/icu4j-24.1.1.jar"
|
||||
curl -LO "https://repo1.maven.org/maven2/org/graalvm/regex/regex/24.1.1/regex-24.1.1.jar"
|
||||
curl -LO "https://repo1.maven.org/maven2/org/graalvm/js/js-scriptengine/24.2.1/js-scriptengine-24.2.1.jar"
|
||||
curl -LO "https://repo1.maven.org/maven2/org/graalvm/js/js-language/24.2.1/js-language-24.2.1.jar"
|
||||
curl -LO "https://repo1.maven.org/maven2/org/graalvm/polyglot/polyglot/24.2.1/polyglot-24.2.1.jar"
|
||||
curl -LO "https://repo1.maven.org/maven2/org/graalvm/sdk/collections/24.2.1/collections-24.2.1.jar"
|
||||
curl -LO "https://repo1.maven.org/maven2/org/graalvm/truffle/truffle-api/24.2.1/truffle-api-24.2.1.jar"
|
||||
curl -LO "https://repo1.maven.org/maven2/org/graalvm/sdk/nativeimage/24.2.1/nativeimage-24.2.1.jar"
|
||||
curl -LO "https://repo1.maven.org/maven2/org/graalvm/shadowed/icu4j/24.2.1/icu4j-24.2.1.jar"
|
||||
curl -LO "https://repo1.maven.org/maven2/org/graalvm/regex/regex/24.2.1/regex-24.2.1.jar"
|
||||
```
|
||||
|
||||
1) Download the SheetJS Standalone script, shim script and test file. Move all
|
||||
@ -117,14 +118,14 @@ CSV rows from the first worksheet.
|
||||
<TabItem value="unix" label="Linux/MacOS">
|
||||
|
||||
```bash
|
||||
java -cp ".:js-scriptengine-24.1.1.jar:js-language-24.1.1.jar:polyglot-24.1.1.jar:collections-24.1.1.jar:truffle-api-24.1.1.jar:nativeimage-24.1.1.jar:icu4j-24.1.1.jar:regex-24.1.1.jar" -Dpolyglot.js.nashorn-compat=true SheetJSNashorn pres.xlsx
|
||||
java -cp ".:js-scriptengine-24.2.1.jar:js-language-24.2.1.jar:polyglot-24.2.1.jar:collections-24.2.1.jar:truffle-api-24.2.1.jar:nativeimage-24.2.1.jar:icu4j-24.2.1.jar:regex-24.2.1.jar" -Dpolyglot.js.nashorn-compat=true SheetJSNashorn pres.xlsx
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
<TabItem value="win" label="Windows">
|
||||
|
||||
```bash
|
||||
java -cp ".;js-scriptengine-24.1.1.jar;js-language-24.1.1.jar;polyglot-24.1.1.jar;collections-24.1.1.jar;truffle-api-24.1.1.jar;nativeimage-24.1.1.jar;icu4j-24.1.1.jar;regex-24.1.1.jar" -D"polyglot.js.nashorn-compat=true" SheetJSNashorn pres.xlsx
|
||||
java -cp ".;js-scriptengine-24.2.1.jar;js-language-24.2.1.jar;polyglot-24.2.1.jar;collections-24.2.1.jar;truffle-api-24.2.1.jar;nativeimage-24.2.1.jar;icu4j-24.2.1.jar;regex-24.2.1.jar" -D"polyglot.js.nashorn-compat=true" SheetJSNashorn pres.xlsx
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
@ -154,14 +155,14 @@ cd sheethorn
|
||||
<TabItem value="unix" label="Linux/MacOS">
|
||||
|
||||
```bash
|
||||
java -cp ".:js-scriptengine-24.1.1.jar:js-language-24.1.1.jar:polyglot-24.1.1.jar:collections-24.1.1.jar:truffle-api-24.1.1.jar:nativeimage-24.1.1.jar:icu4j-24.1.1.jar:regex-24.1.1.jar:SheetJSNashorn.jar" -Dpolyglot.js.nashorn-compat=true SheetJSNashorn pres.xlsx
|
||||
java -cp ".:js-scriptengine-24.2.1.jar:js-language-24.2.1.jar:polyglot-24.2.1.jar:collections-24.2.1.jar:truffle-api-24.2.1.jar:nativeimage-24.2.1.jar:icu4j-24.2.1.jar:regex-24.2.1.jar:SheetJSNashorn.jar" -Dpolyglot.js.nashorn-compat=true SheetJSNashorn pres.xlsx
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
<TabItem value="win" label="Windows">
|
||||
|
||||
```bash
|
||||
java -cp ".;js-scriptengine-24.1.1.jar;js-language-24.1.1.jar;polyglot-24.1.1.jar;collections-24.1.1.jar;truffle-api-24.1.1.jar;nativeimage-24.1.1.jar;icu4j-24.1.1.jar;regex-24.1.1.jar;SheetJSNashorn.jar" -D"polyglot.js.nashorn-compat=true" SheetJSNashorn pres.xlsx
|
||||
java -cp ".;js-scriptengine-24.2.1.jar;js-language-24.2.1.jar;polyglot-24.2.1.jar;collections-24.2.1.jar;truffle-api-24.2.1.jar;nativeimage-24.2.1.jar;icu4j-24.2.1.jar;regex-24.2.1.jar;SheetJSNashorn.jar" -D"polyglot.js.nashorn-compat=true" SheetJSNashorn pres.xlsx
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
|
@ -326,7 +326,7 @@ This demo was tested in the following deployments:
|
||||
| `darwin-arm` | `1.3.5` | 2025-02-13 |
|
||||
| `win11-x64` | `1.3.6` | 2025-04-23 |
|
||||
| `win11-arm` | `1.3.5` | 2025-02-23 |
|
||||
| `linux-x64` | `1.3.5` | 2025-01-09 |
|
||||
| `linux-x64` | `1.3.6` | 2025-06-16 |
|
||||
| `linux-arm` | `1.3.5` | 2025-02-15 |
|
||||
|
||||
:::
|
||||
|
@ -180,7 +180,7 @@ This demo was tested in the following deployments:
|
||||
| `darwin-arm` | `3.2.9` | 2025-03-30 |
|
||||
| `win11-x64` | `3.2.9` | 2025-04-23 |
|
||||
| `win11-arm` | `3.2.9` | 2025-02-23 |
|
||||
| `linux-x64` | `3.2.8` | 2025-01-10 |
|
||||
| `linux-x64` | `3.2.9` | 2025-06-16 |
|
||||
| `linux-arm` | `3.2.9` | 2025-02-15 |
|
||||
|
||||
:::
|
||||
|
@ -1,4 +1,4 @@
|
||||
{
|
||||
"label": "Other Languages",
|
||||
"label": "JavaScript Engines",
|
||||
"position": 42
|
||||
}
|
@ -151,7 +151,7 @@ function ConcatFormula(props) {
|
||||
|
||||
/* Process ArrayBuffer */
|
||||
const process_ab = (ab) => {
|
||||
const wb = XLSX.read(ab, {cellFormula: true, sheetStubs: true});
|
||||
const wb = XLSX.read(ab, {cellFormula: true, sheetStubs: true, xlfn: true});
|
||||
setWS(wb.Sheets[wb.SheetNames[0]]);
|
||||
};
|
||||
|
||||
|
@ -89,7 +89,7 @@ Some properties cannot be changed in spreadsheet applications. The underlying
|
||||
SheetJS output codecs can write arbitrary values.
|
||||
|
||||
The `Props` object understands the "standard" properties listed in the following
|
||||
table. "SheetJS Name" refers to the name of the property in the `Props` object.
|
||||
table. "SheetJS Name" refers to the name of the property in the `Props` object.
|
||||
"Excel Property Setting" refers to the name in the Excel file properties dialog.
|
||||
|
||||
| SheetJS Name | Excel Property Setting |
|
||||
|
@ -39,7 +39,7 @@ It is strongly recommended to create a separate page listing all embedded open
|
||||
source software. The "open source disclosure" should be linked from relevant
|
||||
pages including Terms of Service (ToS) and End User License Agreement (EULA)
|
||||
|
||||
[Office 365](https://web.archive.org/web/20240412032204/https://tasks.office.com/license.html)
|
||||
[Office 365](https://web.archive.org/web/20250511192103/https://tasks.office.com/license.html)
|
||||
includes the short-form attribution in a special license page.
|
||||
|
||||
<details>
|
||||
|
@ -367,7 +367,7 @@ This,is,a,Test
|
||||
The test suite is regularly run against a number of modern and legacy browsers
|
||||
using [Sauce Labs](https://saucelabs.com/).
|
||||
|
||||
The following chart shows test results on 2024-10-20 for version `0.20.3`:
|
||||
The following chart shows test results on 2025-05-15 for version `0.20.3`:
|
||||
|
||||
[](https://saucelabs.com/u/sheetjs)
|
||||
|
||||
|
@ -15,6 +15,10 @@
|
||||
},
|
||||
"overrides": {
|
||||
"@cmfcmf/docusaurus-search-local": {
|
||||
"@algolia/autocomplete-theme-classic": "1.19.1",
|
||||
"@algolia/autocomplete-js": "1.19.1",
|
||||
"@algolia/client-search": "5.25.0",
|
||||
"algoliasearch": "5.25.0",
|
||||
"@docusaurus/core": "3.7.0"
|
||||
}
|
||||
},
|
||||
|
Binary file not shown.
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 12 KiB |
@ -67,7 +67,7 @@ class WriteResource extends Drash.Resource {
|
||||
}
|
||||
|
||||
const server = new Drash.Server({
|
||||
hostname: "",
|
||||
hostname: "0.0.0.0",
|
||||
port: 7262,
|
||||
protocol: "http",
|
||||
resources: [ ParseResource, WriteResource ],
|
||||
|
Binary file not shown.
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 73 KiB |
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user