tauriでファイルダウンロード機能を実装する

tauriでファイルダウンロード機能を実装したので備忘録を残しておく。

細かい解説は省略するし、割と急ぎ足でサクッと実装してしまったので不要な記述もあるかもしれない。
( tauri.conf.json 内のallowlistなどはあまり調べていない）

気が向いたら後日ちゃんと調べてなにかしら追記するかもしれない。

tauri.conf.jsonを修正する

src-tauri/tauri.conf.json 内に下記の記述を追加する。

--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -12,7 +12,16 @@
   },
   "tauri": {
     "allowlist": {
-      "all": true
+      "all": false,
+      "fs": {
+        "all": false,
+        "readFile": false,
+        "writeFile": true
+      },
+      "dialog": {
+        "all": false,
+        "save": true
+      }
     },
     "bundle": {
       "active": true,

画面側でファイルダウンロードに関する機能を実装する

これでフロント側で下記のようにファイルダウンロードに関する機能と、ダウンロードダイアログに関する機能が使えるようになるのでimportする。

import { save } from "@tauri-apps/api/dialog";
import { writeTextFile } from "@tauri-apps/api/fs";

下記は上でimportした関数を用いて、DBから取得したObjectの配列をCSVに変換後、ローカルPCにダウンロードするための関数。

  const exportAllNotesCsv = async () => {
    const notes: Array<Note> = await selectAll();
    const csvData = csvStringify(notes);
    const filename = "all-notes.csv";
    const path = await save({ defaultPath: filename });
    if (path) {
      await writeTextFile(path, csvData);
    }
  };

実際にこの機能は tauri を試すために作成したノートアプリで実装している。

実際の変更箇所は下記のコミットをご覧ください。

github.com