4.7 KiB
title | pagination_prev | pagination_next | sidebar_position | sidebar_custom_props | ||
---|---|---|---|---|---|---|
Tauri | demos/mobile/index | demos/grid | 4 |
|
import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem';
The NodeJS Module can be imported from JavaScript code.
This demo was tested against Tauri 1.0.5 on 2022 August 13.
:::note
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.
:::
http
and dialog
must be explicitly allowed in tauri.conf.json
:
"allowlist": {
"all": true,
"http": {
"all": true,
"request": true,
"scope": ["https://**"]
},
"dialog": {
"all": true
}
The "Complete Example" creates an app that looks like the screenshot:
Complete Example (click to show)
-
Read Tauri "Getting Started" guide and install dependencies.
-
Create a new Tauri app:
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
- Enter the directory:
cd SheetJSTauri
Open package.json
with a text editor and add the highlighted lines:
{
"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"
}
}
- Install dependencies:
npm install --save https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz
- Enable operations by adding the highlighted lines to
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
:
"icons/icon.ico"
],
// highlight-next-line
"identifier": "com.sheetjs.tauri",
"longDescription": "",
-
Download
App.vue
and replacesrc/App.vue
with the downloaded script. -
Build the app with
npm run tauri build
At the end, it will print the path to the generated program. Run the program!
Reading Files
There are two steps to reading files: obtaining a path and reading binary data:
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:
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
});
/* Generate workbook */
const bookType = selected.slice(selected.lastIndexOf(".") + 1);
const d = write(wb, {type: "buffer", bookType});
/* save data to file */
await writeBinaryFile(selected, d);
}