使用FileSave.js将网页内容保存到文件

来源:http://www.chinese-glasses.com 作者:Web前端 人气:135 发布时间:2020-05-06
摘要:在写Chromeextension时候,偶尔需要将网页的内容保存到文件。要实现此功能,正常的流程是创建Blob对象存放内容,创建url,创建一个a 标签,然后将连接与Blob对象关联并放到a标签的href或

在写Chrome extension时候,偶尔需要将网页的内容保存到文件。要实现此功能,正常的流程是创建Blob对象存放内容,创建url,创建一个 a 标签,然后将连接与Blob对象关联并放到 a标签的href或者download(H5)属性中。具体参照Stack Overflow方案。然而,有人已经将保存文件的功能封装好了,可以很方便的保存各种类型的文件。地址:。

返回的实例具有以下3个属性:

时间: 2019-09-12阅读: 384标签: 文件

let fileText = reader.result;fileText.replace(/s/g, "");saveFile(fileText)
pa href="javascript:window.saveAs(new Blob([document.getElementById('txt').value]), '文件.txt')"点击保存文本框中的内容到文件/abrtextarea spellcheck="false"文本框中的内容/textarea/p

结合HTML5读取文本文件功能,我们还可以实现对文本文件的编辑功能,比如JSON文件压缩,实际上就是拿到文本内容后,对内容过滤空字符:

下面是一个保存文本文件的例子,代码:

FileReader.readAsText()FileReader.readAsDataURL()FileReader.readAsArrayBuffer()FileReader.abort()

点击保存文本框中的内容到文件

FileReader实例具有以下4个方法:

完整的示例代码地址:-file-operations演示地址:-x.com/htm5-file-operations/前端路上原创技术文章,转载请注明出处:-x.com/2018/09/03/HTML5实现文件读取、编辑、保存/

let myBlob = new Blob(['{"hello":"world"}'], { type: "application/json" }); //Blob对象

有了createObjectURL和Blob,实际上,我们就可以封装一个方法,将任意字符串保存成文件,并点击链接下载:

let DownloadDom = document.getElementById("Download"); // a标签DownloadDom.href = window.URL.createObjectURL(myBlob); // 生成下载链接

使用FileReader读取文件的整个流程就是这样,File对象我们可以通过input type="file" 获取。

同时FileReader实例具有以下6个事件:

其中result属性是文件读取成功后的读取结果,数据的格式取决于使用哪个方法来启动读取操作。

时间: 2018-10-06阅读: 704标签: 文件HTML5读取文件

createObjectURL()方法的参数可以是File对象或者Blob对象,前端保存文件通常是希望将已有“内容”保存成文件,这种场景我们需要的是Blob对象。

保存文件的关键是生成文件对象,可以使用URL.createObjectURL()方法实现,该方法能返回给定对象的URL,用在a标签的href属性上就可以创建可下载的文件链接。

reader.readAsText(file); //读取文本文件

关于Blob构造函数的详细用法可以从这里了解。

本文由10bet发布于Web前端,转载请注明出处:使用FileSave.js将网页内容保存到文件

关键词:

最火资讯