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

react-native-details

Browse Source
This commit is contained in:
SheetJS 2024-03-14 04:25:08 -04:00
parent e6308dac88
commit c5f24c4f1e
14 changed files with 323 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

145
docz/docs/03-demos/02-frontend/01-react.md
View File

@ -328,7 +328,7 @@ This demo was tested in the following environments:
| ReactJS | ViteJS | Date |
|:---------|:--------|:-----------|
| `18.2.0` | `5.0.5` | 2023-12-04 |
| `18.2.0` | `5.1.6` | 2024-03-13 |
:::
@ -376,8 +376,11 @@ and test the page.
:::note Tested Deployments
This demo was last run on 2023 October 24 using `create-react-app@5.0.1` and
`react-scripts@5.0.1`.
This demo was tested in the following environments:
| ReactJS | CRA | Date |
|:---------|:--------|:-----------|
| `18.2.0` | `5.0.1` | 2024-03-13 |
:::
@ -417,12 +420,131 @@ The generated site will be placed in the `build` folder.
npx http-server build
```
Access the displayed URL (typically `http://localhost:8080`) with a web browser
and test the page.
</TabItem>
<TabItem name="nextjs" value="NextJS">
:::note Tested Deployments
This demo was tested in the following environments:
| ReactJS | NextJS | Date |
|:---------|:---------|:-----------|
| `18.2.0` | `14.1.3` | 2024-03-13 |
:::
:::info pass
This demo focuses on processing data in Client Components.
The [NextJS demo](/docs/demos/static/nextjs) covers static site generation.
:::
:::caution pass
NextJS requires a number of workarounds for simple client-side JavaScript code.
**It is strongly recommended to use ViteJS or create-react-app when possible!**
:::
:::warning Telemetry
NextJS collects telemetry by default. The `telemetry` subcommand can disable it:
```js
npx next telemetry disable
```
The setting can be verified by running
```js
npx next telemetry status
```
:::
0) Disable NextJS telemetry:
```bash
npx next telemetry disable
```
1) Create a new site:
```bash
npx create-next-app@latest sheetjs-react --ts --no-eslint --no-tailwind --no-src-dir --no-app --import-alias "@/*"
```
2) Install the SheetJS dependency and start the dev server:
<CodeBlock language="bash">{`\
cd sheetjs-react
npm i
npx next telemetry disable
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz
npm run dev`}
</CodeBlock>
3) Open a web browser and access the displayed URL (`http://localhost:5173`)
4) Replace `src/App.jsx` with the `src/SheetJSReactAoO.js` example.
After replacing the code, add the following to the top of `src/App.jsx`:
```js title="src/App.jsx (add to top)"
"use client";
```
:::info NextJS Client Component Workaround
The goal is to run SheetJS code in the browser. NextJS will attempt to render
pages on the server by default. `"use client";` instructs NextJS to treat the
exported component as a "Client Component" that will be rendered in the browser.
If the pragma is not added, NextJS will report errors related to hydration:
```
Error: Hydration failed because the initial UI does not match what was rendered on the server.
Warning: Expected server HTML to contain a matching <td> in <tfoot>.
See more info here: https://nextjs.org/docs/messages/react-hydration-error
```
:::
The page will refresh and show a table with an Export button. Click the button
and the page will attempt to download `SheetJSReactAoO.xlsx`.
5) Build the site:
```bash
npm run build
```
The generated site will be placed in the `dist` folder.
6) Start a local web server:
```bash
npx http-server dist
```
Access the displayed URL (typically `http://localhost:8080`) with a web browser
and test the page.
</TabItem>
</Tabs>
When the page loads, the app will fetch <https://sheetjs.com/pres.xlsx> and
display the data from the first worksheet in a TABLE. The "Export XLSX" button
will generate a workbook that can be opened in a spreadsheet editor.
</details>
### HTML
@ -485,7 +607,11 @@ export default function SheetJSReactHTML() {
:::note Tested Deployments
This demo was last tested on 2023 October 08 with ViteJS 4.4.1 and React 18.2.0
This demo was tested in the following environments:
| ReactJS | ViteJS | Date |
|:---------|:--------|:-----------|
| `18.2.0` | `5.1.6` | 2024-03-13 |
:::
@ -533,8 +659,11 @@ and test the page.
:::note Tested Deployments
This demo was last run on 2023 October 24 using `create-react-app@5.0.1` and
`react-scripts@5.0.1`.
This demo was tested in the following environments:
| ReactJS | CRA | Date |
|:---------|:--------|:-----------|
| `18.2.0` | `5.0.1` | 2024-03-13 |
:::
@ -580,6 +709,10 @@ and test the page.
</TabItem>
</Tabs>
When the page loads, the app will fetch <https://sheetjs.com/pres.xlsx> and
display the data from the first worksheet in a TABLE. The "Export XLSX" button
will generate a workbook that can be opened in a spreadsheet editor.
</details>
### Rows and Columns

54
docz/docs/03-demos/02-frontend/03-angular.md
View File

@ -420,10 +420,10 @@ export class AppComponent {
This demo was tested in the following environments:
| Angular | Date |
|:---------|:-----------|
| `17.0.5` | 2023-12-04 |
| `16.2.7` | 2023-10-22 |
| Angular | Date |
|:----------|:-----------|
| `17.3.0` | 2024-03-13 |
| `16.2.12` | 2024-03-13 |
:::
@ -436,9 +436,20 @@ npx @angular/cli analytics disable -g
1) Create a new project:
```bash
npx @angular/cli@17.0.5 new --minimal --defaults --no-interactive sheetjs-angular
npx @angular/cli@17.3.0 new --minimal --defaults --no-interactive sheetjs-angular
```
:::note pass
The `@angular/cli` version controls the project version of Angular. For example,
the following command uses Angular 16.2.12:
```bash
npx @angular/cli@16.2.12 new --minimal --defaults --no-interactive sheetjs-angular
```
:::
2) Install the SheetJS dependency and start the dev server:
<CodeBlock language="bash">{`\
@ -484,7 +495,8 @@ npx -y http-server dist/sheetjs-angular/browser/
</TabItem>
</Tabs>
Access `http://localhost:8080` with a web browser to test the bundled site.
Access the displayed URL (typically `http://localhost:8080`) with a web browser
to test the bundled site.
</details>
@ -599,7 +611,12 @@ export class AppComponent {
:::note Tested Deployments
This demo was last run on 2023-11-18 using Angular 17.0.3 and CLI `17.0.1`
This demo was tested in the following environments:
| Angular | Date |
|:----------|:-----------|
| `17.3.0` | 2024-03-13 |
| `16.2.12` | 2024-03-13 |
:::
@ -612,9 +629,20 @@ npx @angular/cli analytics disable -g
1) Create a new project:
```bash
npx @angular/cli@17.0.1 new --minimal --defaults --no-interactive sheetjs-angular
npx @angular/cli@17.3.0 new --minimal --defaults --no-interactive sheetjs-angular
```
:::note pass
The `@angular/cli` version controls the project version of Angular. For example,
the following command uses Angular 16.2.12:
```bash
npx @angular/cli@16.2.12 new --minimal --defaults --no-interactive sheetjs-angular
```
:::
2) Install the SheetJS dependency and start the dev server:
<CodeBlock language="bash">{`\
@ -702,7 +730,7 @@ Google and the Angular team.
:::
:::caution
:::caution pass
The Angular tooling does not provide a command to switch between versions!
@ -797,7 +825,7 @@ In the component, `aoa_to_sheet` is used to generate the worksheet:
### SystemJS
The default angular-cli configuration requires no additional configuration.
The default `angular-cli` configuration requires no additional configuration.
Some deployments use the SystemJS loader, which does require configuration.
[The SystemJS demo](/docs/demos/frontend/bundler/systemjs) includes the
@ -983,14 +1011,14 @@ curl -o tsconfig.app.json -L https://docs.sheetjs.com/angular/versions/tsconfig.
</TabItem>
</Tabs>
2) install project and dependencies:
2) Install project and dependencies:
<CodeBlock language="bash">{`\
npm i
npm i -S https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
</CodeBlock>
3) start a local server with
3) Start a local server with
```bash
npm start
@ -1000,7 +1028,7 @@ The traditional site URL is `http://localhost:4200/` . Open the page with a web
browser and open the console. In the "Elements" tab, the `app-root` element
will have an `ng-version` attribute.
4) build the app with
4) Build the app with
```bash
npm run build

4
docz/docs/03-demos/03-net/09-dom.md
View File

@ -203,7 +203,7 @@ Object.defineProperty(tbl.__proto__, "innerHTML", { get: function() {
:::note Tested Deployments
This demo was last tested on 2023 September 10 against XMLDOM `0.8.10`
This demo was last tested on 2024 March 12 against XMLDOM `0.8.10`
:::
@ -246,7 +246,7 @@ features to ensure that SheetJS DOM methods can process TABLE elements.
:::note Tested Deployments
This demo was last tested on 2023 September 10 against Cheerio `1.0.0-rc.12`
This demo was last tested on 2024 March 12 against Cheerio `1.0.0-rc.12`
:::

8
docz/docs/03-demos/12-static/08-nextjs.md
View File

@ -47,6 +47,14 @@ npx next@13.5.6 telemetry status
:::
:::info pass
This demo focuses on static sites where data files are processed at build time.
[The ReactJS demo](/docs/demos/frontend/react) shows NextJS "Client Components".
:::
:::caution Next 13+ and SWC
Next 13 switched to the SWC minifier. There are known issues with the minifier.

105
docz/docs/03-demos/17-mobile/01-reactnative.md
View File

@ -200,7 +200,7 @@ row. This neatly skips the first header row.
## Fetching Remote Data
React Native versions starting from `0.72.0`[^5] support binary data with `fetch`.
React Native versions starting from `0.72.0`[^5] support binary data in `fetch`.
This snippet downloads and parses <https://sheetjs.com/pres.xlsx>:
@ -217,19 +217,27 @@ const wb = XLSX.read(ab);
This demo was tested in the following environments:
| OS | Type | Device | RN | Date |
|:-----------|:-----|:--------------------|:---------|:-----------|
| Android 34 | Sim | Pixel 3a | `0.73.5` | 2024-03-05 |
| iOS 17.2 | Sim | iPhone 15 Pro Max | `0.73.1` | 2023-12-21 |
| Android 29 | Real | NVIDIA Shield | `0.73.5` | 2024-03-05 |
| iOS 15.1 | Real | iPad Pro | `0.73.1` | 2023-12-21 |
**Simulators**
| OS | Device | RN | Dev Platform | Date |
|:-----------|:------------------|:---------|:-------------|:-----------|
| Android 34 | Pixel 3a | `0.73.6` | `darwin-x64` | 2024-03-13 |
| iOS 17.4 | iPhone 15 Pro Max | `0.73.6` | `darwin-x64` | 2024-03-13 |
| Android 34 | Pixel 3a | `0.73.5` | `win10-x64` | 2024-03-05 |
**Real Devices**
| OS | Device | RN | Date |
|:-----------|:------------------|:---------|:-----------|
| iOS 15.1 | iPhone 12 Pro Max | `0.73.6` | 2024-03-13 |
| Android 29 | NVIDIA Shield | `0.73.6` | 2024-03-13 |
:::
1) Create project:
```bash
npx -y react-native@0.73.1 init SheetJSRNFetch --version="0.73.1"
npx -y react-native@0.73.6 init SheetJSRNFetch --version="0.73.6"
```
2) Install shared dependencies:
@ -256,9 +264,9 @@ curl -LO https://docs.sheetjs.com/reactnative/App.tsx
When the demo was last tested on macOS, `java -version` displayed the following:
```
openjdk version "17.0.9" 2023-10-17
OpenJDK Runtime Environment Temurin-17.0.9+9 (build 17.0.9+9)
OpenJDK 64-Bit Server VM Temurin-17.0.9+9 (build 17.0.9+9, mixed mode)
openjdk version "17.0.10" 2024-01-16
OpenJDK Runtime Environment Temurin-17.0.10+7 (build 17.0.10+7)
OpenJDK 64-Bit Server VM Temurin-17.0.10+7 (build 17.0.10+7, mixed mode)
```
:::
@ -272,7 +280,7 @@ npx react-native run-android
:::caution pass
If the initial launch fails with an error referencing the emulator, manually
start the emulator and try again.
start the emulator from Android Studio and try again.
Gradle errors typically stem from a Java version mismatch:
@ -359,6 +367,28 @@ npx react-native run-android
14) Enable developer code signing certificates[^7].
<details open><summary><b>Enabling Code Signing</b> (click to show)</summary>
These instructions were verified against Xcode 15.3.
A) Open the included iOS workspace in Xcode:
```bash
open ios/SheetJSRNFetch.xcworkspace
```
B) Select "SheetJSRNFetch" in the Project Navigator:
![Select the project](pathname:///reactnative/xcode-select-project.png)
C) Select "Signing & Capabilities" in the main view.
D) Select "All" in the lower bar and ensure a Team is selected in the dropdown:
![Xcode Signing and Capabilities](pathname:///reactnative/xcode-sign-cap.png)
</details>
15) Install `ios-deploy` through Homebrew:
```bash
@ -373,7 +403,39 @@ npx react-native run-ios
:::caution pass
When this demo was last tested, the build failed with the following error:
In some tests, the app failed to run on the device due to "Untrusted Developer":
```
Your device management settings do not allow apps from developer ... on this iPhone. You can allow using these apps in Settings.
```
These instructions were verified against iOS 15.1.
A) Open the Settings app and select "General" > "VPN & Device Management".
![iOS Management](pathname:///reactnative/ios-mgmt.png)
B) Select the Apple Development certificate under "Developer App".
![iOS Certificate Info](pathname:///reactnative/ios-cert.png)
In the new screen, the name "SheetJSRNFetch" will be displayed in the Apps list.
C) Tap "Trust ..." and tap "Trust" in the popup.
![iOS Trust Popup](pathname:///reactnative/ios-trust.png)
D) Close the Settings app on the device.
E) Close the Metro window on the computer.
F) Run `npx react-native run-ios` again.
:::
:::note pass
In some tests, the build failed with the following error:
```
PhaseScriptExecution failed with a nonzero exit code
@ -402,6 +464,18 @@ DEST=$CONFIGURATION_BUILD_DIR/$UNLOCALIZED_RESOURCES_FOLDER_PATH
:::
:::caution pass
In some test runs, the error mentioned a development team:
```
error: Signing for "SheetJSRNFetch" requires a development team. Select a development team in the Signing & Capabilities editor. (in target 'SheetJSRNFetch' from project 'SheetJSRNFetch')
```
Code signing must be enabled in the project!
:::
:::info pass
By default, React Native generates applications that exclusively target iPhone.
@ -427,8 +501,7 @@ D) Select the "Build Settings" tab in the main area.
E) In the search bar below "Build Settings", type "tar"
F) Look for the "Targeted Device Families" row. Change the corresponding value
to "iPhone, iPad".
F) In the "Targeted Device Families" row, change the value to "iPhone, iPad".
:::
@ -1058,4 +1131,4 @@ npx xlsx-cli /tmp/sheetjsw.xlsx
[^5]: React-Native commit [`5b597b5`](https://github.com/facebook/react-native/commit/5b597b5ff94953accc635ed3090186baeecb3873) added the final piece required for `fetch` support. It landed in version `0.72.0-rc.1` and is available in official releases starting from `0.72.0`.
[^6]: When the demo was last tested, the Temurin distribution of Java 17 was installed through the macOS Brew package manager by running `brew install temurin17`. [Direct downloads are available at `adoptium.net`](https://adoptium.net/temurin/releases/?version=17)
[^7]: See ["Running On Device"](https://reactnative.dev/docs/running-on-device) in the React Native documentation
[^8]: Follow the ["React Native CLI Quickstart"](https://reactnative.dev/docs/environment-setup) for Android (and iOS, if applicable)
[^8]: Follow the ["React Native CLI Quickstart"](https://reactnative.dev/docs/environment-setup) for Android (and iOS, if applicable)

8
docz/docs/03-demos/19-desktop/02-nwjs.md
View File

@ -113,11 +113,11 @@ This demo was tested in the following environments:
| OS and Version | Architecture | NW.js | Date |
|:---------------|:-------------|:---------|:-----------|
| macOS 13.5.2 | `darwin-x64` | `0.78.1` | 2023-09-27 |
| macOS 14.3.1 | `darwin-x64` | `0.85.0` | 2024-03-12 |
| macOS 14.1.2 | `darwin-arm` | `0.82.0` | 2023-12-01 |
| Windows 10 | `win10-x64` | `0.83.0` | 2024-03-04 |
| Windows 11 | `win11-arm` | `0.82.0` | 2023-12-01 |
| Linux (HoloOS) | `linux-x64` | `0.83.0` | 2024-01-26 |
| Linux (HoloOS) | `linux-x64` | `0.85.0` | 2024-03-12 |
There is no official Linux ARM64 release. The community release[^1] was tested
and verified on 2023-09-27.
@ -140,7 +140,7 @@ cd sheetjs-nwjs
"version": "0.0.0",
"main": "index.html",
"dependencies": {
"nw": "0.83.0",
"nw": "0.85.0",
"xlsx": "https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz"
}
}`}
@ -179,7 +179,7 @@ the file input element to select a spreadsheet and clicking the export button.
5) To build a standalone app, run the builder:
```bash
npx -p nw-builder nwbuild --mode=build --version=0.83.0 --glob=false --outDir=../out ./
npx -p nw-builder nwbuild --mode=build --version=0.85.0 --glob=false --outDir=../out ./
```
This will generate the standalone app in the `..\out\` folder.

2
docz/docs/03-demos/27-local/03-storageapi.md
View File

@ -21,7 +21,7 @@ Each browser demo was tested in the following environments:
| Browser | Date |
|:------------|:-----------|
| Chrome 119 | 2023-11-30 |
| Safari 16.6 | 2023-09-17 |
| Safari 17.3 | 2024-03-12 |
:::

32
docz/docs/03-demos/32-extensions/01-extendscript.md
View File

@ -39,9 +39,9 @@ This demo was verified in the following deployments:
| App | Platform | Date |
|:----------|:-------------|:-----------|
| Photoshop | ExtendScript | 2023-09-24 |
| InDesign | ExtendScript | 2023-09-24 |
| InDesign | CEP | 2023-09-24 |
| Photoshop | ExtendScript | 2024-03-12 |
| InDesign | ExtendScript | 2024-03-12 |
| InDesign | CEP | 2024-03-12 |
| InDesign | UXP | 2024-03-11 |
:::
@ -232,6 +232,32 @@ manifest must include the following flags to enable `cep.fs`:
</CEFCommandLine>
```
:::caution pass
With newer versions of Creative Cloud apps, a special player debug mode must be
enabled to use unsigned extensions. The command depends on the CEP version.
InDesign and PhotoShop 2024 use CEP 11. In the examples, the `11` should be
replaced with the appropriate CEP version number.
On Windows, within the registry key `HKEY_CURRENT_USER\SOFTWARE\Adobe\CSXS.11`,
a string value named `PlayerDebugMode` must be set to 1. This can be set in
PowerShell using the `reg` command:
```pwsh
reg add HKCU\SOFTWARE\Adobe\CSXS.11 /v PlayerDebugMode /t REG_SZ /d 1 /f
```
On macOS, the setting must be added to `com.adobe.CSXS.11.plist` . After writing
to the property list, `cfprefsd` must be restarted:
```bash
defaults write com.adobe.CSXS.11.plist PlayerDebugMode 1
killall cfprefsd
```
:::
### Reading Files
The second argument to `cep.fs.readFile` is an encoding. `cep.encoding.Base64`

