返回 导航

其他

hangge.com

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

作者：hangge | 2017-09-28 08:10
有时我们需要在浏览器上生成文件并保存到本地，这个借助 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 主页上将插件下载到本地。

（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）

回到顶部