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

rn-fetch

Browse Source
This commit is contained in:
SheetJS 2023-04-30 21:27:02 -04:00
parent 36361013e4
commit 775e72c345
8 changed files with 123 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -313,9 +313,9 @@ hosted (no `file:///` access).
Install the dependencies:
```bash
npm i --save https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz
```
<CodeBlock language="bash">{`\
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
</CodeBlock>
Save the following script to `snippet.js` and run `node snippet.js`:
@ -562,7 +562,7 @@ Save the following script to `snippet.html`:
Save the following to `package.json`:
```json title="package.json"
<CodeBlock language="json" title="package.json">{`\
{
"name": "sheetjs-nwjs",
"author": "sheetjs",
@ -570,10 +570,10 @@ Save the following to `package.json`:
"main": "snippet.html",
"dependencies": {
"nw": "~0.66.0",
"xlsx": "https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz"
"xlsx": "https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz"
}
}
```
}`}
</CodeBlock>
Install dependencies and run:
@ -596,12 +596,12 @@ of the React Native documentation before testing the demo.
Create a new project by running the following commands in the Terminal:
```bash
<CodeBlock language="bash">{`\
npx react-native@0.70.6 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
```
\n\
npm i -S https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz react-native-blob-util@0.17.1`}
</CodeBlock>
Save the following to `App.js` in the project:

7
docz/docs/03-demos/02-grid/11-rdg.md
View File

@ -5,6 +5,7 @@ pagination_next: demos/net/index
---
import current from '/version.js';
import CodeBlock from '@theme/CodeBlock';
:::note
@ -115,9 +116,9 @@ cd sheetjs-rdg
2) Install dependencies:
```bash
npm i -S https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz react-data-grid
```
<CodeBlock language="bash">{`\
npm i -S https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz react-data-grid`}
</CodeBlock>
3) Download [`App.tsx`](pathname:///rdg/App.tsx) and replace `src/App.tsx`.

8
docz/docs/03-demos/02-grid/17-gdg.md
View File

@ -5,6 +5,7 @@ pagination_next: demos/net/index
---
import current from '/version.js';
import CodeBlock from '@theme/CodeBlock';
:::note
@ -271,10 +272,9 @@ npm i
Install SheetJS and Glide Data Grid required dependencies:
```bash
npm i --save https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz
npm i --save @glideapps/glide-data-grid lodash marked
```
<CodeBlock language="bash">{`\
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz @glideapps/glide-data-grid@5.2.1`}
</CodeBlock>
Start dev server:

54
docz/docs/03-demos/04-static/09-nuxtjs.md
View File

@ -5,18 +5,26 @@ pagination_next: demos/mobile/index
---
import current from '/version.js';
import CodeBlock from '@theme/CodeBlock';
`@nuxt/content` is a file-based CMS for Nuxt, enabling static-site generation
and on-demand server rendering powered by spreadsheets.
## Nuxt Content v1
:::note
This demo was tested on 2023 April 06 against Nuxt Content `v1.15.1`.
The following deployments were tested:
| Nuxt Content | Nuxt | Date |
|:-------------|:---------|:-----------|
| `1.15.1` | `2.16.3` | 2023-04-06 |
| `2.3.0` | `3.0.0` | 2023-01-19 |
:::
## Nuxt Content v1
Nuxt Content v1 is designed to work with Nuxt v2.
### Configuration
Through an override in `nuxt.config.js`, Nuxt Content will use custom parsers.
@ -86,13 +94,6 @@ neatly with nested `v-for`:
### Nuxt Content Demo
:::note
The project was generated using `create-nuxt-app v4.0.0`. The generated project
used Nuxt `v2.16.3` and Nuxt Content `v1.15.1`.
:::
1) Create a stock app:
```bash
@ -118,11 +119,11 @@ The project will be configured and modules will be installed.
2) Install the SheetJS library and start the server:
```bash
<CodeBlock language="bash">{`\
cd SheetJSNuxt
npm i --save https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz
npm run dev
```
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz
npm run dev`}
</CodeBlock>
When the build finishes, the terminal will display a URL like:
@ -243,11 +244,7 @@ will not change.
## Nuxt Content v2
:::note
This demo was tested on 2023 January 19 against Nuxt Content `v2.3.0`.
:::
Nuxt Content v2 is designed to work with Nuxt v3.
### Overview
@ -305,14 +302,6 @@ Pages should use `ContentRenderer` to reference the data:
### Nuxt Content 2 Demo
:::note
This demo was tested on 2023 January 19 against Nuxt Content `v2.3.0`.
The generated project used Nuxt `v3.0.0`.
:::
1) Create a stock app and install dependencies:
```bash
@ -324,16 +313,17 @@ npx yarn add --dev @types/node
2) Install the SheetJS library and start the server:
```bash
npx yarn add https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz
npx yarn dev
```
<CodeBlock language="bash">{`\
npx yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz
npx yarn dev`}
</CodeBlock>
When the build finishes, the terminal will display a URL like:
```
> Local: http://localhost:3000/
```
```
The server is listening on that URL. Open the link in a web browser.

