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

家明 2023-03-29 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

本文地址：https://jiamingstory.com/frontend/141.html

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

觉得文章有用就打赏一下