This commit is contained in:
SheetJS 2023-01-21 05:50:57 -05:00
parent 8855895cad
commit ba82e6c915
7 changed files with 102 additions and 118 deletions

@ -13,7 +13,7 @@ import TabItem from '@theme/TabItem';
The [Standalone scripts](/docs/getting-started/installation/standalone) can be
referenced in a `SCRIPT` tag from the entry point HTML page.
This demo was tested against NW.js 0.66.0 on 2022 January 07.
This demo was tested against NW.js 0.66.0 on 2023 January 07.
The "Complete Example" creates an app that looks like the screenshots below:

@ -13,7 +13,22 @@ import TabItem from '@theme/TabItem';
The [NodeJS Module](/docs/getting-started/installation/nodejs) can be imported
from JavaScript code.
This demo was tested against Tauri 1.0.5 on 2022 August 13.
The "Complete Example" creates an app that looks like the screenshot:
<table><thead><tr>
<th><a href="#complete-example">macOS</a></th>
<th><a href="#complete-example">Linux</a></th>
</tr></thead><tbody><tr><td>
![macOS screenshot](pathname:///tauri/macos.png)
</td><td>
![Linux screenshot](pathname:///tauri/linux.png)
</td></tr></tbody></table>
## Native Modules
:::note
@ -22,11 +37,10 @@ Tauri currently does not provide the equivalent of NodeJS `fs` module. The raw
:::
`http` and `dialog` must be explicitly allowed in `tauri.conf.json`:
`http`, `dialog`, and `fs` must be explicitly allowed in `tauri.conf.json`:
```json title="tauri.conf.json"
```json title="src-tauri/tauri.conf.json"
"allowlist": {
"all": true,
"http": {
"all": true,
"request": true,
@ -34,118 +48,12 @@ Tauri currently does not provide the equivalent of NodeJS `fs` module. The raw
},
"dialog": {
"all": true
},
"fs": {
"all": true
}
```
The "Complete Example" creates an app that looks like the screenshot:
![SheetJS Tauri MacOS screenshot](pathname:///tauri/macos.png)
<details><summary><b>Complete Example</b> (click to show)</summary>
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:
- App Name: `SheetJSTauri`
- Window Title: `SheetJS + Tauri`
- UI recipe: `create-vite`
- Add "@tauri-apps/api": `Y`
- ViteJS template: `vue-ts`
2) Enter the directory:
```bash
cd SheetJSTauri
```
Open `package.json` with a text editor and add the highlighted lines:
```json title="package.json"
{
"name": "SheetJSTauri",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vue-tsc --noEmit && vite build",
"preview": "vite preview",
"tauri": "tauri"
},
"dependencies": {
// highlight-next-line
"@tauri-apps/api": "^1.0.2",
"vue": "^3.2.37",
// highlight-next-line
"xlsx": "https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz"
},
"devDependencies": {
// highlight-next-line
"@tauri-apps/cli": "^1.0.5",
"@vitejs/plugin-vue": "^3.0.3",
"typescript": "^4.6.4",
"vite": "^3.0.7",
"vue-tsc": "^0.39.5"
}
}
```
3) Install dependencies:
```bash
npm install --save https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz
```
4) Enable operations by adding the highlighted lines to `tauri.conf.json`:
```json title="src-tauri/tauri.conf.json"
"tauri": {
"allowlist": {
// highlight-start
"http": {
"all": true,
"request": true,
"scope": ["https://**"]
},
"dialog": {
"all": true
},
// highlight-end
"all": true
}
```
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": "",
```
5) Download [`App.vue`](pathname:///tauri/App.vue) and replace `src/App.vue`
with the downloaded script.
6) Build the app with
```bash
npm run tauri build
```
At the end, it will print the path to the generated program. Run the program!
</details>
### Reading Files
There are two steps to reading files: obtaining a path and reading binary data:
@ -202,6 +110,7 @@ async function saveFile(wb) {
title: "Save to Spreadsheet",
filters
});
if(!selected) return;
/* Generate workbook */
const bookType = selected.slice(selected.lastIndexOf(".") + 1);
@ -211,3 +120,77 @@ async function saveFile(wb) {
await writeBinaryFile(selected, d);
}
```
## Complete Example
This demo was tested against Tauri `v1.2.3` on 2023 January 21.
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!

@ -18,7 +18,7 @@ include the raw data without referencing the underlying spreadsheet files.
:::note
This was tested against `lume v1.14.2` on 2022 December 27.
This was tested against `lume v1.14.2` on 2023 January 20.
This example uses the Nunjucks template format. Lume plugins support additional
template formats, including Markdown and JSX.

@ -409,7 +409,7 @@ export default defineNuxtConfig({
Restart the dev server by exiting the process (Control+C) and running:
```bash
rm -rf .nuxt/content-cache ## forcefully clear cache
npx nuxi clean
npx yarn run dev
```
@ -454,7 +454,7 @@ const {data} = await useAsyncData('s5s', () => queryContent('/pres').findOne());
Restart the dev server by exiting the process (Control+C) and running:
```bash
rm -rf .nuxt/content-cache ## forcefully clear cache
npx nuxi clean
npx yarn run dev
```

@ -111,7 +111,7 @@ const config = {
//},
{
label: 'Discord',
href: 'https://discord.gg/nSaX8XTRVA',
href: 'https://discord.gg/sheetjs',
},
{
label: 'Twitter',

@ -58,6 +58,7 @@ try {
title: "Save to Spreadsheet",
filters
});
if(!selected) throw new Error("No file selected");
const ws = utils.aoa_to_sheet(data.value);
const wb = utils.book_new();
utils.book_append_sheet(wb, ws, "SheetJSTauri");

BIN
docz/static/tauri/linux.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 324 KiB