diff --git a/docz/docs/03-demos/03-net/01-network.mdx b/docz/docs/03-demos/03-net/01-network.mdx index 1abb579..491eaf9 100644 --- a/docz/docs/03-demos/03-net/01-network.mdx +++ b/docz/docs/03-demos/03-net/01-network.mdx @@ -7,6 +7,8 @@ title: HTTP Network Requests +import current from '/version.js'; +import CodeBlock from '@theme/CodeBlock'; `XMLHttpRequest` and `fetch` browser APIs enable binary data transfer between web browser clients and web servers. Since this library works in web browsers, @@ -376,6 +378,7 @@ function SheetJSAxiosDL() { /* Fetch and update HTML */ React.useEffect(async() => { + if(typeof axios != "function") return setHTML("ReferenceError: axios is not defined"); /* Fetch file */ const res = await axios("https://sheetjs.com/pres.numbers", {responseType: "arraybuffer"}); @@ -479,6 +482,8 @@ function SheetJSSuperAgentDL() { /* Fetch and update HTML */ React.useEffect(async() => { + if(typeof superagent == "undefined" || typeof superagent.get != "function") + return setHTML("ReferenceError: superagent is not defined"); /* Fetch file */ superagent .get("https://sheetjs.com/pres.numbers") @@ -557,7 +562,7 @@ These examples show how to download data in NodeJS. The `https` module provides a low-level `get` method for HTTPS GET requests: -```js +```js title="SheetJSHTTPSGet.js" var https = require("https"), XLSX = require("xlsx"); https.get('https://sheetjs.com/pres.numbers', function(res) { @@ -573,6 +578,26 @@ https.get('https://sheetjs.com/pres.numbers', function(res) { }); ``` +
Complete Example (click to show) + +:::note + +This demo was last tested on 2023 May 21 against NodeJS `18.16.0` + +::: + +1) Install the [NodeJS module](/docs/getting-started/installation/nodejs) + +{`\ +npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`} + + +2) Copy the `SheetJSHTTPSGet.js` code snippet to a file `SheetJSHTTPSGet.js` + +3) Run `node SheetJSHTTPSGet.js`. It will print CSV contents of the test file. + +
+ ### fetch The `fetch` implementation has the same return types as the browser version: @@ -587,6 +612,45 @@ async function parse_from_url(url) { } ``` +
Complete Example (click to show) + +:::note + +This demo was last tested on 2023 May 21 against NodeJS `18.16.0` + +::: + +1) Install the [NodeJS module](/docs/getting-started/installation/nodejs) + +{`\ +npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`} + + +2) Save the following to `SheetJSFetch.js`: + +```js title="SheetJSFetch.js" +var XLSX = require("xlsx"); + +async function parse_from_url(url) { + const res = await fetch(url); + if(!res.ok) throw new Error("fetch failed"); + const ab = await res.arrayBuffer(); + const workbook = XLSX.read(ab); + return workbook; +} + +(async() => { + const wb = await parse_from_url('https://sheetjs.com/pres.numbers'); + /* print the first worksheet to console */ + var ws = wb.Sheets[wb.SheetNames[0]]; + console.log(XLSX.utils.sheet_to_csv(ws)); +})(); +``` + +3) Run `node SheetJSFetch.js`. It will print CSV contents of the test file. + +
+ ### Wrapper Libraries The latest releases of NodeJS support `fetch` natively. Before `fetch` support @@ -602,7 +666,7 @@ was added to the platform, third party modules wrapped the native APIs. Setting the option `encoding: null` passes raw buffers: -```js +```js title="SheetJSRequest.js" var XLSX = require('xlsx'), request = require('request'); var url = 'https://sheetjs.com/pres.numbers'; @@ -621,12 +685,32 @@ request(url, {encoding: null}, function(err, res, data) { }); ``` +
Complete Example (click to show) + +:::note + +This demo was last tested on 2023 May 21 against request `2.88.2` + +::: + +1) Install the [NodeJS module](/docs/getting-started/installation/nodejs) + +{`\ +npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz request@2.88.2`} + + +2) Copy the `SheetJSRequest.js` code snippet to a file `SheetJSRequest.js` + +3) Run `node SheetJSRequest.js`. It will print CSV contents of the test file. + +
+ #### axios When the `responseType` is `"arraybuffer"`, `axios` actually captures the data in a NodeJS Buffer. `XLSX.read` will transparently handle Buffers: -```js +```js title="SheetJSAxios.js" const XLSX = require("xlsx"), axios = require("axios"); async function workbook_dl_axios(url) { @@ -636,3 +720,48 @@ async function workbook_dl_axios(url) { return workbook; } ``` + +
Complete Example (click to show) + +:::note + +This demo was last tested on 2023 May 21 against Axios `1.4.0` + +::: + +1) Install the [NodeJS module](/docs/getting-started/installation/nodejs) + +{`\ +npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz axios@1.4.0`} + + +2) Save the following to `SheetJSAxios.js`: + +```js title="SheetJSAxios.js" +const XLSX = require("xlsx"), axios = require("axios"); + +async function workbook_dl_axios(url) { + const res = await axios(url, {responseType:'arraybuffer'}); + /* at this point, res.data is a Buffer */ + const workbook = XLSX.read(res.data); + return workbook; +} + +(async() => { + const wb = await workbook_dl_axios('https://sheetjs.com/pres.numbers'); + /* print the first worksheet to console */ + var ws = wb.Sheets[wb.SheetNames[0]]; + console.log(XLSX.utils.sheet_to_csv(ws)); +})(); +``` + +3) Run `node SheetJSAxios.js`. It will print CSV contents of the test file. + +
+ +## Other Platforms + +Other demos show network operations in special platforms: + +- [React Native "Fetching Remote Data"](/docs/demos/mobile/reactnative#fetching-remote-data) +- [NativeScript "Fetching Remote Files"](/docs/demos/mobile/nativescript#fetching-remote-files) diff --git a/docz/docs/03-demos/05-mobile/02-nativescript.md b/docz/docs/03-demos/05-mobile/02-nativescript.md index a0a3c56..1e68cc6 100644 --- a/docz/docs/03-demos/05-mobile/02-nativescript.md +++ b/docz/docs/03-demos/05-mobile/02-nativescript.md @@ -20,11 +20,11 @@ The "Complete Example" creates an app that looks like the screenshots below: Android -![iOS screenshot](pathname:///mobile/nsios.png) +![iOS screenshot](pathname:///nativescript/ios.png) -![Android screenshot](pathname:///mobile/nsand.png) +![Android screenshot](pathname:///nativescript/and.png) @@ -49,12 +49,13 @@ function get_url_for_filename(filename: string): string { } ``` -#### Reading data +### Reading Local Files `getFileAccess().readBufferAsync` can read data: ```ts import { getFileAccess } from '@nativescript/core'; +import { read } from 'xlsx'; /* find appropriate path */ const url = get_url_for_filename("SheetJSNS.xls"); @@ -66,13 +67,14 @@ const ab: ArrayBuffer = await getFileAccess().readBufferAsync(url); const wb = read(ab); ``` -#### Writing data +### Writing Local Files `getFileAccess().writeBufferAsync` can write data. iOS supports `Uint8Array` directly but Android requires a true array of numbers: ```ts import { getFileAccess } from '@nativescript/core'; +import { write } from 'xlsx'; /* find appropriate path */ const url = get_url_for_filename("SheetJSNS.xls"); @@ -84,15 +86,40 @@ const u8: Uint8Array = write(wb, { bookType: 'xls', type: 'binary' }); await getFileAccess().writeBufferAsync(url, global.isAndroid ? (Array.from(u8) as any) : u8); ``` +### Fetching Remote Files + +`getFile` from `@nativescript/core/http` can download files. After storing the +file in a temporary folder, `getFileAccess().readBufferAsync` can read the data: + +```ts +import { knownFolders, path, getFileAccess } from '@nativescript/core' +import { getFile } from '@nativescript/core/http'; +import { read } from 'xlsx'; + +/* generate temporary path for the new file */ +const temp: string = path.join(knownFolders.temp().path, "pres.xlsx"); + +/* download file */ +const file = await getFile("https://sheetjs.com/pres.xlsx", temp) + +/* get data */ +const ab: ArrayBuffer = await getFileAccess().readBufferAsync(file.path); + +/* read workbook */ +const wb = read(ab); +``` + ## Demo :::note -This demo was tested on an Intel Mac on 2023 May 07. NativeScript version +This demo was tested on an Intel Mac on 2023 May 21. NativeScript version (as verified with `ns --version`) is `8.5.3`. The iOS simulator runs iOS 16.2 on an iPhone 14 Pro Max. +The Android simulator runs Android 12.0 (S) API 31 on a Pixel 3. + ::: 0) Follow the official Environment Setup instructions @@ -158,6 +185,8 @@ Relaunch the app with `ns run ios` and the title bar should show the version. ![NativeScript Step 4](pathname:///mobile/nativescript4.png) +### Local Files + 5) Add the Import and Export buttons to the template: ```xml title="src/app/item/items.component.html" @@ -340,4 +369,49 @@ adb push SheetJSNS.xls /data/user/0/org.nativescript.SheetJSNS/files/SheetJSNS.x ``` - Tap "Import File". A dialog will print the path of the file that was read. - The first item in the list will change. \ No newline at end of file + The first item in the list will change. + +### Fetching Files + +7) In `src/app/item/items.component.ts`, make `ngOnInit` asynchronous: + +```ts title="src/app/item/items.component.ts" + async ngOnInit(): Promise { + this.items = await this.itemService.getItems() + } +``` + +8) Replace `item.service.ts` with the following: + +```ts title="src/app/item/item.service.ts" +import { Injectable } from '@angular/core' + +import { knownFolders, path, getFileAccess } from '@nativescript/core' +import { getFile } from '@nativescript/core/http'; +import { read, utils } from 'xlsx'; + +import { Item } from './item' +interface IPresident { Name: string; Index: number }; + +@Injectable({ providedIn: 'root' }) +export class ItemService { + private items: Array; + + async getItems(): Promise> { + /* fetch https://sheetjs.com/pres.xlsx */ + const temp: string = path.join(knownFolders.temp().path, "pres.xlsx"); + const ab = await getFile("https://sheetjs.com/pres.xlsx", temp) + /* read the temporary file */ + const wb = read(await getFileAccess().readBufferAsync(ab.path)); + /* translate the first worksheet to the required Item type */ + const data = utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]); + return this.items = data.map((pres, id) => ({id, name: pres.Name, role: ""+pres.Index} as Item)); + } + + getItem(id: number): Item { + return this.items.filter((item) => item.id === id)[0] + } +} +``` + +Relaunching the app in iOS or Android simulator should show Presidential data. \ No newline at end of file diff --git a/docz/docs/03-demos/12-engines/02_v8.md b/docz/docs/03-demos/12-engines/02_v8.md index 84799cf..2d3cfc4 100644 --- a/docz/docs/03-demos/12-engines/02_v8.md +++ b/docz/docs/03-demos/12-engines/02_v8.md @@ -107,9 +107,10 @@ The resulting `buf` can be written to file with `fwrite`. This demo was tested in the following deployments: -| V8 Version | Platform | OS Version | Compiler | Date | -|:--------------|:-------------|:-----------|:---------------|:-----------| -| `11.3.244.11` | `darwin-x64` | macOS 13.2 | `clang 14.0.3` | 2023-05-20 | +| V8 Version | Platform | OS Version | Compiler | Date | +|:--------------|:-------------|:-------------|:---------------|:-----------| +| `11.3.244.11` | `darwin-x64` | macOS 13.2 | `clang 14.0.3` | 2023-05-20 | +| `11.3.244.11` | `linux-x64` | HoloOS 3.4.6 | `gcc 12.2.0` | 2023-05-20 | ::: diff --git a/docz/static/mobile/nsios.png b/docz/static/mobile/nsios.png deleted file mode 100644 index 2280c79..0000000 Binary files a/docz/static/mobile/nsios.png and /dev/null differ diff --git a/docz/static/mobile/nsand.png b/docz/static/nativescript/and.png similarity index 100% rename from docz/static/mobile/nsand.png rename to docz/static/nativescript/and.png diff --git a/docz/static/nativescript/ios.png b/docz/static/nativescript/ios.png new file mode 100644 index 0000000..cca82a2 Binary files /dev/null and b/docz/static/nativescript/ios.png differ