6
docz/docs/03-demos/04-static/11-svelte.md
View File

@ -170,6 +170,12 @@ cd sheetjs-svelte
npm i
```
When prompted:
- `Which Svelte app template?` select `Skeleton Project`
- `Add type checking with TypeScript?` select `Yes, using JavaScript with JSDoc`
- `Select additional options` press Enter (do not select options)
2) Fetch the example file [`pres.xlsx`](https://sheetjs.com/pres.xlsx) and move
to a `data` subdirectory in the root of the project:

67
docz/docs/03-demos/05-mobile/01-reactnative.md
View File

@ -10,6 +10,7 @@ sidebar_custom_props:
import current from '/version.js';
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import CodeBlock from '@theme/CodeBlock';
The [NodeJS Module](/docs/getting-started/installation/nodejs) can be imported
from the main `App.js` entrypoint or any script in the project.
@ -87,12 +88,12 @@ npx react-native init SheetJSRNFetch --version="0.72.0-rc.1"
2) Install shared dependencies:
```bash
<CodeBlock language="bash">{`\
cd SheetJSRNFetch
curl -LO https://oss.sheetjs.com/assets/img/logo.png
npm i -S https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz
npm i -S react-native-table-component@1.2.0 @types/react-native-table-component
```
npm i -S https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz
npm i -S react-native-table-component@1.2.0 @types/react-native-table-component`}
</CodeBlock>
Refresh iOS project by running `pod install` from the `ios` subfolder:
@ -259,9 +260,9 @@ fork as the spiritual successor.
`react-native-blob-util` is an active fork of `rn-fetch-blob`
On the day that this demo was tested (2022 August 14), both `rn-fetch-blob` and
`react-native-blob-util` worked with the tested iOS and Android SDK versions.
The APIs are identical for the purposes of working with files.
When this demo was last tested, `rn-fetch-blob` and `react-native-blob-util`
both worked with the tested iOS and Android SDK versions. The APIs are identical
for the purposes of working with files.
:::
@ -436,9 +437,9 @@ await FileSystem.writeAsStringAsync(FileSystem.documentDirectory + "sheetjs.xlsx
:::note
This demo was tested on an Intel Mac on 2022 August 14 with RN `0.67.2`.
This demo was tested on an Intel Mac on 2023 April 30 with RN `0.72.0-rc.1`.
The iOS simulator runs iOS 15.5 on an iPhone 13.
The iOS simulator runs iOS 16.2 on an iPhone 14.
The Android simulator runs Android 12 (S) Platform 31 on a Pixel 5.
@ -458,17 +459,17 @@ This example tries to separate the library-specific functions.
1) Create project:
```bash
npx react-native init SheetJSRN --version="0.67.2"
npx react-native init SheetJSRN --version="0.72.0-rc.1"
```
2) Install shared dependencies:
```bash
<CodeBlock language="bash">{`\
cd SheetJSRN
curl -LO https://oss.sheetjs.com/assets/img/logo.png
npm i -S https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz
npm i -S react-native-table-component@1.2.0 react-native-document-picker
```
npm i -S https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz
npm i -S react-native-table-component@1.2.0 react-native-document-picker@8.2.0`}
</CodeBlock>
Refresh iOS project by running `pod install` from the `ios` subfolder:
@ -503,7 +504,7 @@ You should see the skeleton app:
Install `react-native-blob-util` dependency:
```bash
npm i -S react-native-blob-util
npm i -S react-native-blob-util@0.17.1
```
Add the highlighted lines to `index.js`:
@ -522,7 +523,8 @@ async function pickAndParse() {
const f = await pickSingle({allowMultiSelection: false, copyTo: "documentDirectory", mode: "open" });
let path = f.fileCopyUri;
if (Platform.OS === 'ios') path = path.replace(/^.*\/Documents\//, RNFetchBlob.fs.dirs.DocumentDir + "/");
const res = await RNFetchBlob.fs.readFile(path, 'ascii');
const res = await (await fetch(path)).arrayBuffer(); // RN >= 0.72
// const res = await RNFetchBlob.fs.readFile(path, 'ascii'); // RN < 0.72
return read(new Uint8Array(res), {type: 'buffer'});
}
@ -543,7 +545,7 @@ const make_width = ws => {
Install `react-native-file-access` dependency:
```bash
npm i -S react-native-file-access
npm i -S react-native-file-access@2.6.0
```
Add the highlighted lines to `index.js`:
@ -554,13 +556,19 @@ import { Table, Row, Rows, TableWrapper } from 'react-native-table-component';
// highlight-start
import { read, write } from 'xlsx';
import { pickSingle } from 'react-native-document-picker';
import { Platform } from 'react-native';
import { Dirs, FileSystem } from 'react-native-file-access';
async function pickAndParse() {
/* react-native-file-access does not need a copy */
const f = await pickSingle({allowMultiSelection: false, mode: "open" });
const res = await FileSystem.readFile(f.uri, "base64");
return read(res, {type: 'base64'});
/* react-native-file-access in RN < 0.72 does not need a copy */
//const f = await pickSingle({allowMultiSelection: false, mode: "open" });
//const res = await FileSystem.readFile(f.uri, "base64");
//return read(res, {type: 'base64'});
/* react-native-file-access in RN >= 0.72 needs a copy */
const f = await pickSingle({allowMultiSelection: false, copyTo: "documentDirectory", mode: "open" });
let path = f.fileCopyUri;
const res = await (await fetch(path)).arrayBuffer();
return read(new Uint8Array(res), {type: 'buffer'});
}
async function writeWorkbook(wb) {
@ -580,7 +588,7 @@ const make_width = ws => {
Install `rn-fetch-blob` dependency:
```bash
npm i -S rn-fetch-blob
npm i -S rn-fetch-blob@0.12.0
```
Add the highlighted lines to `index.js`:
@ -599,7 +607,8 @@ async function pickAndParse() {
const f = await pickSingle({allowMultiSelection: false, copyTo: "documentDirectory", mode: "open" });
let path = f.fileCopyUri;
if (Platform.OS === 'ios') path = path.replace(/^.*\/Documents\//, RNFetchBlob.fs.dirs.DocumentDir + "/");
const res = await RNFetchBlob.fs.readFile(path, 'ascii');
const res = await (await fetch(path)).arrayBuffer(); // RN >= 0.72
// const res = await RNFetchBlob.fs.readFile(path, 'ascii'); // RN < 0.72
return read(new Uint8Array(res), {type: 'buffer'});
}
@ -620,7 +629,7 @@ const make_width = ws => {
Install `react-native-fs` dependency:
```bash
npm i -S react-native-fs
npm i -S react-native-fs@2.20.0
```
Add the highlighted lines to `index.js`:
@ -654,10 +663,14 @@ const make_width = ws => {
</TabItem>
<TabItem value="EXPO" label="EXPO">
:::caution
:::warning
At the time of testing, the `npx install-expo-modules` step breaks the Android
project. The demo works as expected on iOS.
At the time of testing, Expo did not support RN 0.72 . The project should be
created with React Native 0.67.2:
```bash
npx react-native init SheetJSRN --version="0.67.2"
```
:::

35
docz/docs/03-demos/07-data/01-websql.md
View File

@ -8,6 +8,7 @@ sidebar_custom_props:
---
import current from '/version.js';
import CodeBlock from '@theme/CodeBlock';
WebSQL is a popular SQL-based in-browser database available on Chrome. In
practice, it is powered by SQLite, and most simple SQLite-compatible queries
@ -67,7 +68,7 @@ db.readTransaction(tx =>
:::note
This demo was last tested on 2023 February 26
This demo was last tested on 2023 April 30
:::
@ -139,9 +140,9 @@ of JS objects.
1) Install the dependencies:
```bash
npm i --save https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz better-sqlite3@8.1.0
```
<CodeBlock language="bash">{`\
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz better-sqlite3@8.1.0`}
</CodeBlock>
2) Save the following to `node.mjs`:
@ -190,9 +191,9 @@ Bun ships with a built-in high-performance module `bun:sqlite`.
1) Install the dependencies:
```bash
npm i --save https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz
```
<CodeBlock language="bash">{`\
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
</CodeBlock>
2) Save the following to `bun.mjs`:
@ -241,20 +242,20 @@ Deno `sqlite` library returns raw arrays of arrays.
1) Save the following to `deno.ts`:
```ts title="deno.ts"
<CodeBlock language="ts" title="deno.ts">{`\
/* Load SQLite3 connector library */
import { DB } from "https://deno.land/x/sqlite/mod.ts";
\n\
/* Load SheetJS library */
// @deno-types="https://cdn.sheetjs.com/xlsx-latest/package/types/index.d.ts"
import * as XLSX from 'https://cdn.sheetjs.com/xlsx-latest/package/xlsx.mjs';
// @deno-types="https://cdn.sheetjs.com/xlsx-${current}/package/types/index.d.ts"
import * as XLSX from 'https://cdn.sheetjs.com/xlsx-${current}/package/xlsx.mjs';
\n\
/* Initialize database */
var db = new DB("northwind.db");
\n\
/* Create new workbook */
var wb = XLSX.utils.book_new();
\n\
/* Get list of table names */
var sql = db.prepareQuery("SELECT name FROM sqlite_master WHERE type='table'");
var result = sql.all();
@ -272,9 +273,9 @@ result.forEach(function(row) {
XLSX.utils.book_append_sheet(wb, ws, row[0]);
}
});
\n\
/* Write File */
XLSX.writeFile(wb, "deno.xlsx");
```
XLSX.writeFile(wb, "deno.xlsx");`}
</CodeBlock>
2) Run `deno run --allow-read --allow-write deno.ts` and open `deno.xlsx`

