This commit is contained in:
SheetJS 2022-08-26 01:39:17 -04:00
parent 33778a63bb
commit 94d2754778
30 changed files with 160 additions and 43 deletions

@ -1,5 +1,4 @@
---
sidebar_position: 1
title: Salesforce LWC
---

@ -1,5 +1,4 @@
---
sidebar_position: 19
title: iOS and Android Apps
---

@ -1,5 +1,4 @@
---
sidebar_position: 16
title: Desktop Applications
---

@ -1,5 +1,4 @@
---
sidebar_position: 14
title: Data Grids and UI
---

@ -1,5 +1,4 @@
---
sidebar_position: 3
title: Databases and SQL
---

@ -1,5 +1,4 @@
---
sidebar_position: 20
title: Content and Site Generation
---

@ -1,5 +1,4 @@
---
sidebar_position: 23
title: Angular
---

@ -1,5 +1,4 @@
---
sidebar_position: 21
title: ReactJS
---

@ -1,5 +1,4 @@
---
sidebar_position: 22
title: VueJS
---

@ -0,0 +1,152 @@
---
title: Svelte
---
[Svelte](https://svelte.dev/) is a JS library for building user interfaces.
This demo tries to cover common Svelte data flow ideas and strategies. Svelte
familiarity is assumed.
## Installation
[The "Frameworks" section](../getting-started/installation/frameworks) covers
installation with Yarn and other package managers.
The library can be imported directly from Svelte files with:
```js
import { read, utils, writeFile } from 'xlsx';
```
## Internal State
The various SheetJS APIs work with various data shapes. The preferred state
depends on the application.
### Array of Objects
Typically, some users will create a spreadsheet with source data that should be
loaded into the site. This sheet will have known columns. For example, our
[presidents sheet](https://sheetjs.com/pres.xlsx) has "Name" / "Index" columns:
![`pres.xlsx` data](pathname:///pres.png)
This naturally maps to an array of typed objects, as in the TS example below:
```ts
import { read, utils } from 'xlsx';
interface President {
Name: string;
Index: number;
}
const f = await (await fetch("https://sheetjs.com/pres.xlsx")).arrayBuffer();
const wb = read(f);
const data = utils.sheet_to_json<President>(wb.Sheets[wb.SheetNames[0]]);
console.log(data);
```
`data` will be an array of objects:
```js
[
{ Name: "Bill Clinton", Index: 42 },
{ Name: "GeorgeW Bush", Index: 43 },
{ Name: "Barack Obama", Index: 44 },
{ Name: "Donald Trump", Index: 45 },
{ Name: "Joseph Biden", Index: 46 }
]
```
A component will typically map over the data. The following example generates
a TABLE with a row for each President:
```html title="src/SheetJSSvelteAoO.svelte"
<script>
import { onMount } from 'svelte';
import { read, utils, writeFileXLSX } from 'xlsx';
/* the component state is an array of presidents */
let pres = [];
/* Fetch and update the state once */
onMount(async() => {
const f = await (await fetch("https://sheetjs.com/pres.xlsx")).arrayBuffer();
const wb = read(f); // parse the array buffer
const ws = wb.Sheets[wb.SheetNames[0]]; // get the first worksheet
// highlight-start
pres = utils.sheet_to_json(ws); // generate objects and update state
// highlight-end
})
/* get state data and export to XLSX */
function exportFile() {
// highlight-next-line
const ws = utils.json_to_sheet(pres);
const wb = utils.book_new();
utils.book_append_sheet(wb, ws, "Data");
writeFileXLSX(wb, "SheetJSSvelteAoO.xlsx");
}
</script>
<main>
<table><thead><th>Name</th><th>Index</th></thead><tbody>
<!-- highlight-start -->
{#each pres as p}<tr>
<td>{p.Name}</td>
<td>{p.Index}</td>
</tr>{/each}
<!-- highlight-end -->
</tbody><tfoot><td colSpan={2}>
<button on:click={exportFile}>Export XLSX</button>
</td></tfoot></table>
</main>
```
### HTML
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 well!
The `sheet_to_html` function generates HTML that is aware of merges and other
worksheet features. Svelte `@html` tag allows raw HTML strings:
```html title="src/SheetJSSvelteHTML.svelte"
<script>
import { onMount } from 'svelte';
import { read, utils, writeFileXLSX } from 'xlsx';
let html = "";
let tbl;
/* Fetch and update the state once */
onMount(async() => {
const f = await (await fetch("https://sheetjs.com/pres.xlsx")).arrayBuffer();
const wb = read(f); // parse the array buffer
const ws = wb.Sheets[wb.SheetNames[0]]; // get the first worksheet
// highlight-start
html = utils.sheet_to_html(ws); // generate HTML and update state
// highlight-end
})
/* get state data and export to XLSX */
function exportFile() {
// highlight-start
const elt = tbl.getElementsByTagName("TABLE")[0];
const wb = utils.table_to_book(elt);
// highlight-end
writeFileXLSX(wb, "SheetJSSvelteHTML.xlsx");
}
</script>
<main>
<button on:click={exportFile}>Export XLSX</button>
<!-- highlight-start -->
<div bind:this={tbl}>{@html html}</div>
<!-- highlight-end -->
</main>
```

@ -1,5 +1,4 @@
---
sidebar_position: 9
title: Bundlers
---

@ -1,5 +1,4 @@
---
sidebar_position: 26
title: Amazon Web Services
---

@ -1,5 +1,4 @@
---
sidebar_position: 25
title: Azure Cloud Services
---

@ -1,9 +1,7 @@
---
sidebar_position: 4
title: NetSuite
---
# NetSuite
This demo discusses the key SheetJS operations. Familiarity with SuiteScript 2
is assumed. The following sections of the SuiteScript documentation should be
perused before reading this demo:

@ -1,9 +1,7 @@
---
sidebar_position: 2
title: Adobe Apps
---
# Adobe Apps
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

@ -1,9 +1,7 @@
---
sidebar_position: 5
title: Google Sheets
---
# Google Sheets
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

@ -1,9 +1,7 @@
---
sidebar_position: 10
title: Excel JavaScript API
---
# Excel JavaScript API
Office 2016 introduced a JavaScript API for interacting with the application.
It offers solutions for custom functions as well as task panes.

@ -1,5 +1,4 @@
---
sidebar_position: 13
title: Command-Line Tools
---

@ -1,5 +1,4 @@
---
sidebar_position: 15
title: Chrome Extensions
---

@ -1,5 +1,4 @@
---
sidebar_position: 18
title: JavaScript Engines
---

@ -1,9 +1,7 @@
---
sidebar_position: 17
title: Clipboard Data
---
# Clipboard Data
Spreadsheet software like Excel typically support copying and pasting cells and
data. This is implemented through the Clipboard ("Pasteboard" in MacOS).

@ -1,5 +1,4 @@
---
sidebar_position: 26
title: Local File Access
---

@ -1,10 +1,7 @@
---
sidebar_position: 6
title: HTTP Network Requests
---
# XHR and fetch
<head>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/superagent@7.1.1/dist/superagent.min.js"></script>

@ -1,5 +1,4 @@
---
sidebar_position: 24
title: HTTP Server Processing
---

@ -1,5 +1,4 @@
---
sidebar_position: 11
title: NoSQL Data Stores
---

@ -1,12 +1,10 @@
---
sidebar_position: 7
title: Headless Automation
---
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
# Headless Automation
Headless automation involves controlling "headless browsers" to access websites
and submit or download data. It is also possible to automate browsers using
custom browser extensions.

@ -1,5 +1,4 @@
---
sidebar_position: 8
title: Typed Arrays and ML
---

@ -1,5 +1,4 @@
---
sidebar_position: 12
title: Legacy Frameworks
---

@ -1,6 +1,5 @@
---
pagination_prev: getting-started/index
sidebar_position: 1
hide_table_of_contents: true
---
@ -23,6 +22,7 @@ run in the web browser, demos will include interactive examples.
- [`Angular`](./angular)
- [`React`](./react)
- [`Svelte`](./svelte)
- [`VueJS`](./vue)
- [`Angular.JS`](./legacy#angularjs)
- [`Knockout`](./legacy#knockout)

@ -19,7 +19,7 @@
"@docusaurus/preset-classic": "2.0.1",
"@docusaurus/theme-common": "2.0.1",
"@docusaurus/theme-live-codeblock": "2.0.1",
"@mdx-js/react": "2.1.2",
"@mdx-js/react": "1.6.22",
"clsx": "1.2.1",
"prism-react-renderer": "1.3.5",
"react": "17.0.2",