本文首發于公眾號：符合預期的CoyPan

寫在前面

最新版的Chrome(Chrome 83, 須要開啟權限)支持直接讀寫本地文件了。javascript

開啟方法：Chrome瀏覽器升級到83版本以上；訪問chrome://flags/，開啟 Native File System API 選項

當前如何讀寫本地文件

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

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

二、使用FileReader讀取文件。web

var reader = new FileReader();

reader.onload = function (event) {

// event.target.result就是讀取的內容

...

};

// 這里的file為File對象實例

reader.readAsText(file);

// reader.readAsDataURL(file);

// reader.readAsArrayBuffer(file);

寫文件方法：chrome

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

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，必須由用戶的操做觸發，好比點擊等。app

// 文件句柄

let fileHandle;

button.addEventListener('click', async (e) => {

fileHandle = await window.chooseFileSystemEntries();

console.log(fileHandle);

});

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

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

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);

...

});

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

示例Demo

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

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

寫在后面

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

總結

以上是生活随笔為你收集整理的chrome html 读写文件路径,Chrome浏览器支持直接读写本地文件了的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。