forked from sheetjs/docs.sheetjs.com
svelte
This commit is contained in:
parent
33778a63bb
commit
94d2754778
@ -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
|
||||
---
|
||||
|
152
docz/docs/03-demos/14-svelte.md
Normal file
152
docz/docs/03-demos/14-svelte.md
Normal file
@ -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",
|
||||
|
Loading…
Reference in New Issue
Block a user