1. ホーム /
  2. プログラミング /
  3. 【JavaScript】ファイルの保存先をダイアログで指定する方法 - showSaveFilePicker()の使い方
  • 2023.04.30

【JavaScript】ファイルの保存先をダイアログで指定する方法 – showSaveFilePicker()の使い方

概要

JavaScriptでは、downloadフォルダにファイルをダウンロードする以外にダイアログで保存先を指定することが可能です。今回はshowSaveFilePicker()メソッドで保存先を指定する方法を紹介します。

showSaveFilePicker()メソッドを使用すると、ファイル選択ダイアログを表示してユーザーが保存するファイルを選択できるようにすることができます。createWritable()メソッドを使用すると、選択したファイルにデータを書き込むことができます。

前提条件

showSaveFilePicker()メソッドは、ブラウザのセキュリティ機能によってアクセス制限されています。

ローカル上もしくはHTTPSプロトコルでアクセスする必要があり、ブラウザ上でユーザーの明示的な操作が必要です。
つまり、直近でボタンクリックなどの何らかの操作をしている必要があります。

また、showSaveFilePicker()メソッドをサポートしているブラウザは限られています。
現在(2023/04/30)の時点で互換性のあるブラウザは下記になります。

  • Chrome (Android除く)
  • Edge
  • Opera (Android除く)

サンプルコード

<!DOCTYPE html>
<html>
<head>
	<title>showSaveFilePicker Example</title>
</head>
<body>
	<button onclick="saveFile()">Save File</button>

	<script>
		// 保存処理
		async function saveFile() {
            try {
                // showSaveFilePickerがブラウザでサポートされているかどうかを確認する
				if ('showSaveFilePicker' in window) {
                    // ユーザーがファイルにアクセスできるかどうかを確認する
					if (navigator.userActivation.isActive) {
						const filename = 'test.txt';
						const content = 'Hello World!';
                        const options = await getOptions(filename, 'text');
                        const handle = await window.showSaveFilePicker(options);
                        const writable = await handle.createWritable();
                        await writable.write(content);
						await writable.close();
						console.log('ファイルが正常に保存されました');
					} else {
                        throw new Error('navigator.userActivationが有効状態になっていません');
                    }
                } else {
                    throw new Error('showSaveFilePickerがサポートされていません');
                }
			} catch (error) {
				// 保存失敗
                console.error(error);
                alert(error);
            }
		}

		// オプション取得
		function getOptions(filename, type) {
			switch (type) {
                case 'text': return { suggestedName: filename, types: [{ accept: { 'text/plain': ['.txt'] } }] }
				default: break;
			}
            return { suggestedName: filename };
		}
	</script>
</body>
</html>

コード解説

「’showSaveFilePicker’ in window」では、showSaveFilePicker()メソッドがブラウザに対応しているかを確認しています。

「navigator.userActivation.isActive」では、ブラウザがshowSaveFilePicker()メソッドを実行するのに十分な状態であるかを確認しています。サンプルコードではボタンクリックから行っているため問題ありませんが、ページを読み込んだ直後に実行するなどした場合はfalseが返されます。
もし、isActiveがfalseのときにshowSaveFilePicker()メソッドが実行されてしまった場合は、ダイアログが出ずに下記のエラーが発生します。

DOMException: Failed to execute 'showSaveFilePicker' on 'Window': Must be handling a user gesture to show a file picker.

「getOptions(filename, ‘text’);」では、showSaveFilePicker()メソッドで表示するダイアログの設定を取得しています。optionsは必須ではありませんが、指定することでダイアログ上での操作がスムーズになります。
optionsで指定できるパラメータは様々ですが、サンプルで使用しているパラメータは下記になります。

  • suggestedName = 保存するファイル名を設定できます
  • types [ accept ] = MIMEタイプを指定することでダイアログで選択可能な拡張子を絞ることができます(デフォルトは全てのファイル)

「window.showSaveFilePicker(options);」では、保存先選択のダイアログを出しています。キャンセルされた場合は例外発生となります。

「writable.write(content);」では、指定した保存先にファイルを保存しています。引数に指定する値は.txtである必要はなく、バイナリデータを指定することも可能です。

   

コメントを残す


CAPTCHA