FileSaver.js 介紹

這是著名開源項目 FileSaver.js 的 README.md，我把它翻譯成中文。發出來，方便自己和他人閱讀。
項目地址：https://github.com/eligrey/FileSaver.js

如果你需要保存較大的文件，不受 blob 的大小限制或內存限制，可以看一下更高級的 StreamSaver.js，
它使用強大的 stream API，可以將數據直接異步地保存到硬盤。支持進度、取消操作以及完成事件回調。

FileSaver.js

FileSaver.js 在沒有原生支持 saveAs() 的瀏覽器上實現了 saveAs() 接口。有一個 FileSaver.js 示例，演示如何保存各種媒體類型。

FileSaver.js 是在客戶端保存文件的解決方案，非常適合需要生成文件，或者保存不應該發送到外部服務器的敏感信息的 web App。

你還在尋找 canvas.toBlob() 來保存畫布？canvas-toBlob.js 可以跨瀏覽器實現這個功能。

支持的瀏覽器

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

支持特征檢測:

try { var isFileSaverSupported = !!new Blob; } catch (e) {}

IE < 10

可以在 IE < 10 的瀏覽器實現保存文本文件，而不需要基於 Flash 的 polyfill。
點擊 ChenWenBrian and koffsyrup's saveTextAs() 查看更多詳情。

Safari 6.1+

有時候 Blob（要保存的文件） 可能會被瀏覽器直接打開而不是保存，如果文件在瀏覽器上打開了，你需要指導 Safari 用戶手動按 ⌘ + S 保存文件。 使用 application/octet-stream MIME 類型強制下載在 Safari 會導致出現問題。

iOS

saveAs 必須在用戶交互事件（如 onTouchDown 或 onClick）中運行; setTimeout 會阻止 saveAs 觸發。 由於 iOS 的限制，saveAs 會打開新窗口而不是下載，
如果您想修復這個問題，請告訴蘋果這個 bug 是如何影響你的。

語法

FileSaver saveAs(Blob/File data, optional DOMString filename, optional Boolean disableAutoBOM)

如果不希望 FileSaver.js 自動提供 Unicode 文本編碼提示（參見：字節順序標記），請將 disableAutoBOM 參數設置為 true。

示例

使用 require 保存文本

var FileSaver = require('file-saver'); var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"}); FileSaver.saveAs(blob, "hello world.txt");

保存文本

var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"}); saveAs(blob, "hello world.txt");

標准 W3C 文件 API Blob 接口不兼容所有瀏覽器。
Blob.js 是一個跨瀏覽器的 Blob 實現，可以解決兼容性問題。

保存畫布（canvas）

var canvas = document.getElementById("my-canvas"), ctx = canvas.getContext("2d"); // draw to canvas... canvas.toBlob(function(blob) { saveAs(blob, "pretty image.png"); });

注意：標准的 HTML5 canvas.toBlob() 方法不兼容所有瀏覽器。
canvas-toBlob.js 是一個跨瀏覽器的實現 canvas.toBlob() 的 polyfill 方案。

保存文件

你可以保存一個文件結構，不需要指定文件名。文件自身已經包含了文件名，有一些方法來獲取文件實例（從 storage，file input，新的構造函數）
如果你想修改文件名，你可以在第二個參數設置文件名。

var file = new File(["Hello, world!"], "hello world.txt", {type: "text/plain;charset=utf-8"}); saveAs(file);

貢獻

FileSaver.js 的發布文件使用 Uglify.js 編譯生成，就像這樣：

uglifyjs FileSaver.js --mangle --comments /@source/ > FileSaver.min.js # or simply: npm run build

在提交請求之前，請確保已經生成了生產版本。

安裝

npm install file-saver --save
bower install file-saver

此外，如果要安裝 Typscript 聲明，可以這樣做：

npm install @types/file-saver --save-dev