10
docz/docs/03-demos/37-bigdata/02-worker.md
View File

@ -190,11 +190,11 @@ Each browser demo was tested in the following environments:
| Browser | Date | Comments |
|:------------|:-----------|:----------------------------------------|
| Chrome 121 | 2024-02-25 | |
| Edge 116 | 2023-09-02 | |
| Safari 16.6 | 2023-09-02 | File System Access API is not supported |
| Brave 1.57 | 2023-09-02 | File System Access API is not supported |
| Firefox 118 | 2023-10-09 | File System Access API is not supported |
| Chrome 122 | 2024-03-12 | |
| Edge 122 | 2024-03-12 | |
| Safari 17.3 | 2024-03-12 | File System Access API is not supported |
| Brave 1.59 | 2024-03-12 | File System Access API is not supported |
| Firefox 122 | 2024-03-12 | File System Access API is not supported |
:::

6
docz/docs/03-demos/42-engines/09-hermes.md
View File

@ -686,7 +686,11 @@ contents of the first sheet as CSV rows.
:::note Tested Deployments
This demo was last tested on 2023 November 04 against Hermes version `0.12.0`.
This demo was tested in the following deployments:
| Architecture | Hermes | Date |
|:-------------|:---------|:-----------|
| `darwin-x64` | `0.12.0` | 2024-03-13 |
:::

BIN
docz/static/reactnative/ios-cert.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 922 KiB

BIN
docz/static/reactnative/ios-mgmt.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 938 KiB

BIN
docz/static/reactnative/ios-trust.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
docz/static/reactnative/xcode-sign-cap.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 118 KiB