html5 写入文件内容,Chrome浏览器支持直接读写本地文件了

本文首发于公众号：符合预期的CoyPan

写在前面

最新版的Chrome(Chrome 83, 需要开启权限)支持直接读写本地文件了。

开启方法：Chrome浏览器升级到83版本以上；访问chrome://flags/，开启 Native File System API 选项

当前如何读写本地文件

目前最常见的读取本地文件方法：

1、使用input标签获取文件File对象。

2、使用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 =