This commit is contained in:
SheetJS 2022-08-30 18:12:52 -04:00
parent 0cb225361b
commit 62bba8b309
14 changed files with 313 additions and 9 deletions

@ -130,6 +130,7 @@ DOM
DPI
DataGrid
Deno
Dojo
Downloadify
Drash
Duktape

@ -93,3 +93,77 @@ require(['xlsx'], function(XLSX) {
// ... use XLSX here
});
```
## Dojo Toolkit
Dojo has changed module loading strategies over the years. These examples were
tested with Dojo `1.10.4` and are not guaranteed to work with other versions.
Live demos are included in ["Dojo Toolkit"](../../demos/legacy#dojo-toolkit)
:::caution
The standalone scripts add `window.XLSX`, so it is recommended to use `_XLSX`
in the function arguments and access the library with `XLSX` in the callback:
```js
require(["xlsx"], function(
// highlight-next-line
_XLSX // !! NOTE: this is not XLSX! A different variable name must be used
) {
// highlight-next-line
console.log(XLSX.version); // use XLSX in the callback
})
```
:::
#### Synchronous Loading
When `async` is disabled, the scripts can be referenced directly in `require`
calls.
```html
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js" data-dojo-config="isDebug:1, async:0"></script>
<script>
require([
// highlight-next-line
"https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js"
], function(
// highlight-next-line
_XLSX // !! NOTE: this is not XLSX! A different variable name must be used
) {
// ... use XLSX here
})
</script>
```
#### Asynchronous Loading
When `async` is enabled, Dojo will only understand the name `xlsx`. The config
object can map package names to scripts:
```html
<script>
// This setting must appear *before* loading dojo.js
dojoConfig = {
packages: [
// highlight-start
{
name: "xlsx",
// if self-hosting the script, location should be a folder relative to baseUrl setting
location: "https://cdn.sheetjs.com/xlsx-latest/package/dist",
// name of the script (without the .js extension)
main: "xlsx.full.min"
}
// highlight-end
]
}
</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js" data-dojo-config="isDebug:1, async:1"></script>
<script>
require(["xlsx"], function(_XLSX) {
// ... use XLSX here
});
</script>
```

@ -404,8 +404,8 @@ result.forEach(function(row) {
var query = db.prepareQuery("SELECT * FROM '" + row[0] + "' LIMIT 100000")
var aoa = query.all();
if(aoa.length > 0) {
/* Create array of arrays */
var data = [query.columns().map(x => x.name)].concat(aoa);
/* Create array of arrays */
var data = [query.columns().map(x => x.name)].concat(aoa);
/* Create Worksheet from the aoa */
var ws = XLSX.utils.aoa_to_sheet(data, {dense: true});
/* Add to Workbook */

@ -168,6 +168,13 @@ bun bun.js
</details>
## Dojo
Integration details are included [in the "AMD" installation](../getting-started/installation/amd#dojo-toolkit)
Complete Examples are included [in the "Dojo" demo](./legacy#dojo-toolkit)
## esbuild
The `xlsx.mjs` source file are written in a subset of ES6 that `esbuild`

@ -2,6 +2,13 @@
title: Excel JavaScript API
---
:::info
This demo focuses on the JavaScript API included with Excel. For reading and
writing Excel files, [other demos](/docs/demos) cover a wide variety of use cases
:::
Office 2016 introduced a JavaScript API for interacting with the application.
It offers solutions for custom functions as well as task panes.

@ -314,6 +314,18 @@ var wb = XLSX.readFile("sheetjs.numbers");
XLSX.writeFile(wb, "sheetjs.xlsx");
```
### ExtendScript
In Photoshop and other Adobe apps, `readFile` and `writeFile` use the `File`
object under the hood:
```js
#include "xlsx.extendscript.js"
var wb = XLSX.readFile("sheetjs.xlsx");
XLSX.writeFile(wb, "sheetjs.csv");
```
### Deno
`Deno.readFileSync` and `Deno.writeFileSync` are supported by `readFile` and

