File System Access API
#Javascript #React
JavascriptでWebページからディレクトリやファイルを選択する画面を表示してGUIでファイル入出力を行えるようにするAPI
参考：https://qiita.com/pentamania/items/ada07c45d4e5cc139c03
ファイル読み込み
code:js
const options = {
types: [
{
description: "Text Files",
accept: {
"text/plain": ".txt", ".text",
},
},
],
};
(async ()=> {
const handle = await window.showOpenFilePicker(options);
const file = await handle.getFile();
const text = await file.getText();
console.log(text); // 内容を出力
})();
ファイル書き込み
code:js
async function writeFile(fileHandle, contents) {
// writable作成
const writable = await fileHandle.createWritable();
// コンテンツを書き込む
await writable.write(contents);
// ファイル閉じる
await writable.close();
}
// メイン処理
const saveFileOptions = {
types: [
{
description: "Text Files",
accept: {
"text/plain": ".txt",
},
},
],
};
(async ()=> {
const textContent = "書き込みたい内容";
const handle = await window.showSaveFilePicker(saveFileOptions);
await writeFile(handle, textContent);
console.log('書き込み完了');
})();