| 
									
										
										
										
											2023-01-05 03:57:48 +00:00
										 |  |  | --- | 
					
						
							|  |  |  | title: Tauri | 
					
						
							| 
									
										
										
										
											2023-01-05 23:33:49 +00:00
										 |  |  | pagination_prev: demos/mobile/index | 
					
						
							| 
									
										
										
										
											2023-01-10 00:31:37 +00:00
										 |  |  | pagination_next: demos/cloud/index | 
					
						
							| 
									
										
										
										
											2023-01-05 03:57:48 +00:00
										 |  |  | sidebar_position: 4 | 
					
						
							|  |  |  | sidebar_custom_props: | 
					
						
							|  |  |  |   summary: Webview + Rust Backend | 
					
						
							|  |  |  | --- | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | import Tabs from '@theme/Tabs'; | 
					
						
							|  |  |  | import TabItem from '@theme/TabItem'; | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | The [NodeJS Module](/docs/getting-started/installation/nodejs) can be imported | 
					
						
							|  |  |  | from JavaScript code. | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | The "Complete Example" creates an app that looks like the screenshot: | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2023-01-21 10:50:57 +00:00
										 |  |  | <table><thead><tr> | 
					
						
							|  |  |  |   <th><a href="#complete-example">macOS</a></th> | 
					
						
							|  |  |  |   <th><a href="#complete-example">Linux</a></th> | 
					
						
							|  |  |  | </tr></thead><tbody><tr><td> | 
					
						
							| 
									
										
										
										
											2023-01-05 03:57:48 +00:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2023-01-21 10:50:57 +00:00
										 |  |  |  | 
					
						
							| 
									
										
										
										
											2023-01-05 03:57:48 +00:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2023-01-21 10:50:57 +00:00
										 |  |  | </td><td> | 
					
						
							| 
									
										
										
										
											2023-01-05 03:57:48 +00:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2023-01-21 10:50:57 +00:00
										 |  |  |  | 
					
						
							| 
									
										
										
										
											2023-01-05 03:57:48 +00:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2023-01-21 10:50:57 +00:00
										 |  |  | </td></tr></tbody></table> | 
					
						
							| 
									
										
										
										
											2023-01-05 03:57:48 +00:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2023-02-12 08:15:17 +00:00
										 |  |  | ## Integration Details
 | 
					
						
							| 
									
										
										
										
											2023-01-05 03:57:48 +00:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2023-01-21 10:50:57 +00:00
										 |  |  | :::note | 
					
						
							| 
									
										
										
										
											2023-01-05 03:57:48 +00:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2023-01-21 10:50:57 +00:00
										 |  |  | Tauri currently does not provide the equivalent of NodeJS `fs` module.  The raw | 
					
						
							|  |  |  | `@tauri-apps/api` methods used in the examples are not expected to change. | 
					
						
							| 
									
										
										
										
											2023-01-05 03:57:48 +00:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2023-01-21 10:50:57 +00:00
										 |  |  | ::: | 
					
						
							| 
									
										
										
										
											2023-01-05 03:57:48 +00:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2023-01-21 10:50:57 +00:00
										 |  |  | `http`, `dialog`, and `fs` must be explicitly allowed in `tauri.conf.json`: | 
					
						
							| 
									
										
										
										
											2023-01-05 03:57:48 +00:00
										 |  |  | 
 | 
					
						
							|  |  |  | ```json title="src-tauri/tauri.conf.json" | 
					
						
							|  |  |  |     "allowlist": { | 
					
						
							|  |  |  |       "http": { | 
					
						
							|  |  |  |         "all": true, | 
					
						
							|  |  |  |         "request": true, | 
					
						
							|  |  |  |         "scope": ["https://**"] | 
					
						
							|  |  |  |       }, | 
					
						
							|  |  |  |       "dialog": { | 
					
						
							|  |  |  |         "all": true | 
					
						
							|  |  |  |       }, | 
					
						
							| 
									
										
										
										
											2023-01-21 10:50:57 +00:00
										 |  |  |       "fs": { | 
					
						
							|  |  |  |         "all": true | 
					
						
							|  |  |  |       } | 
					
						
							| 
									
										
										
										
											2023-01-05 03:57:48 +00:00
										 |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ### Reading Files
 | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | There are two steps to reading files: obtaining a path and reading binary data: | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ```js | 
					
						
							|  |  |  | import { read } from 'xlsx'; | 
					
						
							|  |  |  | import { open } from '@tauri-apps/api/dialog'; | 
					
						
							|  |  |  | import { readBinaryFile } from '@tauri-apps/api/fs'; | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | const filters = [ | 
					
						
							|  |  |  |   {name: "Excel Binary Workbook", extensions: ["xlsb"]}, | 
					
						
							|  |  |  |   {name: "Excel Workbook", extensions: ["xlsx"]}, | 
					
						
							|  |  |  |   {name: "Excel 97-2004 Workbook", extensions: ["xls"]}, | 
					
						
							|  |  |  |   // ... other desired formats ... | 
					
						
							|  |  |  | ]; | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | async function openFile() { | 
					
						
							|  |  |  |   /* show open file dialog */ | 
					
						
							|  |  |  |   const selected = await open({ | 
					
						
							|  |  |  |     title: "Open Spreadsheet", | 
					
						
							|  |  |  |     multiple: false, | 
					
						
							|  |  |  |     directory: false, | 
					
						
							|  |  |  |     filters | 
					
						
							|  |  |  |   }); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |   /* read data into a Uint8Array */ | 
					
						
							|  |  |  |   const d = await readBinaryFile(selected); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |   /* parse with SheetJS */ | 
					
						
							|  |  |  |   const wb = read(d); | 
					
						
							|  |  |  |   return wb; | 
					
						
							|  |  |  | } | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ### Writing Files
 | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | There are two steps to writing files: obtaining a path and writing binary data: | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ```js | 
					
						
							|  |  |  | import { write } from 'xlsx'; | 
					
						
							|  |  |  | import { save } from '@tauri-apps/api/dialog'; | 
					
						
							|  |  |  | import { writeBinaryFile } from '@tauri-apps/api/fs'; | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | const filters = [ | 
					
						
							|  |  |  |   {name: "Excel Binary Workbook", extensions: ["xlsb"]}, | 
					
						
							|  |  |  |   {name: "Excel Workbook", extensions: ["xlsx"]}, | 
					
						
							|  |  |  |   {name: "Excel 97-2004 Workbook", extensions: ["xls"]}, | 
					
						
							|  |  |  |   // ... other desired formats ... | 
					
						
							|  |  |  | ]; | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | async function saveFile(wb) { | 
					
						
							|  |  |  |   /* show save file dialog */ | 
					
						
							|  |  |  |   const selected = await save({ | 
					
						
							|  |  |  |     title: "Save to Spreadsheet", | 
					
						
							|  |  |  |     filters | 
					
						
							|  |  |  |   }); | 
					
						
							| 
									
										
										
										
											2023-01-21 10:50:57 +00:00
										 |  |  |   if(!selected) return; | 
					
						
							| 
									
										
										
										
											2023-01-05 03:57:48 +00:00
										 |  |  | 
 | 
					
						
							|  |  |  |   /* Generate workbook */ | 
					
						
							|  |  |  |   const bookType = selected.slice(selected.lastIndexOf(".") + 1); | 
					
						
							|  |  |  |   const d = write(wb, {type: "buffer", bookType}); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |   /* save data to file */ | 
					
						
							|  |  |  |   await writeBinaryFile(selected, d); | 
					
						
							|  |  |  | } | 
					
						
							|  |  |  | ``` | 
					
						
							| 
									
										
										
										
											2023-01-21 10:50:57 +00:00
										 |  |  | 
 | 
					
						
							|  |  |  | ## Complete Example
 | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2023-02-12 08:15:17 +00:00
										 |  |  | :::note | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | This demo was tested against Tauri `v1.2.3` on 2023 February 12. | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ::: | 
					
						
							| 
									
										
										
										
											2023-01-21 10:50:57 +00:00
										 |  |  | 
 | 
					
						
							|  |  |  | 0) [Read Tauri "Getting Started" guide and install dependencies.](https://tauri.app/v1/guides/getting-started/prerequisites) | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 1) Create a new Tauri app: | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ```bash | 
					
						
							|  |  |  | npm create tauri-app | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | When prompted: | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | - Project Name: `SheetJSTauri` | 
					
						
							|  |  |  | - Package Manager: `npm` | 
					
						
							|  |  |  | - UI template: `vue-ts` | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 2) Enter the directory and install dependencies: | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ```bash | 
					
						
							|  |  |  | cd SheetJSTauri | 
					
						
							|  |  |  | npm i --save https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz | 
					
						
							|  |  |  | npm i --save @tauri-apps/api | 
					
						
							|  |  |  | npm i --save-dev @tauri-apps/cli | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 3) Enable operations by adding the highlighted lines to `tauri.conf.json` in | 
					
						
							|  |  |  | the `tauri.allowlist` section: | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ```json title="src-tauri/tauri.conf.json" | 
					
						
							|  |  |  |   "tauri": { | 
					
						
							|  |  |  |     "allowlist": { | 
					
						
							|  |  |  | // highlight-start | 
					
						
							|  |  |  |       "http": { | 
					
						
							|  |  |  |         "all": true, | 
					
						
							|  |  |  |         "request": true, | 
					
						
							|  |  |  |         "scope": ["https://**"] | 
					
						
							|  |  |  |       }, | 
					
						
							|  |  |  |       "dialog": { | 
					
						
							|  |  |  |         "all": true | 
					
						
							|  |  |  |       }, | 
					
						
							|  |  |  |       "fs": { | 
					
						
							|  |  |  |         "all": true | 
					
						
							|  |  |  |       }, | 
					
						
							|  |  |  | // highlight-end | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | In the same file, look for the `"identifier"` key and replace the value with `com.sheetjs.tauri`: | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ```json title="src-tauri/tauri.conf.json" | 
					
						
							|  |  |  |         "icons/icon.ico" | 
					
						
							|  |  |  |       ], | 
					
						
							|  |  |  |       // highlight-next-line | 
					
						
							|  |  |  |       "identifier": "com.sheetjs.tauri", | 
					
						
							|  |  |  |       "longDescription": "", | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 4) Download [`App.vue`](pathname:///tauri/App.vue) and replace `src/App.vue` | 
					
						
							|  |  |  |    with the downloaded script. | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ```bash | 
					
						
							|  |  |  | curl -L -o src/App.vue https://docs.sheetjs.com/tauri/App.vue | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 5) Build the app with | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ```bash | 
					
						
							|  |  |  | npm run tauri build | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | At the end, it will print the path to the generated program. Run the program! |