From 8171c10af430af4f173ad1898d5abdf455d940ef Mon Sep 17 00:00:00 2001 From: SheetJS Date: Mon, 9 Jan 2023 00:08:30 -0500 Subject: [PATCH] frontend --- .../01-installation/03-nodejs.md | 2 +- docz/docs/02-getting-started/02-example.mdx | 199 +++++++++++++++++- docz/docs/03-demos/03-desktop/02-nwjs.md | 99 +++++---- docz/docs/03-demos/03-desktop/03-wails.md | 170 +++++++++------ docz/docs/03-demos/05-database.md | 6 +- .../01-angular.md} | 3 + .../{12-react.md => 10-frontend/02-react.md} | 3 + .../{13-vue.md => 10-frontend/03-vue.md} | 3 + .../04-svelte.md} | 3 + .../08-bundler.md} | 19 +- .../09-legacy.md} | 5 + .../docs/03-demos/10-frontend/_category_.json | 5 + docz/docs/03-demos/10-frontend/index.md | 56 +++++ docz/docs/03-demos/21-aws.md | 1 + docz/docs/06-solutions/01-input.md | 4 +- docz/docs/06-solutions/05-output.md | 4 +- docz/docusaurus.config.js | 7 + docz/static/browserify/index.html | 1 + docz/static/nwjs/index.html | 1 + docz/static/nwjs/nwl.png | Bin 0 -> 290497 bytes docz/static/nwjs/nwm.png | Bin 0 -> 193365 bytes docz/static/react/fetch.html | 5 + docz/static/wails/App.svelte | 18 +- docz/static/wails/linux.png | Bin 0 -> 308794 bytes 24 files changed, 482 insertions(+), 132 deletions(-) rename docz/docs/03-demos/{11-angular.md => 10-frontend/01-angular.md} (99%) rename docz/docs/03-demos/{12-react.md => 10-frontend/02-react.md} (97%) rename docz/docs/03-demos/{13-vue.md => 10-frontend/03-vue.md} (99%) rename docz/docs/03-demos/{14-svelte.md => 10-frontend/04-svelte.md} (98%) rename docz/docs/03-demos/{19-bundler.md => 10-frontend/08-bundler.md} (98%) rename docz/docs/03-demos/{44-legacy.md => 10-frontend/09-legacy.md} (99%) create mode 100644 docz/docs/03-demos/10-frontend/_category_.json create mode 100644 docz/docs/03-demos/10-frontend/index.md create mode 100644 docz/static/nwjs/nwl.png create mode 100644 docz/static/nwjs/nwm.png create mode 100644 docz/static/wails/linux.png diff --git a/docz/docs/02-getting-started/01-installation/03-nodejs.md b/docz/docs/02-getting-started/01-installation/03-nodejs.md index 59243e6..6fd6756 100644 --- a/docz/docs/02-getting-started/01-installation/03-nodejs.md +++ b/docz/docs/02-getting-started/01-installation/03-nodejs.md @@ -123,7 +123,7 @@ The module also ships with `xlsx.mjs` for use with `import`. The `mjs` version does not automatically load native node modules, so they must be added manually: ```js -import * as XLSX from 'xlsx/xlsx.mjs'; +import * as XLSX from 'xlsx'; /* load 'fs' for readFile and writeFile support */ import * as fs from 'fs'; diff --git a/docz/docs/02-getting-started/02-example.mdx b/docz/docs/02-getting-started/02-example.mdx index 471c72b..944b600 100644 --- a/docz/docs/02-getting-started/02-example.mdx +++ b/docz/docs/02-getting-started/02-example.mdx @@ -213,7 +213,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; - + Save the following script to `snippet.html` and open the page. The page must be hosted (no `file:///` access). @@ -251,13 +251,13 @@ hosted (no `file:///` access). worksheet["!cols"] = [ { wch: max_width } ]; /* create an XLSX file and try to save to Presidents.xlsx */ - XLSX.writeFile(workbook, "Presidents.xlsx", { compression: true })); + XLSX.writeFile(workbook, "Presidents.xlsx", { compression: true }); })(); ``` - + Install the dependencies: @@ -297,10 +297,12 @@ const XLSX = require("xlsx"); worksheet["!cols"] = [ { wch: max_width } ]; /* create an XLSX file and try to save to Presidents.xlsx */ - XLSX.writeFile(workbook, "Presidents.xlsx", { compression: true })); + XLSX.writeFile(workbook, "Presidents.xlsx", { compression: true }); })(); ``` +:::caution + Native `fetch` support was added in NodeJS 18. For older versions of NodeJS, the script will throw an error `fetch is not defined`. A third-party library like `axios` presents a similar API for fetching data: @@ -310,7 +312,7 @@ like `axios` presents a similar API for fetching data: Install the dependencies: ```bash -npm i --save https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz +npm i --save https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz axios ``` The differences in the script are highlighted below. @@ -348,13 +350,17 @@ const axios = require("axios"); worksheet["!cols"] = [ { wch: max_width } ]; /* create an XLSX file and try to save to Presidents.xlsx */ - XLSX.writeFile(workbook, "Presidents.xlsx", { compression: true })); + XLSX.writeFile(workbook, "Presidents.xlsx", { compression: true }); })(); ``` - +::: + +
Other Server-Side Platforms (click to show) + + Save the following script to `snippet.ts` and run with @@ -390,7 +396,7 @@ const max_width = rows.reduce((w: number, r: any) => Math.max(w, r.name.length), worksheet["!cols"] = [ { wch: max_width } ]; /* create an XLSX file and try to save to Presidents.xlsx */ -XLSX.writeFile(workbook, "Presidents.xlsx", { compression: true })); +XLSX.writeFile(workbook, "Presidents.xlsx", { compression: true }); ``` @@ -431,9 +437,184 @@ const max_width = rows.reduce((w, r) => Math.max(w, r.name.length), 10); worksheet["!cols"] = [ { wch: max_width } ]; /* create an XLSX file and try to save to Presidents.xlsx */ -XLSX.writeFile(workbook, "Presidents.xlsx", { compression: true })); +XLSX.writeFile(workbook, "Presidents.xlsx", { compression: true }); ``` + +
+ + + + + +Save the following script to `snippet.html`: + +```html title="snippet.html" + + + + +``` + +Save the following to `package.json`: + +```json title="package.json" +{ + "name": "sheetjs-nwjs", + "author": "sheetjs", + "version": "0.0.0", + "main": "snippet.html", + "dependencies": { + "nw": "~0.66.0", + "xlsx": "https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz" + } +} +``` + +Install dependencies and build the app: + +```bash +npm i +npx -p nw-builder nwbuild --mode=build . +``` + +Run the generated app in the `build\sheetjs-nwjs` folder. It will show a save +dialog box. After selecting a path, the app will write the file. + + + + +:::caution + +This demo runs in iOS and requires a Macintosh computer with Xcode installed. + +::: + +:::note Initial Setup + +Follow the [Environment Setup](https://reactnative.dev/docs/environment-setup) +of the React Native documentation before testing the demo. + +::: + +Create a new project by running the following commands in the Terminal: + +```bash +npx react-native init SheetJSPres --version="0.70.6" +cd SheetJSPres + +npm i -S https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz react-native-blob-util@0.17.1 + +mkdir -p patches +curl -L -o patches/react-native+0.70.6.patch https://github.com/facebook/react-native/files/10356761/react-native%2B0.70.6.patch +npx patch-package + +cd ios +pod install +cd .. +``` + +Save the following to `App.js` in the project: + +```js title="App.js" +import React from 'react'; +import { Alert, Button, SafeAreaView, Text, View } from 'react-native'; +import { utils, version, write } from 'xlsx'; +import RNFetchBlob from 'react-native-blob-util'; + +const make_workbook = async() => { + /* fetch JSON data and parse */ + const url = "https://sheetjs.com/data/executive.json"; + const raw_data = await (await fetch(url)).json(); + + /* filter for the Presidents */ + const prez = raw_data.filter(row => row.terms.some(term => term.type === "prez")); + + /* flatten objects */ + const rows = prez.map(row => ({ + name: row.name.first + " " + row.name.last, + birthday: row.bio.birthday + })); + + /* generate worksheet and workbook */ + const worksheet = utils.json_to_sheet(rows); + const workbook = utils.book_new(); + utils.book_append_sheet(workbook, worksheet, "Dates"); + + /* fix headers */ + utils.sheet_add_aoa(worksheet, [["Name", "Birthday"]], { origin: "A1" }); + + /* calculate column width */ + const max_width = rows.reduce((w, r) => Math.max(w, r.name.length), 10); + worksheet["!cols"] = [ { wch: max_width } ]; + + /* React Native does not support `writeFile`. This is a low-level write ! */ + + /* write workbook to buffer */ + const buf = write(workbook, {type:'buffer', bookType:"xlsx"}); + + /* write buffer to file */ + const filename = RNFetchBlob.fs.dirs.DocumentDir + "/Presidents.xlsx"; + await RNFetchBlob.fs.writeFile(filename, Array.from(buf), 'ascii'); + + return file; +}; + +const App = () => ( + SheetJS {version} Export Demo +