js怎么实现导出html文件,JS - 使用 FileSaver.js 实现浏览器文件导出

有时我们需要在浏览器上生成文件并保存到本地，这个借助 FileSaver.js 就可以很方便地实现。

一、基本介绍

1，FileSaver.js 功能特点

FileSaver.js是一款基于 HTML5完成文件保存的插件，它可以帮我们直接从网页中导出多种格式文件。

同时对于那些本身不支持 HTML5 W3C saveAs() FileSaver接口的浏览器，FileSaver.js 也提供了支持。

使用FileSaver.js 可以让Web应用完美的生成文件，或者保存那些不应该发送到外部服务器的敏感信息。是一种简单易用的浏览器端文件保存方案。

2，浏览器支持情况

Browser

Constructs as

Filenames

Max Blob Size

Dependencies

Firefox 20+

Blob

Yes

800 MiB

None

Firefox < 20

data: URI

No

n/a

Chrome

Blob

Yes

None

Chrome for Android

Blob

Yes

None

Edge

Blob

Yes

?

None

IE 10+

Blob

Yes

600 MiB

None

Opera 15+

Blob

Yes

500 MiB

None

Opera < 15

data: URI

No

n/a

Safari 6.1+*

Blob

No

?

None

Safari < 6

data: URI

No

n/a

Safari 10.1+

Blob

Yes

n/a

None

3，安装配置

(1)首先到其 GitHub主页上将插件下载到本地。

(2)然后在需要使用的页面中将 JavaScript文件引入即可。

二、使用说明

1，保存文本文件

(1)下面代码在浏览器打开后会自动生成文件并导出：

var blob = new Blob(["欢迎访问 hangge.com"], {type: "text/plain;charset=utf-8"});

saveAs(blob, "文件导出测试.txt");

(2)可以看到浏览器会自动下载文件。同时打开文件发现内容也是正确的。

 

(3)下面是另一种写法，实现的效果和上面的是一样的。

var file = new File(["欢迎访问 hangge.com"], "文件导出测试.txt", {type: "text/plain;charset=utf-8"});

saveAs(file);

2，保存图片

(1)下面代码会在页面上的 Canvas中绘制一个矩形，并将其自动导出成图片：

function onload() {

//在canvas上绘制矩形

var canvas = document.getElementById("myCanvas");

var context = canvas.getContext("2d");

context.fillStyle = "blue"; //填充颜色

context.fillRect(50,50,200,100); 绘制实心矩形

//将canvas内容保存为文件并下载

canvas.toBlob(function(blob) {

saveAs(blob, "hangge.png");

});

}

(2)访问页面后可以看到浏览器会自动下载文件。