35
docz/docs/03-demos/11-bigdata/02-worker.md
View File

@ -160,12 +160,12 @@ const worker = new Worker(
Inline workers additionally require the Blob MIME type `text/javascript`:
```js
const worker_code = `\
<CodeBlock language="js">{`\
const worker_code = \`\\
/* load standalone script from CDN */
import * as XLSX from "https://cdn.sheetjs.com/xlsx-latest/package/xlsx.mjs";
import * as XLSX from "https://cdn.sheetjs.com/xlsx-${current}/package/xlsx.mjs";
// ... do something with XLSX here ...
`;
\`;
const worker = new Worker(
URL.createObjectURL(
new Blob(
@ -176,8 +176,8 @@ const worker = new Worker(
),
// highlight-next-line
{ type: "module" } // second argument to Worker constructor
);
```
);`}
</CodeBlock>
</details>
@ -226,31 +226,31 @@ In the following example, the script:
- sends the string to the main browser context
- adds the HTML to the page in the main browser context
```jsx live
<CodeBlock language="jsx" live>{`\
function SheetJSFetchDLWorker() {
const [__html, setHTML] = React.useState("");
\n\
return ( <>
<button onClick={() => {
/* this mantra embeds the worker source in the function */
const worker = new Worker(URL.createObjectURL(new Blob([`\
const worker = new Worker(URL.createObjectURL(new Blob([\`\\
/* load standalone script from CDN */
importScripts("https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js");
importScripts("https://cdn.sheetjs.com/xlsx-${current}/package/dist/xlsx.full.min.js");
\n\
/* this callback will run once the main context sends a message */
self.addEventListener('message', async(e) => {
try {
/* Fetch file */
const res = await fetch("https://sheetjs.com/pres.numbers");
const ab = await res.arrayBuffer();
\n\
/* Parse file */
const wb = XLSX.read(ab, {dense: true});
const ws = wb.Sheets[wb.SheetNames[0]];
\n\
/* Generate HTML */
const html = XLSX.utils.sheet_to_html(ws);
\n\
/* Reply with result */
postMessage({ html });
} catch(e) {
@ -258,7 +258,8 @@ self.addEventListener('message', async(e) => {
postMessage({html: String(e.message || e).bold() });
}
}, false);
`])));
\`])));
\n\
/* when the worker sends back the HTML, add it to the DOM */
worker.onmessage = function(e) { setHTML(e.data.html); };
/* post a message to the worker */
@ -266,8 +267,8 @@ self.addEventListener('message', async(e) => {
}}><b>Click to Start</b></button>
<div dangerouslySetInnerHTML={{ __html }}/>
</> );
}
```
}`}
</CodeBlock>
</details>