docs.sheetjs.com/docz/docs/03-demos/19-desktop/04-tauri.md

720 lines
19 KiB
Markdown
Raw Normal View History

2023-01-05 03:57:48 +00:00
---
2023-08-01 00:28:19 +00:00
title: Data Wrangling in Tauri Apps
2023-06-25 09:36:58 +00:00
sidebar_label: Tauri
description: Build data-intensive desktop apps using Tauri. Seamlessly integrate spreadsheets into your app using SheetJS. Modernize Excel-powered business processes with confidence.
2023-01-05 23:33:49 +00:00
pagination_prev: demos/mobile/index
2024-03-18 08:24:41 +00:00
pagination_next: demos/cli/index
2023-01-05 03:57:48 +00:00
sidebar_position: 4
sidebar_custom_props:
summary: Webview + Rust Backend
---
2023-04-27 09:12:19 +00:00
import current from '/version.js';
2023-01-05 03:57:48 +00:00
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
2023-04-27 09:12:19 +00:00
import CodeBlock from '@theme/CodeBlock';
2023-01-05 03:57:48 +00:00
export const y = {style: {color:"gold"}};
export const g = {style: {color:"green"}};
export const B = {style: {fontWeight:"bold"}};
2023-06-25 09:36:58 +00:00
[Tauri](https://tauri.app/) is a modern toolkit for building desktop apps. Tauri
apps leverage platform-native browser engines to build lightweight programs.
[SheetJS](https://sheetjs.com) is a JavaScript library for reading and writing
data from spreadsheets.
2023-01-05 03:57:48 +00:00
2023-06-25 09:36:58 +00:00
This demo uses Tauri and SheetJS to pull data from a spreadsheet and display the
data in the app. We'll explore how to load SheetJS in a Tauri app and exchange
file data between the JavaScript frontend and Rust backend.
The ["Complete Example"](#complete-example) section covers a complete desktop
app to read and write workbooks. The app will look like the screenshots below:
2023-01-05 03:57:48 +00:00
2023-01-21 10:50:57 +00:00
<table><thead><tr>
2023-12-02 08:39:35 +00:00
<th><a href="#complete-example">Windows</a></th>
2023-01-21 10:50:57 +00:00
<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-12-02 08:39:35 +00:00
![Windows screenshot](pathname:///tauri/win10.png)
2023-03-19 06:02:55 +00:00
</td><td>
2023-01-21 10:50:57 +00:00
![macOS screenshot](pathname:///tauri/macos.png)
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
![Linux screenshot](pathname:///tauri/linux.png)
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-06-25 09:36:58 +00:00
The [SheetJS NodeJS Module](/docs/getting-started/installation/nodejs) can be
installed and imported from JavaScript code.
:::note pass
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-06-25 09:36:58 +00:00
For security reasons, Tauri apps must explicitly enable system features.[^1]
They are enabled in `src-tauri/tauri.conf.json` in the `allowlist` subsection of
the `tauri` section of the config.
- The `fs` entitlement[^2] enables reading and writing file data.
```js title="src-tauri/tauri.conf.json"
"tauri": {
"allowlist": {
//highlight-start
"fs": {
"all": true
}
// highlight-end
```
- The `dialog` entitlement[^3] enables the open and save dialog methods.
```js title="src-tauri/tauri.conf.json"
"tauri": {
"allowlist": {
//highlight-start
"dialog": {
"all": true
}
// highlight-end
```
- The `http` entitlement[^4] enables downloading files. Note that `http` is not
needed for reading or writing files in the local filesystem.
2023-01-05 03:57:48 +00:00
```json title="src-tauri/tauri.conf.json"
2023-06-25 09:36:58 +00:00
"tauri": {
2023-01-05 03:57:48 +00:00
"allowlist": {
2023-06-25 09:36:58 +00:00
//highlight-start
2023-01-05 03:57:48 +00:00
"http": {
"all": true,
"request": true,
"scope": ["https://**"]
2023-01-21 10:50:57 +00:00
}
2023-06-25 09:36:58 +00:00
// highlight-end
2023-01-05 03:57:48 +00:00
```
### Reading Files
2023-06-25 09:36:58 +00:00
There are three steps to reading files:
1) Show an open file dialog to allow users to select a path. The `open` method
in `@tauri-apps/api/dialog`[^5] simplifies this process.
2) Read raw data from the selected file using the `readBinaryFile` method in
`@tauri-apps/api/fs`[^6]. This method resolves to a standard `Uint8Array`
3) Parse the data with the SheetJS `read` method[^7]. This method returns a
SheetJS workbook object.
The following code example defines a single function `openFile` that performs
all three steps and returns a SheetJS workbook object:
2023-01-05 03:57:48 +00:00
```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;
}
```
2023-06-25 09:36:58 +00:00
At this point, standard SheetJS utility functions[^8] can extract data from the
workbook object. The demo includes a button that calls `sheet_to_json`[^9] to
2024-03-25 04:13:01 +00:00
generate an array of arrays of data.
2023-06-25 09:36:58 +00:00
2024-03-25 04:13:01 +00:00
<Tabs groupId="framework">
<TabItem value="vuejs" label="VueJS">
The following snippet uses the VueJS framework:
```js title="VueJS sample"
2023-06-25 09:36:58 +00:00
import { utils } from 'xlsx';
import { shallowRef } from 'vue';
const data = shallowRef([[]]); // update data by setting `data.value`
const open_button_callback = async() => {
const wb = await openFile();
/* get the first worksheet */
// highlight-start
const ws = wb.Sheets[wb.SheetNames[0]];
// highlight-end
/* get data from the first worksheet */
// highlight-start
const array = utils.sheet_to_json(ws, { header: 1 });
// highlight-end
data.value = array;
};
```
2024-03-25 04:13:01 +00:00
</TabItem>
<TabItem value="kaioken" label="Kaioken" default>
The following snippet shows a simple Kaioponent:
```tsx title="Kaioponent for importing data"
import { utils } from 'xlsx';
import { useState } from 'kaioken';
function SheetJSImportKaioponent() {
const [data, setData] = useState<any[][]>([]);
const open_callback = async() => {
const wb = await openFile();
/* get the first worksheet */
// highlight-start
const ws = wb.Sheets[wb.SheetNames[0]];
// highlight-end
/* get data from the first worksheet */
// highlight-start
const array = utils.sheet_to_json(ws, { header: 1 });
// highlight-end
setData(array);
};
return ( <>
<button type="button" onclick={open_callback}>Load Data</button>
<table><tbody>{data.map((row) =>
<tr>{row.map((cell) => <td>{cell}</td>)}</tr>
)}</tbody></table>
</> );
2024-03-25 04:13:01 +00:00
}
```
</TabItem>
</Tabs>
2023-01-05 03:57:48 +00:00
### Writing Files
2023-06-25 09:36:58 +00:00
There are three steps to writing files:
1) Show a save file dialog to allow users to select a path. The `save` method
in `@tauri-apps/api/dialog`[^10] simplifies this process.
2) Write the data with the SheetJS `write` method[^11]. The output book type can
be inferred from the selected file path. Using the `buffer` output type[^12],
the method will return a `Uint8Array` object that plays nice with Tauri.
3) Write the data using `writeBinaryFile` in `@tauri-apps/api/fs`[^13].
The following code example defines a single function `saveFile` that performs
all three steps starting from a SheetJS workbook object:
2023-01-05 03:57:48 +00:00
```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
2023-06-25 09:36:58 +00:00
The demo includes a button that calls `aoa_to_sheet`[^14] to generate a sheet
from array of arrays of data. A workbook is constructed using `book_new` and
2024-03-25 04:13:01 +00:00
`book_append_sheet`[^15].
2023-06-25 09:36:58 +00:00
2024-03-25 04:13:01 +00:00
<Tabs groupId="framework">
<TabItem value="vuejs" label="VueJS">
The following snippet uses the VueJS framework:
```js title="VueJS sample"
2023-06-25 09:36:58 +00:00
import { utils } from 'xlsx';
import { shallowRef } from 'vue';
const data = shallowRef([[]]); // `data.value` is an array of arrays
const save_button_callback = async() => {
/* generate worksheet from the data */
// highlight-start
const ws = utils.aoa_to_sheet(data.value);
// highlight-end
/* create a new workbook object */
// highlight-start
const wb = utils.book_new();
// highlight-end
/* append the worksheet to the workbook using the sheet name "SheetJSTauri" */
// highlight-start
utils.book_append_sheet(wb, ws, "SheetJSTauri");
// highlight-end
await saveFile(wb);
}
```
2024-03-25 04:13:01 +00:00
</TabItem>
<TabItem value="kaioken" label="Kaioken" default>
The following snippet shows a simple Kaioponent:
```js title="Kaioponent for exporting data"
import { utils } from 'xlsx';
import { useState } from 'kaioken';
function SheetJSExportKaioponent() {
const [data, setData] = useState<any[][]>(["SheetJS".split(""), "Kaioken".split("")]);
const save_callback = async() => {
/* generate worksheet from the data */
// highlight-start
const ws = utils.aoa_to_sheet(data);
// highlight-end
/* create a new workbook object */
// highlight-start
const wb = utils.book_new();
// highlight-end
/* append the worksheet to the workbook using the sheet name "SheetJSTauri" */
// highlight-start
utils.book_append_sheet(wb, ws, "SheetJSTauri");
// highlight-end
await saveFile(wb);
}
return ( <button type="button" onclick={save_callback}>Save Data</button> );
}
```
</TabItem>
</Tabs>
2023-01-21 10:50:57 +00:00
## Complete Example
2023-12-02 08:39:35 +00:00
:::note Tested Deployments
2023-06-25 09:36:58 +00:00
This demo was tested in the following environments:
2023-02-12 08:15:17 +00:00
2024-03-16 16:04:18 +00:00
| OS and Version | Architecture | Tauri | Date |
|:---------------|:-------------|:----------|:-----------|
| macOS 14.4 | `darwin-x64` | `v1.5.11` | 2024-04-20 |
2024-05-28 05:20:05 +00:00
| macOS 14.5 | `darwin-arm` | `v1.5.14` | 2024-05-26 |
2024-03-25 04:13:01 +00:00
| Windows 10 | `win10-x64` | `v1.5.11` | 2024-03-24 |
2024-05-28 05:20:05 +00:00
| Windows 11 | `win11-arm` | `v1.5.14` | 2024-05-28 |
2024-03-22 04:45:40 +00:00
| Linux (HoloOS) | `linux-x64` | `v1.5.11` | 2024-03-21 |
2024-05-28 05:20:05 +00:00
| Linux (Debian) | `linux-arm` | `v1.5.14` | 2024-05-28 |
2023-02-12 08:15:17 +00:00
:::
2023-01-21 10:50:57 +00:00
2023-06-25 09:36:58 +00:00
0) Read Tauri "Getting Started" guide and install prerequisites.[^16]
<details>
<summary><b>Installation Notes</b> (click to show)</summary>
2023-06-25 09:36:58 +00:00
At a high level, the following software is required for building Tauri apps:
- a native platform-specific C/C++ compiler (for example, macOS requires Xcode)
- a browser engine integration (for example, linux requires `webkit2gtk`)
- [Rust](https://www.rust-lang.org/tools/install)
The platform configuration can be verified by running:
```bash
npx @tauri-apps/cli info
```
If required dependencies are installed, the output will show a checkmark next to
"Environment". The output from the most recent macOS test is shown below:
<pre>
<span {...g}>[✔]</span> <span style={{...y.style,...B.style}}>Environment</span>
{` `}<span {...g}>-</span> <span {...B}>OS</span>: Mac OS 14.4.1 X64
{` `}<span {...g}></span> <span {...B}>Xcode Command Line Tools</span>: installed
{` `}<span {...g}></span> <span {...B}>rustc</span>: 1.77.2 (25ef9e3d8 2024-04-09)
{` `}<span {...g}></span> <span {...B}>cargo</span>: 1.77.2 (e52e36006 2024-03-26)
{` `}<span {...g}></span> <span {...B}>rustup</span>: 1.27.0 (bbb9276d2 2024-03-08)
{` `}<span {...g}></span> <span {...B}>Rust toolchain</span>: stable-x86_64-apple-darwin (default)
{` `}<span {...g}>-</span> <span {...B}>node</span>: 20.12.1
{` `}<span {...g}>-</span> <span {...B}>npm</span>: 10.5.0
{` `}<span {...g}>-</span> <span {...B}>bun</span>: 1.1.4
</pre>
2023-06-25 09:36:58 +00:00
2023-06-29 21:07:52 +00:00
:::caution pass
When the demo was last tested on ARM64 macOS, the output mentioned `X64`. The
build step will correctly detect the platform architecture.
:::
2023-06-25 09:36:58 +00:00
</details>
2023-01-21 10:50:57 +00:00
1) Create a new Tauri app:
2024-03-25 04:13:01 +00:00
<Tabs groupId="framework">
<TabItem value="vuejs" label="VueJS">
2023-01-21 10:50:57 +00:00
```bash
2023-11-19 05:23:07 +00:00
npm create tauri-app@latest -- -m npm -t vue-ts SheetJSTauri -y
2023-01-21 10:50:57 +00:00
```
2024-03-25 04:13:01 +00:00
</TabItem>
<TabItem value="kaioken" label="Kaioken" default>
:::note pass
There is no official Tauri Kaioken template. This demo starts from the vanilla
TypeScript template and manually wires Kaioken
:::
```bash
npm create tauri-app@latest -- -m npm -t vanilla-ts SheetJSTauri -y
```
</TabItem>
</Tabs>
2023-01-21 10:50:57 +00:00
2) Enter the directory and install dependencies:
2023-04-27 09:12:19 +00:00
<CodeBlock language="bash">{`\
2023-01-21 10:50:57 +00:00
cd SheetJSTauri
2023-04-27 09:12:19 +00:00
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz
2023-01-21 10:50:57 +00:00
npm i --save @tauri-apps/api
2023-04-27 09:12:19 +00:00
npm i --save-dev @tauri-apps/cli`}
</CodeBlock>
2023-01-21 10:50:57 +00:00
2024-03-25 04:13:01 +00:00
<Tabs groupId="framework">
<TabItem value="vuejs" label="VueJS">
</TabItem>
<TabItem value="kaioken" label="Kaioken" default>
Install the Kaioken dependencies:
2024-03-25 04:13:01 +00:00
```bash
npm add kaioken --save
npm add vite-plugin-kaioken -D --save
```
</TabItem>
</Tabs>
2023-06-25 09:36:58 +00:00
3) Add the highlighted lines to `src-tauri/tauri.conf.json` in the
`tauri.allowlist` section:
2023-01-21 10:50:57 +00:00
2024-03-16 16:04:18 +00:00
```json title="src-tauri/tauri.conf.json (add highlighted lines)"
2023-01-21 10:50:57 +00:00
"tauri": {
"allowlist": {
// highlight-start
"http": {
"all": true,
"request": true,
"scope": ["https://**"]
},
"dialog": {
"all": true
},
"fs": {
"all": true
},
// highlight-end
```
2024-05-28 05:20:05 +00:00
In the same file, look for `"title"` and change the value to `SheetJS x Tauri`:
```json title="src-tauri/tauri.conf.json (edit highlighted line)"
{
// highlight-next-line
"title": "SheetJS x Tauri",
"width": 800,
```
In the same file, look for `"identifier"` and change the value to `com.sheetjs.tauri`:
2023-01-21 10:50:57 +00:00
2024-03-16 16:04:18 +00:00
```json title="src-tauri/tauri.conf.json (edit highlighted line)"
"targets": "all",
2023-01-21 10:50:57 +00:00
// highlight-next-line
"identifier": "com.sheetjs.tauri",
"icon": [
2023-01-21 10:50:57 +00:00
```
2024-03-25 04:13:01 +00:00
<Tabs groupId="framework">
<TabItem value="vuejs" label="VueJS">
2023-01-21 10:50:57 +00:00
4) Download [`App.vue`](pathname:///tauri/App.vue) and replace `src/App.vue`
with the downloaded script.
```bash
2023-08-01 00:28:19 +00:00
curl -o src/App.vue https://docs.sheetjs.com/tauri/App.vue
2023-01-21 10:50:57 +00:00
```
2024-03-25 04:13:01 +00:00
</TabItem>
<TabItem value="kaioken" label="Kaioken" default>
4) Wire up Kaioken to the Tauri app:
- Add the highlighted lines to `vite.config.ts`:
```ts title="vite.config.ts (add highlighted lines)"
import { defineConfig } from "vite";
// highlight-next-line
import kaioken from "vite-plugin-kaioken";
2024-03-25 04:13:01 +00:00
// https://vitejs.dev/config/
export default defineConfig(async () => ({
// highlight-start
plugins: [kaioken()],
// highlight-end
```
2024-06-19 11:22:00 +00:00
- Edit `tsconfig.json`. In `compilerOptions` add the option `"jsx": "preserve"`:
2024-03-25 04:13:01 +00:00
```js title="tsconfig.json (add highlighted line)"
{
"compilerOptions": {
// highlight-next-line
"jsx": "preserve",
```
- Replace `index.html` with the following codeblock:
```html title="index.html"
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="/src/styles.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>SheetJS x Tauri</title>
<script type="module" src="/src/main.ts" defer></script>
</head>
<body>
<div id="container" class="container"></div>
</body>
</html>
```
- Add the following lines to `src/styles.css`:
```css title="src/styles.css (add to end)"
.logo {
padding: 0px;
height: 64px; width: 64px;
vertical-align: middle;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.centre { text-align: center; }
table.center {
margin-left: auto;
margin-right: auto;
}
```
- Replace `src/main.ts` with the following codeblock:
```ts title="src/main.ts"
import { mount } from "kaioken";
import App from "./App";
const root = document.getElementById("container");
mount(App, root!);
```
- Download [`App.tsx`](pathname:///tauri/App.tsx) and save to `src/App.tsx`:
```bash
curl -o src/App.tsx https://docs.sheetjs.com/tauri/App.tsx
```
</TabItem>
</Tabs>
2023-01-21 10:50:57 +00:00
5) Build the app with
```bash
npm run tauri build
```
2023-10-02 04:57:11 +00:00
At the end, it will print the path to the generated installer.
2023-08-01 00:28:19 +00:00
:::info pass
2023-11-19 05:23:07 +00:00
If the build fails, see ["Troubleshooting"](#troubleshooting) for more details.
2023-08-01 00:28:19 +00:00
:::
2023-06-25 09:36:58 +00:00
2023-10-02 04:57:11 +00:00
6) Run the program.
2023-06-25 09:36:58 +00:00
2023-10-02 04:57:11 +00:00
<Tabs groupId="os">
<TabItem value="unix" label="Linux/MacOS">
2023-10-12 08:39:38 +00:00
Depending on the version of Tauri, the command may be
2023-10-02 04:57:11 +00:00
```bash
./src-tauri/target/release/SheetJSTauri
2023-10-12 08:39:38 +00:00
```
or
```bash
./src-tauri/target/release/sheet-js-tauri
2024-03-22 04:45:40 +00:00
```
or
```bash
./src-tauri/target/release/sheetjstauri
2023-10-02 04:57:11 +00:00
```
</TabItem>
<TabItem value="win" label="Windows">
```powershell
.\src-tauri\target\release\SheetJSTauri.exe
```
</TabItem>
</Tabs>
The following features should be manually verified:
2024-04-26 04:16:13 +00:00
- When it is loaded, the app will download https://docs.sheetjs.com/pres.numbers
2023-06-25 09:36:58 +00:00
and display the data in a table.
- Clicking "Save Data" will show a save dialog. After selecting a path and name,
the app will write a file. That file can be opened in a spreadsheet editor.
- Edit the file in a spreadsheet editor, then click "Load Data" and select the
edited file. The table will refresh with new contents.
2023-11-19 05:23:07 +00:00
#### Troubleshooting
:::note pass
2023-12-02 08:39:35 +00:00
During the last Linux ARM64 test, the build failed to create an AppImage:
```
Error [tauri-cli-node] failed to bundle project: error running appimage.sh
```
This is a known Tauri AppImage packaging bug. Since the actual application and
the `.deb` distributable are created, the error can be ignored.
:::
:::note pass
During the last Linux x64 test, the build failed with the error message:
2023-11-19 05:23:07 +00:00
```
'openssl/opensslv.h' file not found
```
2024-03-12 06:47:52 +00:00
OpenSSL must be installed. On Arch Linux and HoloOS (Steam Deck):
2023-11-19 05:23:07 +00:00
```bash
sudo pacman -S openssl
```
:::
:::note pass
In some macOS tests, the build failed with the following error message:
2023-11-19 05:23:07 +00:00
```
Error failed to bundle project: error running bundle_dmg.sh
```
The root cause of the error can be discovered by running
```bash
npm run tauri build -- --verbose
```
The most recent test failed with a message:
```
execution error: Not authorized to send Apple events to Finder
```
This error was resolved by allowing Terminal to control Finder.
In the "System Settings" app, select "Privacy & Security" in the left column and
select "Automation" in the body. Look for "Terminal", expand the section, and enable "Finder".
:::
2024-05-28 05:20:05 +00:00
:::note pass
In some tests, the fonts did not match the screenshots.
**The Inter font static TTFs must be manually downloaded and installed.**[^17]
:::
2023-06-25 09:36:58 +00:00
[^1]: See ["Security"](https://tauri.app/v1/references/architecture/security#allowing-api) in the Tauri documentation
[^2]: See [`FsAllowlistConfig`](https://tauri.app/v1/api/config/#fsallowlistconfig) in the Tauri documentation
[^3]: See [`DialogAllowlistConfig`](https://tauri.app/v1/api/config/#dialogallowlistconfig) in the Tauri documentation
[^4]: See [`HttpAllowlistConfig`](https://tauri.app/v1/api/config/#httpallowlistconfig) in the Tauri documentation
[^5]: See [`dialog`](https://tauri.app/v1/api/js/dialog/#open) in the Tauri documentation
[^6]: See [`fs`](https://tauri.app/v1/api/js/fs#readbinaryfile) in the Tauri documentation
[^7]: See [`read` in "Reading Files"](/docs/api/parse-options)
[^8]: See ["Utility Functions"](/docs/api/utilities/)
[^9]: See ["Array Output" in "Utility Functions"](/docs/api/utilities/array#array-output)
[^10]: See [`dialog`](https://tauri.app/v1/api/js/dialog/#save) in the Tauri documentation
[^11]: See [`write` in "Writing Files"](/docs/api/write-options)
[^12]: See ["Supported Output Formats"](/docs/api/write-options#supported-output-formats)
[^13]: See [`fs`](https://tauri.app/v1/api/js/fs#writebinaryfile) in the Tauri documentation
[^14]: See ["Array of Arrays Input" in "Utility Functions"](/docs/api/utilities/array#array-of-arrays-input)
[^15]: See ["Workbook Helpers" in "Utility Functions"](/docs/api/utilities/wb)
2024-05-28 05:20:05 +00:00
[^16]: See ["Prerequisites"](https://tauri.app/v1/guides/getting-started/prerequisites) in the Tauri documentation
[^17]: Click "Get font" in the [Inter Google Fonts listing](https://fonts.google.com/specimen/Inter)