家明故事

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

家明 0 0

有时我们需要在浏览器上生成文件并保存到本地,这个借助 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(["欢迎访问 iamingstory.com"], {type: "text/plain;charset=utf-8"});
      saveAs(blob, "文件导出测试.txt");
    </script>
  </head>
  <body>
  </body>
</html>

(2)可以看到浏览器会自动下载文件。同时打开文件发现内容也是正确的。

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

(3)下面是另一种写法,实现的效果和上面的是一样的。

var file = new File(["欢迎访问 iamingstory.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, "jiamingstory.png");
        });
      }
    </script>
  </head>
  <body onload=onload()">
    <canvas id="myCanvas" width="400" height="200">
  </body>
</html>

(2)访问页面后可以看到浏览器会自动下载文件。


标签:FileSaver.js  FileSaver  

打赏

发表评论