forked from sheetjs/docs.sheetjs.com
nuxt refresh
This commit is contained in:
parent
3c8a75c5e3
commit
17850ebbd3
@ -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 */
|
||||
|
||||
@ -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:
|
||||
|
||||
|
||||
|
||||
</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:
|
||||
|
||||
|
||||
|
||||
</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
|
||||
|
||||
@ -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>
|
||||
```
|
||||
|
||||
|
||||
@ -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 ...
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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.
|
||||
|
||||
:::
|
||||
|
||||
|
||||
@ -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).
|
||||
|
||||
Loading…
Reference in New Issue
Block a user