This commit is contained in:
SheetJS 2023-02-17 21:33:30 -05:00
parent e90036e9fd
commit 93e7abd146
25 changed files with 221 additions and 81 deletions

@ -2,7 +2,6 @@
title: Salesforce LWC
pagination_prev: demos/desktop/index
pagination_next: demos/grid
sidebar_position: 1
---
Salesforce apps can use third-party libraries in "Lightning Web Components".

@ -2,7 +2,6 @@
title: Amazon Web Services
pagination_prev: demos/desktop/index
pagination_next: demos/grid
sidebar_position: 2
---
AWS is a Cloud Services platform which includes traditional virtual machine

@ -1,7 +1,7 @@
---
title: Google Sheets
pagination_prev: demos/static/index
pagination_next: demos/cli
pagination_prev: demos/desktop/index
pagination_next: demos/grid
---
import Tabs from '@theme/Tabs';

@ -2,7 +2,6 @@
title: NetSuite
pagination_prev: demos/desktop/index
pagination_next: demos/grid
sidebar_position: 4
---
This demo discusses the key SheetJS operations. Familiarity with SuiteScript 2

@ -1,7 +1,7 @@
---
title: Dropbox
pagination_prev: demos/ml
pagination_next: solutions/input
pagination_prev: demos/desktop/index
pagination_next: demos/grid
---
<head>
@ -45,8 +45,17 @@ When a file is selected, the `success` callback will receive an array of files
(even if `multiselect` is disabled). Each file object has a `link` file which
corresponds to a temporary URL that can be fetched.
If the live demo shows a message about `Dropbox` being undefined, please reload
this demo page.
:::caution
If the live demo shows a message
```
ReferenceError: Dropbox is not defined
```
please refresh the page. This is a known bug in the documentation generator.
:::
```jsx live
function SheetJSChoisissez() {
@ -105,8 +114,17 @@ URI by writing with the `base64` type and prepending the URI metadata.
This demo seeds data by fetching a file and writing to HTML table. The generated
table is scraped to create a new workbook that is written to XLS.
If the live demo shows a message about `Dropbox` being undefined, please reload
this demo page.
:::caution
If the live demo shows a message
```
ReferenceError: Dropbox is not defined
```
please refresh the page. This is a known bug in the documentation generator.
:::
```jsx live
function SheetJSEnregistrez() {

@ -1,7 +1,7 @@
---
title: Airtable
pagination_prev: demos/static/index
pagination_next: demos/cli
pagination_prev: demos/desktop/index
pagination_next: demos/grid
---
At the time of writing (2023 February 15), Airtable recommends Personal Access

@ -2,7 +2,6 @@
title: Azure Cloud Services
pagination_prev: demos/desktop/index
pagination_next: demos/grid
sidebar_position: 3
---
Azure is a Cloud Services platform which includes traditional virtual machine

@ -1,7 +1,7 @@
---
title: GitHub
pagination_prev: demos/ml
pagination_next: solutions/input
pagination_prev: demos/desktop/index
pagination_next: demos/grid
---
Many official data releases by governments and organizations include XLSX or

@ -37,3 +37,19 @@ binary data, so special care must be taken.
- [Amazon Simple Storage Service (S3)](/docs/demos/cloud/aws#s3-storage)
- [Azure Blob Storage](/docs/demos/cloud/azure#azure-blob-storage)
### File Hosting
File hosting services provide simple solutions for storing data, synchronizing
files across devices, and sharing with specific users or customers. Demos:
- [Dropbox](/docs/demos/cloud/dropbox)
- [Github](/docs/demos/cloud/github)
## Cloud Data
Cloud Data Platforms are popular storage media for structured data, typically
offering APIs for programmatic data ingress and egress. Demos:
- [Google Sheets](/docs/demos/cloud/gsheet)
- [Airtable](/docs/demos/cloud/airtable)

@ -1,7 +1,7 @@
---
title: Lume
pagination_prev: demos/extensions/index
pagination_next: demos/cloudata/index
pagination_next: demos/cli
sidebar_custom_props:
type: native
---

@ -1,7 +1,7 @@
---
title: GatsbyJS
pagination_prev: demos/extensions/index
pagination_next: demos/cloudata/index
pagination_next: demos/cli
sidebar_custom_props:
type: native
---

@ -1,7 +1,7 @@
---
title: ViteJS
pagination_prev: demos/extensions/index
pagination_next: demos/cloudata/index
pagination_next: demos/cli
sidebar_custom_props:
type: bundler
---

@ -1,7 +1,7 @@
---
title: NextJS
pagination_prev: demos/extensions/index
pagination_next: demos/cloudata/index
pagination_next: demos/cli
---
:::note

@ -1,7 +1,7 @@
---
title: NuxtJS
pagination_prev: demos/extensions/index
pagination_next: demos/cloudata/index
pagination_next: demos/cli
---
`@nuxt/content` is a file-based CMS for Nuxt, enabling static-site generation

@ -0,0 +1,120 @@
---
title: AstroJS
pagination_prev: demos/extensions/index
pagination_next: demos/cli
---
:::note
This demo uses ["Base64 Loader"](/docs/demos/static/vitejs#base64-loader)
from the ViteJS demo.
:::
Astro is a site generator. Astro projects use ViteJS under the hood, and Astro
exposes project configuration through the `vite` property in `astro.config.mjs`.
The [ViteJS demo](/docs/demos/static/vitejs) examples work as expected!
## Integration
:::note
The ViteJS demo used the query `?b64` to identify files. To play nice with
Astro, this demo matches the file extensions directly.
:::
Since Astro performs per-page heavy lifting at build time, it is recommended to
use the Base64 string loader to get file data and parse with the SheetJS library
in the relevant pages. If the SheetJS operations are performed in frontmatter,
only the results will be added to the generated pages!
#### Loader
The loader should be added to `astro.config.mjs` under the `vite` key.
```js title="astro.config.mjs"
import { readFileSync } from 'fs';
import { defineConfig } from 'astro/config';
export default defineConfig({
vite: {
// this tells astro which extensions to handle
assetsInclude: ['**/*.numbers', '**/*.xlsx'],
plugins: [
{ // this plugin presents the data as a Base64 string
name: "sheet-base64",
transform(code, id) {
if(!id.match(/\.(numbers|xlsx)$/)) return;
var data = readFileSync(id, "base64");
return `export default '${data}'`;
}
}
]
}
});
```
#### Types
For VSCodium integration, types can be specified in `src/env.d.ts`.
This data loader returns Base64 strings:
```ts title="src/env.d.ts"
/// <reference types="astro/client" />
declare module '*.numbers' {
const data: string;
export default data;
}
declare module '*.xlsx' {
const data: string;
export default data;
}
```
#### Astro Frontmatter
Typically projects store files in `src/pages`. Assuming `pres.numbers` is stored
in the `src/data` directory in the project, the relative import
```js
import b64 from "../data/pres.numbers"
```
will return a Base64 string which can be parsed in the frontmatter. The workbook
object can be post-processed using utility functions. The following example
uses `sheet_to_json` to generate row objects that are rendered as table rows:
```jsx title="src/pages/index.astro"
---
/* -- the code in the frontmatter is only run at build time -- */
import { read, utils } from "xlsx";
/* parse workbook */
import b64 from "../data/pres.numbers";
const wb = read(b64, {type: "base64"});
/* generate row objects */
interface IPresident {
Name: string;
Index: number;
}
const data = utils.sheet_to_json<IPresident>(wb.Sheets[wb.SheetNames[0]]);
---
<html>
<body>
<h3>Presidents</h3>
<table>
<thead><tr><th>Name</th><th>Index</th></tr></thead>
{/* Display each row object as a TR within the TBODY element */}
<tbody>{data.map(row => (
<tr><td>{row.Name}</td><td>{row.Index}</td></tr>
))}</tbody>
</table>
</body>
</html>
```
When built using `npx astro build`, Astro will perform the conversion and emit
a simple HTML table without any reference to the existing spreadsheet file!

@ -1,7 +1,7 @@
---
title: Content and Static Sites
pagination_prev: demos/extensions/index
pagination_next: demos/cloudata/index
pagination_next: demos/cli
---
import DocCardList from '@theme/DocCardList';

@ -1,5 +0,0 @@
{
"label": "Cloud Data Platforms",
"position": 19,
"collapsed": false
}

@ -1,20 +0,0 @@
---
title: Cloud Data Platforms
pagination_prev: demos/static/index
pagination_next: demos/cli
---
import DocCardList from '@theme/DocCardList';
import {useCurrentSidebarCategory} from '@docusaurus/theme-common';
Cloud Data Platforms are popular storage media for structured data, typically
offering APIs for programmatic data ingress and egress. Demos:
<ul>{useCurrentSidebarCategory().items.map(item => {
const listyle = (item.customProps?.icon) ? {
listStyleImage: `url("${item.customProps.icon}")`
} : {};
return (<li style={listyle} {...(item.customProps?.class ? {className: item.customProps.class}: {})}>
<a href={item.href}>{item.label}</a>{item.customProps?.summary && (" - " + item.customProps.summary)}
</li>);
})}</ul>

@ -1,6 +1,6 @@
---
title: Command-Line Tools
pagination_prev: demos/cloudata/index
pagination_prev: demos/static/index
pagination_next: demos/engines/index
---

@ -313,6 +313,18 @@ async function workbook_dl_axios(url) {
This demo uses `axios` to download <https://sheetjs.com/pres.numbers> and show
the data in an HTML table.
:::caution
If the live demo shows a message
```
ReferenceError: axios is not defined
```
please refresh the page. This is a known bug in the documentation generator.
:::
```jsx live
function SheetJSAxiosDL() {
const [__html, setHTML] = React.useState("");
@ -404,6 +416,18 @@ superagent.get(url).responseType('arraybuffer').end(function(err, res) {
This demo uses `superagent` to download <https://sheetjs.com/pres.numbers> and
show the data in an HTML table.
:::caution
If the live demo shows a message
```
ReferenceError: superagent is not defined
```
please refresh the page. This is a known bug in the documentation generator.
:::
```jsx live
function SheetJSSuperAgentDL() {
const [__html, setHTML] = React.useState("");

@ -1,6 +1,5 @@
---
title: Typed Arrays and ML
pagination_next: demos/hosting/index
---
<head>
@ -48,6 +47,18 @@ fetching [an XLSX export of the example dataset](https://sheetjs.com/data/bht.xl
<details><summary><b>TF CSV Demo using XLSX files</b> (click to show)</summary>
:::caution
If the live demo shows a message
```
ReferenceError: tf is not defined
```
please refresh the page. This is a known bug in the documentation generator.
:::
```jsx live
function SheetJSToTFJSCSV() {
const [output, setOutput] = React.useState("");

@ -1,5 +0,0 @@
{
"label": "File Hosting Services",
"position": 44,
"collapsed": false
}

@ -1,20 +0,0 @@
---
title: File Hosting Services
pagination_prev: demos/ml
pagination_next: solutions/input
---
import DocCardList from '@theme/DocCardList';
import {useCurrentSidebarCategory} from '@docusaurus/theme-common';
File hosting services provide simple solutions for storing data, synchronizing
files across devices, and sharing with specific users or customers.
<ul>{useCurrentSidebarCategory().items.map(item => {
const listyle = (item.customProps?.icon) ? {
listStyleImage: `url("${item.customProps.icon}")`
} : {};
return (<li style={listyle} {...(item.customProps?.class ? {className: item.customProps.class}: {})}>
<a href={item.href}>{item.label}</a>{item.customProps?.summary && (" - " + item.customProps.summary)}
</li>);
})}</ul>

@ -80,13 +80,13 @@ run in the web browser, demos will include interactive examples.
### File Hosting Services
- [`Dropbox`](/docs/demos/hosting/dropbox)
- [`GitHub`](/docs/demos/hosting/github)
- [`Dropbox`](/docs/demos/cloud/dropbox)
- [`GitHub`](/docs/demos/cloud/github)
### Cloud Data Services
- [`Google Sheets`](/docs/demos/cloudata/gsheet)
- [`Airtable`](/docs/demos/cloudata/airtable)
- [`Google Sheets`](/docs/demos/cloud/gsheet)
- [`Airtable`](/docs/demos/cloud/airtable)
### Platforms and Integrations

@ -172,7 +172,7 @@ const config = {
{ from: '/docs/getting-started/demos/', to: '/docs/demos/' },
{ from: '/docs/getting-started/demos/excel', to: '/docs/demos/' },
{ from: '/docs/demos/content', to: '/docs/demos/static/' },
{ from: '/docs/demos/git', to: '/docs/demos/hosting/github/' },
{ from: '/docs/demos/git', to: '/docs/demos/cloud/github/' },
{ from: '/docs/demo/grid', to: '/docs/demos/grid/' },
/* frontend */
{ from: '/docs/demos/angular', to: '/docs/demos/frontend/angular/' },
@ -186,13 +186,18 @@ const config = {
{ from: '/docs/demos/aws', to: '/docs/demos/cloud/aws/' },
{ from: '/docs/demos/azure', to: '/docs/demos/cloud/azure/' },
{ from: '/docs/demos/netsuite', to: '/docs/demos/cloud/netsuite/' },
{ from: '/docs/demos/gsheet', to: '/docs/demos/cloud/gsheet/' },
{ from: '/docs/demos/airtable', to: '/docs/demos/cloud/airtable/' },
/* extensions */
{ from: '/docs/demos/extendscript', to: '/docs/demos/extensions/extendscript/' },
{ from: '/docs/demos/excelapi', to: '/docs/demos/extensions/excelapi/' },
{ from: '/docs/demos/chromium', to: '/docs/demos/extensions/chromium/' },
/* cloudata */
{ from: '/docs/demos/gsheet', to: '/docs/demos/cloudata/gsheet/' },
{ from: '/docs/demos/airtable', to: '/docs/demos/cloudata/airtable/' },
{ from: '/docs/demos/cloudata/gsheet', to: '/docs/demos/cloud/gsheet/' },
{ from: '/docs/demos/cloudata/airtable', to: '/docs/demos/cloud/airtable/' },
/* hosting */
{ from: '/docs/demos/hosting/dropbox', to: '/docs/demos/cloud/dropbox/' },
{ from: '/docs/demos/hosting/github', to: '/docs/demos/cloud/github/' },
]
}]
]