JS - 使用 FileSaver.js 实现浏览器文件导出

2017-09-28 发布：hangge 阅读：27885

有时我们需要在浏览器上生成文件并保存到本地，这个借助 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 文件引入即可。

<script src="path/FileSaver.js"/>

二、使用说明

1，保存文本文件

（1）下面代码在浏览器打开后会自动生成文件并导出：

<!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）下面是另一种写法，实现的效果和上面的是一样的。

var file = new File(["欢迎访问 hangge.com"], "文件导出测试.txt", {type: "text/plain;charset=utf-8"});
saveAs(file);

2，保存图片

（1）下面代码会在页面上的 Canvas 中绘制一个矩形，并将其自动导出成图片：

<!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）访问页面后可以看到浏览器会自动下载文件。

5楼

2018-10-09 17:30

知返94

请问按照代码操作为什么没有自动保存

站长回复：
我测试了下是没问题的啊，不太清楚你那边什么情况。
4楼

2018-09-27 16:01

5120162126

请问怎么在保存JSON文件的同时设置存储路径？

站长回复：
保存路径不是由我们决定的，而是由用户自行决定或者下载工具决定的。
3楼

2018-09-25 15:36

5120162126

请问如何设置该下载的文件保存到指定的文件夹路径内

站长回复：
这个没办法设置。保存目录只能根据浏览器设置，或者是用户指定的文件夹。
2楼

2018-09-05 10:28

pdf

请问如何导出PDF

站长回复：
你可以试试 jsPDF 这个插件库。
1楼

2018-01-16 22:41

dt

请问如何保存样式

站长回复：
文本文件没有样式啊。