Chrome瀏覽器支持直接讀寫本地文件了

本文首發於公衆號：符合預期的CoyPan

寫在前面

最新版的Chrome（Chrome 83）支持直接讀寫本地文件了。

當前如何讀寫本地文件

目前最多見的讀取本地文件方法：

一、使用input標籤獲取文件File對象。

<input type="file" />
複製代碼

二、使用FileReader讀取文件。

var reader = new FileReader();
reader.onload = function (event) {
    // event.target.result就是讀取的內容
    ...
};
// 這裏的file爲File對象實例
reader.readAsText(file);
// reader.readAsDataURL(file);
// reader.readAsArrayBuffer(file);
複製代碼

寫文件方法：

很遺憾，如今沒有直接寫文件到本地的方法。不過，大概能夠用下面的方法來實現：

var textFileAsBlob = new Blob(['hello word'], {type:'text/plain'});
var downloadLink = document.createElement("a");
downloadLink.download = 'test.txt';
downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
downloadLink.click();
複製代碼

最新的Chrome瀏覽器下，如何讀寫文件

讀文件

使用window.chooseFileSystemEntries這個api。須要注意的是，調用這個api，必須由用戶的操做觸發，好比點擊等。

// 文件句柄
let fileHandle;
button.addEventListener('click', async (e) => {
  fileHandle = await window.chooseFileSystemEntries();
  console.log(fileHandle);
});
複製代碼

調用api後，會彈出文件窗口，用戶選擇文件後，就能夠拿到文件的句柄了。

接着，調用句柄的方法，就能夠拿到文件內容了。

let fileHandle;
button.addEventListener('click', async (e) => {
  fileHandle = await window.chooseFileSystemEntries();
  const file = await globalFileHandle.getFile();
  const contents = await file.text(); // 這裏的方法還有：slice(), stream(), arrayBuffer()
});
複製代碼

寫文件

寫文件，分紅兩種狀況，一種是直接寫入原文件，一種是寫入一個新文件。

寫入原文件，咱們只須要拿到原文件的句柄，調用句柄的方法就能夠了。

const writable = await fileHandle.createWritable();
  await writable.write('new content');
  await writable.close();
複製代碼

寫入新文件，首先須要新建一個文件，依然是調用window.chooseFileSystemEntries這個api，不過此次須要傳入一些參數。

button.addEventListener('click', async function() {
	const opts = {
      type: 'save-file',
      accepts: [{
          description: 'Text file',
          extensions: ['txt'],
          mimeTypes: ['text/plain'],
      }]
  };
  // 新建文件的句柄
  const fileHandle = await window.chooseFileSystemEntries(opts);
  ...             
});
複製代碼

接着，再按照前文的方法，寫入內容便可。

關於本地文件讀寫的更多信息，參考這篇文章：web.dev/native-file…

示例Demo

新的文件Api十分方便。我簡單寫了一個demo，在瀏覽器編輯本地文件。

Demo體驗地址和代碼在這裏（請使用最新版的桌面Chrome瀏覽器訪問，且開啓文件讀寫權限）：

coypan.info/demo/chrome…

寫在後面

Chrome這一波更新，你怎麼看？web app ？web os？