sheetjs
/
docs.sheetjs.com
1
Fork 4
Code Issues Pull Requests 1 Projects Releases Wiki Activity

nuxt refresh

This commit is contained in:
SheetJS 2022-11-08 00:43:21 -05:00
parent 3c8a75c5e3
commit 17850ebbd3
7 changed files with 111 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
docz/docs/02-getting-started/02-example.mdx
View File

@ -13,7 +13,7 @@ The discussion focuses on the problem solving mindset. API details are covered
in other parts of the documentation.
The goal of this example is to generate a XLSX workbook of US President names
and birthdays. [Click here](#live-demo) to jump to the live demo
and birthdays. [Click here](#live-demo) to jump to the live demo.
## Acquire Data
@ -22,7 +22,14 @@ and birthdays. [Click here](#live-demo) to jump to the live demo
[The raw data is available in JSON form](https://theunitedstates.io/congress-legislators/executive.json).
For convenience, it has been [mirrored here](https://sheetjs.com/data/executive.json)
The data result is an Array of objects. This is the data for John Adams:
Acquiring the data is straightforward with `fetch`:
```js
const url = "https://sheetjs.com/data/executive.json";
const raw_data = await (await fetch(url)).json();
```
The raw data is an Array of objects. This is the data for John Adams:
```js
{
@ -165,6 +172,9 @@ XLSX.writeFile(workbook, "Presidents.xlsx", { compression: true });
## Live Demo
This demo runs in the web browser! Click "Click to Generate File!" and the
browser should generate a XLSX file.
```jsx live
function Presidents() { return ( <button onClick={async () => {
/* fetch JSON data and parse */

129
docz/docs/03-demos/04-grid.md
View File

@ -253,10 +253,37 @@ and `create-react-app` 5.0.1 on 2022 August 16.
:::
[`react-data-grid`](https://github.com/adazzle/react-data-grid) is a data grid
built for React. `react-data-grid` powers <https://sheet.js.org/>
<!-- spellchecker-disable -->
[A complete example is included below.](#rdg-demo)
#### RDG Demo
<!-- spellchecker-enable -->
<details><summary><b>Complete Example</b> (click to show)</summary>
1) Create a new TypeScript `create-react-app` app:
```bash
npx create-react-app sheetjs-cra --template typescript
cd sheetjs-cra
```
2) Install dependencies:
```bash
npm i -S https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz react-data-grid
```
3) Download [`App.tsx`](pathname:///rdg/App.tsx) and replace `src/App.tsx`.
4) run `npm start`. When you load the page in the browser, it will attempt to
fetch <https://sheetjs.com/pres.numbers> and load the data.
The following screenshot was taken from the demo:
![react-data-grid screenshot](pathname:///rdg/rdg1.png)
</details>
#### Rows and Columns state
@ -342,38 +369,6 @@ function rdg_to_ws(rows: Row[]): WorkSheet {
}
```
<!-- spellchecker-disable -->
#### RDG Demo
<!-- spellchecker-enable -->
<details><summary><b>Complete Example</b> (click to show)</summary>
1) Create a new TypeScript `create-react-app` app:
```bash
npx create-react-app sheetjs-cra --template typescript
cd sheetjs-cra
```
2) Install dependencies:
```bash
npm i -S https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz react-data-grid
```
3) Download [`App.tsx`](pathname:///rdg/App.tsx) and replace `src/App.tsx`.
4) run `npm start`. When you load the page in the browser, it will attempt to
fetch <https://sheetjs.com/pres.numbers> and load the data.
The following screenshot was taken from the demo:
![react-data-grid screenshot](pathname:///rdg/rdg1.png)
</details>
### Material UI Data Grid
Material UI Data Grid and React Data Grid share many state patterns and idioms.
@ -501,9 +496,37 @@ This demo was tested against `vue3-table-lite 1.2.4`, VueJS `3.2.37`, ViteJS
:::
[`vue3-table-lite`](https://vue3-lite-table.vercel.app/) is a VueJS data grid.
#### VueJS Demo
[A complete example is included below.](#vuejs-demo)
<details><summary><b>Complete Example</b> (click to show)</summary>
1) Create a new ViteJS App using the VueJS + TypeScript template:
```bash
npm create vite@latest sheetjs-vue -- --template vue-ts
cd sheetjs-vue
```
2) Install dependencies:
```bash
npm i
npm i -S https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz vue3-table-lite
```
3) Download [`src/App.vue`](pathname:///vtl/App.vue) and replace the contents:
```bash
cd src
rm -f App.vue
curl -LO https://docs.sheetjs.com/vtl/App.vue
cd ..
```
4) run `npm run dev`. When you load the page in the browser, it will try to
fetch <https://sheetjs.com/pres.numbers> and load the data.
</details>
#### Rows and Columns Bindings
@ -586,38 +609,6 @@ function vte_to_ws(rows) {
}
```
#### VueJS Demo
<details><summary><b>Complete Example</b> (click to show)</summary>
1) Create a new ViteJS App using the VueJS + TypeScript template:
```bash
npm create vite@latest sheetjs-vue -- --template vue-ts
cd sheetjs-vue
```
2) Install dependencies:
```bash
npm i
npm i -S https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz vue3-table-lite
```
3) Download [`src/App.vue`](pathname:///vtl/App.vue) and replace the contents:
```bash
cd src
rm -f App.vue
curl -LO https://docs.sheetjs.com/vtl/App.vue
cd ..
```
4) run `npm run dev`. When you load the page in the browser, it will try to
fetch <https://sheetjs.com/pres.numbers> and load the data.
</details>
## Standard HTML Tables
Many UI components present styled HTML tables. Data can be extracted from the

37
docz/docs/03-demos/06-content.md
View File

@ -8,12 +8,10 @@ explores a number of approaches.
## Lume
[Lume](https://lume.land) is a static site generator for the Deno platform.
The official [Sheets plugin](https://lume.land/plugins/sheets/) uses SheetJS
to load data from spreadsheets.
### Lume Demo
#### Lume Demo
:::note
@ -106,7 +104,8 @@ in the parsing logic, issues should then be raised with the SheetJS project.
:::note
Library integration in ViteJS is covered in ["Bundlers" demo](/docs/demos/bundler#vite)
This demo covers static asset imports. For processing files in the browser, the
["Bundlers" demo](/docs/demos/bundler#vite) includes an example.
:::
@ -123,21 +122,20 @@ import { read, utils } from 'xlsx';
import { defineConfig } from 'vite';
export default defineConfig({
assetsInclude: ['**/*.xlsx'], // mark that xlsx file should be treated as assets
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 path = id.replace(/\?sheetjs/, "");
var wb = read(readFileSync(path));
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)}')`;
}
}
]
})
});
```
This loader uses the query `sheetjs`:
@ -252,8 +250,6 @@ export async function getServerSideProps() {
}
```
:::
### Strategies
@ -507,12 +503,18 @@ The command will start a local HTTP server on port 8080.
`@nuxt/content` is a file-based CMS for Nuxt, enabling static-site generation
and on-demand server rendering powered by spreadsheets.
:::note
This demo was tested on 2022 November 07 against Nuxt Content `v1.15.1`.
:::
#### nuxt.config.js configuration
Through an override in `nuxt.config.js`, Nuxt Content will use custom parsers.
Differences from a stock `create-nuxt-app` config are shown below:
```js
```js title="nuxt.config.js"
import { readFile, utils } from 'xlsx';
// This will be called when the files change
@ -580,14 +582,16 @@ neatly with nested `v-for`:
:::note
This was tested against `create-nuxt-app v4.0.0` on 2022 August 13.
This was tested against `create-nuxt-app v4.0.0` on 2022 November 07.
The generated project used Nuxt `v2.15.8` and Nuxt Content `v1.15.1`.
:::
1) Create a stock app:
```bash
npx create-nuxt-app SheetJSNuxt
npx create-nuxt-app@4.0.0 SheetJSNuxt
```
When prompted, enter the following options:
@ -625,6 +629,11 @@ The server is listening on that URL. Open the link in a web browser.
3) Download <https://sheetjs.com/pres.xlsx> and move to the `content` folder.
```bash
curl -LO https://sheetjs.com/pres.xlsx
mv pres.xlsx content/
```
4) Modify `nuxt.config.js` as described [earlier](#nuxtconfigjs-configuration)
5) Replace `pages/index.vue` with the following:
@ -650,7 +659,7 @@ export default {
data: await $content('pres').fetch()
};
}
}
};
</script>
```

2
docz/docs/03-demos/23-netsuite.md
View File

@ -45,7 +45,7 @@ part is documented in ["Import a third-party JavaScript Library"](https://docs.o
*/
// highlight-next-line
define(['N/file', 'xlsx'], function(file, XLSX) {
...
// ... use XLSX here ...
});
```