@ -301,6 +301,94 @@ XLSX.writeFile(wb, "sheetjs.xlsx");
</details>
### Dojo Toolkit
_Live Demos_
- [Download and display data](pathname:///dojo/read.html)
- [Fetch JSON and generate a workbook](pathname:///dojo/write.html)
The ["AMD" instructions](../getting-started/installation/amd#dojo-toolkit)
includes details for use with `require`.
<details><summary><b>Integration in the demos</b> (click to show)</summary>
The demos use the async loading strategy with the SheetJS CDN:
```html
<script>
dojoConfig = {
packages: [
{ name: "xlsx", location: "https://cdn.sheetjs.com/xlsx-latest/package/dist", main: "xlsx.full.min" }
]
}
</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js" data-dojo-config="isDebug:1, async:1"></script>
<script>
require(["dojo/request/xhr", "xlsx"], function(xhr, _XLSX) {
/* XLSX-related operations happen in the callback */
});
</script>
```
</details>
The ["Dojo" section in "Bundlers"](./bundler#dojo) includes a complete example
mirroring the [official example](../getting-started/example)
<details><summary><b>Details</b> (click to show)</summary>
_Reading Data_
When fetching spreadsheets with XHR, `handleAs: "arraybuffer"` yields an
`ArrayBuffer` which can be passed to `XLSX.read`:
```html
<div id="tbl"></div>
<script>
require(["dojo/request/xhr", "xlsx"], function(xhr, _XLSX) {
xhr("https://sheetjs.com/pres.numbers", {
headers: { "X-Requested-With": null },
// highlight-next-line
handleAs: "arraybuffer"
}).then(function(ab) {
/* read ArrayBuffer */
// highlight-next-line
var wb = XLSX.read(ab);
/* display first worksheet data */
var ws = wb.Sheets[wb.SheetNames[0]];
document.getElementById("tbl").innerHTML = XLSX.utils.sheet_to_html(ws);
});
});
</script>
```
:::note
The `X-Requested-With` header setting resolves some issues related to CORS.
:::
_Writing Data_
`XLSX.writeFile` works as expected:
```html
<script>
require(["xlsx"], function(_XLSX) {
var ws = XLSX.utils.aoa_to_sheet(["SheetJS".split(""), [5,4,3,3,7,9,5]]);
var wb = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
/* create an XLSX file and try to save to SheetJSDojo.xlsx */
// highlight-next-line
XLSX.writeFile(workbook, "SheetJSDojo.xlsx");
});
</script>
```
</details>
### KnockoutJS
[KnockoutJS](https://en.wikipedia.org/wiki/Knockout_(web_framework)) was a

@ -34,7 +34,7 @@ explores storing and comparing versions of structured CSV and JSON data. The
official ["Excel to CSV"](https://github.com/githubocto/flat-demo-xlsx) example
uses SheetJS under the hood to generate CSV data from an XLSX file.
This demo covers implementation details elided in the official writeup.
This demo covers implementation details elided in the official write-up.
## Flat Data

@ -25,6 +25,7 @@ run in the web browser, demos will include interactive examples.
- [`Svelte`](./svelte)
- [`VueJS`](./vue)
- [`Angular.JS`](./legacy#angularjs)
- [`Dojo`](./legacy#dojo)
- [`Knockout`](./legacy#knockout)
### Front-End UI Components
@ -50,7 +51,7 @@ run in the web browser, demos will include interactive examples.
- [`ExtendScript for Adobe Apps`](./extendscript)
- [`NetSuite SuiteScript`](./netsuite)
- [`SalesForce Lightning Web Components`](./salesforce)
- [`Excel JavaScript API`](./excel)
- [`Excel JavaScript API`](./excelapi)
- [`Headless Automation`](./headless)
- [`Other JavaScript Engines`](./engines)
- [`Azure Functions and Storage`](./azure)

@ -794,13 +794,40 @@ Readable Stream.
<Tabs>
<TabItem value="nodejs" label="NodeJS">
In a CommonJS context, NodeJS Streams immediately work with SheetJS. This
example reads a worksheet passed as an argument to the script, pulls the first
worksheet, converts to CSV and writes to `out.csv`:
:::note
In a CommonJS context, NodeJS Streams and `fs` immediately work with SheetJS:
```js
const XLSX = require("xlsx");
const XLSX = require("xlsx"); // "just works"
```
In NodeJS ESM, the dependency must be loaded manually:
```js
import * as XLSX from 'xlsx';
import { Readable } from 'stream';
XLSX.stream.set_readable(Readable); // manually load stream helpers
```
Additionally, for file-related operations in NodeJS ESM, `fs` must be loaded:
```js
import * as XLSX from 'xlsx';
import * as fs from 'fs';
XLSX.set_fs(fs); // manually load fs helpers
```
**It is strongly encouraged to use CommonJS in NodeJS whenever possible.**
:::
This example reads a worksheet passed as an argument to the script, pulls the
first worksheet, converts to CSV and writes to `out.csv`:
```js
const workbook = XLSX.readFile(process.argv[2]);
const worksheet = workbook.Sheets[workbook.SheetNames[0]];
// highlight-next-line

@ -91,7 +91,7 @@ The interpretation of date codes requires a shared understanding of date code
The workbook's epoch can be determined by examining the workbook's `wb.Workbook.WBProps.date1904` property:
```js
if(!!(((wb.Workbook||{}).WBProps||{}).date1904)) {
if(!(wb?.Workbook?.WBProps?.date1904)) {
/* uses 1904 date system */
} else {
/* uses 1900 date system */

@ -163,6 +163,9 @@ const config = {
redirects: [
{ from: '/docs/example', to: '/docs/getting-started/example' },
{ from: '/docs/installation', to: '/docs/getting-started/' },
{ from: '/docs/demos/excel', to: '/docs/demos/' },
{ from: '/docs/getting-started/demos/', to: '/docs/demos/' },
{ from: '/docs/getting-started/demos/excel', to: '/docs/demos/' },
]
}]
]

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html>
<head><title>SheetJS + Dojo Read Demo</title></head>
<body>
<h1>SheetJS + Dojo Read Demo</h1>
(this HTML page is not minified -- feel free to view source!)<br/><br/>
<a href="https://docs.sheetjs.com">SheetJS CE Documentation</a><br/><br/>
<b>Table output:</b><br/><br/>
<div id="tbl"></div>
<script>
dojoConfig = { packages: [
{ name: "xlsx", location: "https://cdn.sheetjs.com/xlsx-latest/package/dist", main: "xlsx.full.min" }
] };
</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js" data-dojo-config="isDebug:1, async:1"></script>
<script>
require(["dojo/request/xhr", "xlsx"], function(xhr, _XLSX) {
xhr("https://sheetjs.com/pres.numbers", {
headers: { "X-Requested-With": null },
// highlight-next-line
handleAs: "arraybuffer"
}).then(function(ab) {
/* read ArrayBuffer */
// highlight-next-line
var wb = XLSX.read(ab);
/* display first worksheet data */
var ws = wb.Sheets[wb.SheetNames[0]];
document.getElementById("tbl").innerHTML = XLSX.utils.sheet_to_html(ws);
});
});
</script>
</body>
</html>

@ -0,0 +1,50 @@
<!DOCTYPE html>
<html>
<head><title>SheetJS + Dojo Write Demo</title></head>
<body>
<h1>SheetJS + Dojo Write Demo</h1>
(this HTML page is not minified -- feel free to view source!)<br/><br/>
<a href="https://docs.sheetjs.com">SheetJS CE Documentation</a>
<script>
dojoConfig = { packages: [
{ name: "xlsx", location: "https://cdn.sheetjs.com/xlsx-latest/package/dist", main: "xlsx.full.min" }
] };
</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js" data-dojo-config="isDebug:1, async:1"></script>
<script>
require(["dojo/request/xhr", "xlsx"], function(xhr, _XLSX) {
xhr("https://sheetjs.com/data/executive.json", {
headers: { "X-Requested-With": null },
handleAs: "json"
}).then(function(raw_data) {
/* filter for the Presidents */
var prez = raw_data.filter(function(row) {
return row.terms.some(function(term) { return term.type === "prez"; });
});
/* flatten objects */
var rows = prez.map(function(row) { return ({
name: row.name.first + " " + row.name.last,
birthday: row.bio.birthday
}); });
/* generate worksheet and workbook */
var worksheet = XLSX.utils.json_to_sheet(rows);
var workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, "Dates");
/* fix headers */
XLSX.utils.sheet_add_aoa(worksheet, [["Name", "Birthday"]], { origin: "A1" });
/* calculate column width */
var max_width = rows.reduce(function(w, r) { return Math.max(w, r.name.length); }, 10);
worksheet["!cols"] = [ { wch: max_width } ];
/* create an XLSX file and try to save to Presidents.xlsx */
XLSX.writeFile(workbook, "Presidents.xlsx");
});
});
</script>
</body>
</html>