Zenn
🐱

Tauri 2.0でローカルファイルを読み込んでみる(plugin-fs)

2024/11/20に公開
Rust
JavaScript
file
Tauri
tech

下記、「ファイルを開く」ダイアログ(plugin-dialog)を利用してみる記事の続き的な内容になります。
折角、上記でローカルファイルのファイルパスを取得できたので、そのローカルファイルを読み込んでみたいと思います。

https://zenn.dev/playree/articles/5e2f1386dde48f

下記tauri-plugin-fsを利用します。

https://github.com/tauri-apps/tauri-plugin-fs

プラグインの追加

フロントとRust側の両方に追加を行います。

> yarn add @tauri-apps/plugin-fs
> cd src-tauri
> cargo add tauri-plugin-fs

プラグインの登録

Tauriにプラグインとして登録を行います。

src-tauri/src/lib.rs
#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {
    tauri::Builder::default()
        .plugin(tauri_plugin_shell::init())
        .plugin(tauri_plugin_dialog::init())
        .plugin(tauri_plugin_fs::init()) //★追加
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

パーミッションの追加

今回はファイルシステムプラグインのreadTextFileを利用するので、そのパーミッションを追加します。

下記のようにfs:allow-read-text-fileを追加します。
※ここは利用するAPIによって変わってきます。

src-tauri/capabilities/default.json
{
  "permissions": [
    "core:default",
    "shell:allow-open",
    "dialog:allow-open",
    "fs:allow-read-text-file",
  ]
}

フロント側の実装

あとはフロント側にローカルファイルを読み込む実装をするだけです。
「ファイルを開く」ダイアログで取得したファイルパスのローカルファイルを読み込んでみます。

import { open } from '@tauri-apps/plugin-dialog'
import { BaseDirectory, readTextFile } from '@tauri-apps/plugin-fs'

const selected = await open({
  multiple: false,
  filters: [
    {
      name: 'Text',
      extensions: ['txt'],
    },
    {
      name: 'All',
      extensions: ['*'],
    },
  ],
})
console.log(selected)

// ファイルの読み込み処理を追加
const text = await readTextFile(selected, { baseDir: BaseDirectory.AppConfig })
console.log(text)

これだけでローカルファイルが読み込めます！
フロント側のコーディングだけで選択したファイルを読み込めるので、簡単ですね。

Markdown Viewer開発中

このように Tauri 2.0 をお試ししつつ、せっかくなのでMarkdown Viewerを開発してみています。
ソースサンプルにでもなるかもなので、一応紹介しておきます(笑)

https://github.com/playree/markdv

Discussion