跳到主要内容

FileSaver 解决前端下载

联合作者

陈吟/李恒道

FileSaver.js 介绍​

FileSaver.js 是一个用于在客户端保存文件的解决方案，它适用于需要在本地生成文件的 web、app。

检测浏览器是否支持​

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

IE < 10​

对于 IE 版本 10 以下的浏览器，也是可以无需基于 Flash-based 的 polyfills 来保存文件。

请参阅 saveTextAs()

Safari 6.1+​

Blob 有时可能会被打开而不是保存，可能需要指导的 Safari 用户在打开文件后手动按 ⌘ + S 来保存文件。

使用 application/octet-stream 的 MIME 类型强制下载可能会导致出现问题。

请参阅 can cause issues in Safari

支持的浏览器​

浏览器构造方法指定文件名最大 Blob 大小依赖
Firefox 20+Blob支持800 MiB-
Firefox < 20data: URI不支持不适用Blob.js
ChromeBlob支持[2GB][3]-
Chrome for AndroidBlob支持[RAM/5][3]-
EdgeBlob支持未知-
IE 10+Blob支持600 MiB-
Opera 15+Blob支持500 MiB-
Opera < 15data: URI不支持不适用Blob.js
Safari 6.1+*Blob不支持未知-
Safari < 6data: URI不支持不适用Blob.js
Safari 10.1+Blob支持不适用-

使用例子​

提示

在同一来源的地址中将会只使用 a[download]。

除此之外，它将检查是否支持带有同步头请求的 cors 头。

  • 如果支持，那么它将下载数据并使用 blob URL 进行保存。
  • 如果不支持，那么它会尝试使用 a[download] 下载。

  • 保存文本

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

  • 保存图片

    saveAs("https://httpbin.org/image", "image.jpg");

  • 保存 Canvas

    var canvas = document.getElementById("my-canvas");
    canvas.toBlob(function (blob) {
      saveAs(blob, "pretty image.png");
    });
    注意

    并不是所有的浏览器都支持标准的 HTML5 的 canvas.toBlob() 方法。

    canvas-toBlob.js 是一个跨浏览器 的 canvas.toBlob() 支持依赖。

  • 保存文件

    你可以在不指定文件名的情况下保存 File 构造函数。

    如果文件本身已经包含名称，但你仍想更改名称，可以在第二个参数中更改它。

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

    IE 和 Edge 不支持新的文件构造函数，

    因此最好构造 blob 并使用 saveAs(blob, filename)