JS - 使用 FileSaver.js 实现浏览器文件导出
有时我们需要在浏览器上生成文件并保存到本地,这个借助 FileSaver.js 就可以很方便地实现。
(2)可以看到浏览器会自动下载文件。同时打开文件发现内容也是正确的。

(2)访问页面后可以看到浏览器会自动下载文件。
一、基本介绍
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)访问页面后可以看到浏览器会自动下载文件。

请问按照代码操作为什么没有自动保存
请问怎么在保存JSON文件的同时设置存储路径?
请问如何设置该下载的文件保存到指定的文件夹路径内
请问如何导出PDF
请问如何保存样式