13
docz/docs/03-demos/26-excelapi.md
View File

@ -28,8 +28,9 @@ SheetJS worksheet metadata and other properties are covered in this doc site.
<details><summary><b>Initial Platform Setup</b> (click to show)</summary>
The tool for generating Office Add-ins depends on NodeJS and various libraries.
[Install NodeJS](https://nodejs.org/) and the required dependencies:
The tool for generating Office Add-ins uses NodeJS and various libraries.
Install [NodeJS LTS](https://nodejs.org/en/download/). After installing NodeJS,
install dependencies in a new PowerShell window:
```powershell
npm install -g yo bower generator-office
@ -70,12 +71,6 @@ npm run build
npm start
```
If [VSCodium](https://vscodium.com/) is installed, the folder can be opened:
```powershell
codium .
```
</details>
Running `npm start` will open up a terminal window and a new Excel window with
@ -161,7 +156,7 @@ var wb = XLSX.read(ab); // parse workbook
**This is how it should work**.
[There are outstanding bugs in Excel.](https://github.com/OfficeDev/office-js/issues/2186)
At the time of writing, there are outstanding bugs in Excel with raw data.
For the purposes of this demo, a Base64-encoded file will be used. The
workaround involves fetching that Base64 file, getting the text, and parsing

11
docz/docs/03-demos/45-git.md
View File

@ -29,10 +29,9 @@ const XLSX = require("xlsx");
})();
```
GitHub's ["Flat Data"](https://githubnext.com/projects/flat-data/) project
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.
GitHub's "Flat Data" project explores storing and comparing versions of
structured CSV and JSON data. The official "Excel to CSV" example uses SheetJS
under the hood to generate CSV data from an XLSX file.
This demo covers implementation details elided in the official write-up.
@ -48,7 +47,7 @@ As a project from the company, the entire lifecycle uses GitHub offerings:
:::caution
A GitHub account is required. At the time of writing (2022 August 29), free
A GitHub account is required. At the time of writing (2022 November 08), free
GitHub accounts have no Actions usage limits for public repositories.
Using private GitHub repositories is not recommended because the Flat Viewer
@ -152,7 +151,7 @@ Deno.writeFileSync(out_file, new TextEncoder().encode(csv));
:::note
This was tested on 2022 August 29 using the GitHub UI.
This was tested on 2022 November 08 using the GitHub UI.
:::

15
docz/docs/06-solutions/01-input.md
View File

@ -143,8 +143,7 @@ Applications reading files must be invoked with the `--allow-read` flag.
</TabItem>
<TabItem value="bun" label="Bun">
[Bun `readFileSync`](https://github.com/Jarred-Sumner/bun/issues/256) currently
returns a `Uint8Array`. The result should be wrapped in a `Buffer`:
Bun `readFileSync` output should be wrapped in a `Buffer`:
```js
import { readFileSync } from 'fs'
@ -637,8 +636,7 @@ function process_RS(stream, cb) {
</TabItem>
<TabItem value="deno" label="Deno">
In addition to the browser `ReadableStream` API, Deno has its own `Reader`
[interface](https://doc.deno.land/deno/stable/~/Deno.Reader).
In addition to the browser `ReadableStream` API, Deno has a `Reader` class.
For these streams, `std` provides a `readAll` method to collect data into a
`Uint8Array`. This example reads from a file using `Deno.open` and prints the
@ -718,17 +716,16 @@ generating a worksheet object. By default, it will generate a header row and
one row per object in the array. The optional `opts` argument has settings to
control the column order and header output.
["Array of Objects Input"](/docs/api/utilities#array-of-objects-input) describes the function and
the optional `opts` argument in more detail.
["Array of Objects Input"](/docs/api/utilities#array-of-objects-input) describes
the function and the optional `opts` argument in more detail.
#### Examples
["Complete Example"](/docs/getting-started/example) contains a detailed example
"Get Data from a JSON Endpoint and Generate a Workbook"
[`x-spreadsheet`](https://github.com/myliang/x-spreadsheet) is an interactive
data grid for previewing and modifying structured data in the web browser. The
[demo](/docs/demos/grid#x-spreadsheet) includes more detailed examples.
[`x-spreadsheet`](/docs/demos/grid#x-spreadsheet) is an interactive data grid
for previewing and modifying structured data in the web browser.
["Typed Arrays and ML"](/docs/demos/ml) covers strategies for
creating worksheets from ML library exports (datasets stored in Typed Arrays).