forked from sheetjs/docs.sheetjs.com
		
	rn
This commit is contained in:
		
							parent
							
								
									4b984058b5
								
							
						
					
					
						commit
						cf283192e1
					
				| @ -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: | ||||
| 
 | ||||
|  | ||||
|  | ||||
| 
 | ||||
| 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: | ||||
| 
 | ||||
|  | ||||
|  | ||||
| 
 | ||||
| - Click "Export data".  You will see a popup with a location: | ||||
| 
 | ||||
|  | ||||
|  | ||||
| 
 | ||||
| - 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 | ||||
| ``` | ||||
| 
 | ||||
|  | ||||
|  | ||||
| 
 | ||||
| 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: | ||||
| 
 | ||||
|  | ||||
|  | ||||
| 
 | ||||
| - Click "Export data".  You will see a popup with a location: | ||||
| 
 | ||||
|  | ||||
|  | ||||
| 
 | ||||
| - Pull the file from the simulator and verify the contents: | ||||
| 
 | ||||
|  | ||||
							
								
								
									
										
											BIN
										
									
								
								docz/static/reactnative/and1.png
									
									
									
									
									
										Normal file
									
								
							
							
								
									
								
								
								
								
								
									
									
								
							
						
						
									
										
											BIN
										
									
								
								docz/static/reactnative/and1.png
									
									
									
									
									
										Normal file
									
								
							
										
											Binary file not shown.
										
									
								
							| After Width: | Height: | Size: 76 KiB | 
							
								
								
									
										
											BIN
										
									
								
								docz/static/reactnative/and3.png
									
									
									
									
									
										Normal file
									
								
							
							
								
									
								
								
								
								
								
									
									
								
							
						
						
									
										
											BIN
										
									
								
								docz/static/reactnative/and3.png
									
									
									
									
									
										Normal file
									
								
							
										
											Binary file not shown.
										
									
								
							| After Width: | Height: | Size: 102 KiB | 
							
								
								
									
										
											BIN
										
									
								
								docz/static/reactnative/and4.png
									
									
									
									
									
										Normal file
									
								
							
							
								
									
								
								
								
								
								
									
									
								
							
						
						
									
										
											BIN
										
									
								
								docz/static/reactnative/and4.png
									
									
									
									
									
										Normal file
									
								
							
										
											Binary file not shown.
										
									
								
							| After Width: | Height: | Size: 46 KiB | 
							
								
								
									
										
											BIN
										
									
								
								docz/static/reactnative/ios1.png
									
									
									
									
									
										Normal file
									
								
							
							
								
									
								
								
								
								
								
									
									
								
							
						
						
									
										
											BIN
										
									
								
								docz/static/reactnative/ios1.png
									
									
									
									
									
										Normal file
									
								
							
										
											Binary file not shown.
										
									
								
							| After Width: | Height: | Size: 86 KiB | 
							
								
								
									
										
											BIN
										
									
								
								docz/static/reactnative/ios3.png
									
									
									
									
									
										Normal file
									
								
							
							
								
									
								
								
								
								
								
									
									
								
							
						
						
									
										
											BIN
										
									
								
								docz/static/reactnative/ios3.png
									
									
									
									
									
										Normal file
									
								
							
										
											Binary file not shown.
										
									
								
							| After Width: | Height: | Size: 117 KiB | 
							
								
								
									
										
											BIN
										
									
								
								docz/static/reactnative/ios4.png
									
									
									
									
									
										Normal file
									
								
							
							
								
									
								
								
								
								
								
									
									
								
							
						
						
									
										
											BIN
										
									
								
								docz/static/reactnative/ios4.png
									
									
									
									
									
										Normal file
									
								
							
										
											Binary file not shown.
										
									
								
							| After Width: | Height: | Size: 160 KiB | 
		Loading…
	
		Reference in New Issue
	
	Block a user