This commit is contained in:
SheetJS 2023-10-25 02:29:34 -04:00
parent 4b984058b5
commit cf283192e1
11 changed files with 51 additions and 31 deletions

@ -372,7 +372,7 @@ and test the page.
:::note
This demo was last run on 2023 July 03 using `create-react-app@5.0.1` and
This demo was last run on 2023 October 24 using `create-react-app@5.0.1` and
`react-scripts@5.0.1`.
:::
@ -529,7 +529,7 @@ and test the page.
:::note
This demo was last run on 2023 July 03 using `create-react-app@5.0.1` and
This demo was last run on 2023 October 24 using `create-react-app@5.0.1` and
`react-scripts@5.0.1`.
:::

@ -123,5 +123,13 @@ npm i -S https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz vue3-table-
curl -L -o src/App.vue https://docs.sheetjs.com/vtl/App.vue
```
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.
4) Start the dev server:
```bash
npm run dev
```
5) Load the displayed URL (typically `http://localhost:5173`) in a web browser.
When the page loads, it will try to fetch <https://sheetjs.com/pres.numbers>
and display the data

@ -22,7 +22,9 @@ from files and how to organize page scripts to process the files at compile time
The ["Complete Example"](#complete-example) section includes a complete website
powered by an XLSX spreadsheet.
:::note pass
:::info pass
This demo focuses on server-side processing with SvelteKit and Svelte.
The [Svelte demo](/docs/demos/frontend/svelte) covers general client-side usage.
@ -43,6 +45,12 @@ flowchart LR
aoo --> |+page.svelte\ncomponent| html
```
:::note
This demo was tested on 2023 October 24 using SvelteKit `1.27.0` and Svelte `4.2.2`
:::
## Integration
`+page.server.js` scripts can be pre-rendered by exporting `prerender` from the
@ -165,12 +173,6 @@ a simple HTML table without any reference to the existing spreadsheet file!
## Complete Example
:::note
This demo was tested on 2023 July 12 using SvelteKit `1.22.2` and Svelte `4.0.5`
:::
### Initial Setup
1) Create a new site:

@ -46,6 +46,12 @@ npx astro telemetry disable
:::
:::note
This demo was last tested on 2023 October 24 using AstroJS `v3.3.4`
:::
## Integration
:::info pass
@ -171,12 +177,6 @@ a simple HTML table without any reference to the existing spreadsheet file!
## Complete Example
:::note
This demo was tested on 2023 July 30 using AstroJS `v2.9.6`
:::
:::caution pass
AstroJS has introduced a number of breaking changes. If the demo fails, please
@ -212,7 +212,7 @@ npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz`}
4) Append the following lines to `src/env.d.ts`:
```ts title="src/env.d.ts"
```ts title="src/env.d.ts (add to end)"
/* add to the end of the file */
declare module '*.numbers' { const data: string; export default data; }
declare module '*.xlsx' { const data: string; export default data; }

@ -593,11 +593,11 @@ await FileSystem.writeAsStringAsync(FileSystem.documentDirectory + "sheetjs.xlsx
:::note
This demo was tested on an Intel Mac on 2023 July 02 with RN `0.72.1`.
Each Android demo was last tested on 2023 September 03 with RN `0.72.6`. The
simulator used Android 13 ("Tiramisu") API 33 on a Pixel 3.
The iOS simulator runs iOS 16.2 on an iPhone 14.
The Android simulator runs Android 12 (S) Platform 31 on a Pixel 5.
Each iOS demo was last tested on 2023 September 03 with RN `0.72.6`. The
simulator used iOS 17.0 on an iPhone 15 Pro Max.
:::
@ -615,7 +615,7 @@ This example tries to separate the library-specific functions.
1) Create project:
```bash
npx react-native init SheetJSRN --version="0.72.1"
npx react-native init SheetJSRN --version="0.72.6"
```
2) Install shared dependencies:
@ -649,7 +649,7 @@ npx react-native run-ios
You should see the skeleton app:
![React Native iOS App](pathname:///mobile/rnios1.png)
![React Native iOS App](pathname:///reactnative/ios1.png)
4) Pick a filesystem library for integration:
@ -660,7 +660,7 @@ You should see the skeleton app:
Install `react-native-blob-util` dependency:
```bash
npm i -S react-native-blob-util@0.17.1
npm i -S react-native-blob-util@0.19.2
```
Add the highlighted lines to `index.js`:
@ -700,7 +700,7 @@ const make_width = ws => {
Install `react-native-file-access` dependency:
```bash
npm i -S react-native-file-access@2.6.0
npm i -S react-native-file-access@3.0.4
```
Add the highlighted lines to `index.js`:
@ -824,6 +824,16 @@ npx install-expo-modules
npm i -S expo-file-system expo-document-picker
```
:::note pass
In the most recent test, the installation asked a few questions.
If prompted to change iOS deployment target, choose Yes.
If prompted to install Expo CLI integration, choose No.
:::
Add the highlighted lines to `index.js`:
```js title="index.js"
@ -889,11 +899,11 @@ The app can be tested with the following sequence in the simulator:
Once selected, the screen should refresh with new contents:
![read file iOS](pathname:///mobile/rnios3.png)
![read file iOS](pathname:///reactnative/ios3.png)
- Click "Export data". You will see a popup with a location:
![write file iOS](pathname:///mobile/rnios4.png)
![write file iOS](pathname:///reactnative/ios4.png)
- Find the file and verify the contents are correct:
@ -912,7 +922,7 @@ There are no Android-specific steps. Emulator can be started with:
npx react-native run-android
```
![React Native Android App](pathname:///mobile/rnand1.png)
![React Native Android App](pathname:///reactnative/and1.png)
The app can be tested with the following sequence in the simulator:
@ -924,11 +934,11 @@ The app can be tested with the following sequence in the simulator:
Once selected, the screen should refresh with new contents:
![read file Android](pathname:///mobile/rnand3.png)
![read file Android](pathname:///reactnative/and3.png)
- Click "Export data". You will see a popup with a location:
![write file Android](pathname:///mobile/rnand4.png)
![write file Android](pathname:///reactnative/and4.png)
- Pull the file from the simulator and verify the contents:

Binary file not shown.

After

Width:  |  Height:  |  Size: 76 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 102 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 46 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 86 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 117 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 160 KiB