docs.sheetjs.com/docz/docs/03-demos/03-desktop/04-tauri.md
2023-01-05 18:33:49 -05:00

4.7 KiB

title pagination_prev pagination_next sidebar_position sidebar_custom_props
Tauri demos/mobile/index demos/grid 4
summary
Webview + Rust Backend

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:

SheetJS Tauri MacOS screenshot

Complete Example (click to show)
  1. Read Tauri "Getting Started" guide and install dependencies.

  2. 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
  1. 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"
  }
}
  1. Install dependencies:
npm install --save https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz
  1. 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": "",
  1. Download App.vue and replace src/App.vue with the downloaded script.

  2. 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);
}