FileSaver.js 實現了在自己不支持 HTML5 W3C saveAs() FileSaver 接口的瀏覽器支持文件保存。FileSaver.js 在客戶端保存文件的解決方案,而且可讓 Web 應用完美的生成文件, 或者保存不該該發送到外部服務器的一些敏感信息。是一種簡單易用實現的利用 JavaScript/JS 在瀏覽器端保存文件的方案。
實現瀏覽器端生成並保存文件的 JavaScript 庫 FileSaver.js 使用說明:html
1、引入 JavaScript 文件:git
複製
1
|
<
script
src
=
"path/FileSaver.js"
/>
|
2、例子:github
保存成文本文件canvas
複製
1
2
|
var
blob =
new
Blob([
"Hello, world!"
], {type:
"text/plain;charset=utf-8"
});
saveAs(blob,
"hello world.txt"
);
|
保存成圖片瀏覽器
複製
1
2
3
|
var
canvas = document.getElementById(
"my-canvas"
), ctx = canvas.getContext(
"2d"
);
// draw to canvas...canvas.toBlob(function(blob) {
saveAs(blob,
"pretty image.png"
);
});
|
支持的瀏覽器:服務器
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 |
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 |