有時我們需要在瀏覽器上生成文件並保存到本地，這個借助 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）訪問頁面后可以看到瀏覽器會自動下載文件。
