h5实现下载（二）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 | Blob.js |
| Chrome | Blob | Yes | 500 MiB | None |
| Chrome for Android | Blob | Yes | 500 MiB | 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 | Blob.js |
| Safari 6.1+* | Blob | No | ? | None |
| Safari < 6 | data: URI | No | n/a | Blob.js |
| Safari 10.1+ | Blob | Yes | n/a | None |
3.安装配置
（1）首先到其 GitHub 主页上将插件下载到本地。
地址：https://github.com/eligrey/FileSaver.js
（2）然后在需要使用的页面中将 JavaScript 文件引入即可。
|
1
|
<script src="path/FileSaver.js"/> |
二、使用说明
1.保存文本文件
（1）下面代码在浏览器打开后会自动生成文件并导出：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="FileSaver.min.js" charset="utf-8"></script> <script type="text/javascript"> var blob = new Blob(["欢迎访问 hangge.com"], {type: "text/plain;charset=utf-8"}); saveAs(blob, "文件导出测试.txt"); </script> </head> <body> </body></html> |
（2）可以看到浏览器会自动下载文件。同时打开文件发现内容也是正确的。
（3）下面是另一种写法，实现的效果和上面的是一样的。
|
1
2
|
var file = new File(["欢迎访问 hangge.com"], "文件导出测试.txt", {type: "text/plain;charset=utf-8"});saveAs(file); |
2.保存图片
（1）下面代码会在页面上的 Canvas 中绘制一个矩形，并将其自动导出成图片：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="FileSaver.min.js" charset="utf-8"></script> <script type="text/javascript"> 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"); }); } </script> </head> <body onload="onload()"> <canvas id="myCanvas" width="400" height="200"> </body></html> |
（2）访问页面后可以看到浏览器会自动下载文件。
