filesaver.js 怎么用

发布网友发布时间：2022-05-07 08:41

共2个回答

懂视网时间：2022-05-15 22:14

本篇文章主要介绍了js基于FileSaver.js 浏览器导出Excel文件的示例，具有一定的参考价值，有兴趣的可以了解一下

本文介绍了js基于FileSaver.js 浏览器导出Excel文件，分享给大家，也给自己做个笔记

限制一：不同浏览器对 blob 对象有不同的限制

具体看看下面这个表格（出自FileSaver.js）：

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

限制二：构建完 blob 对象后才会转换成文件

这一点限制对小文件(几十kb)可能没什么影响，但对稍微大一点的文件影响就很大了。试想，用户要下载一个 100mb 的文件，如果他点击了下载按钮之后没看到下载提示的话，他肯定会继续按，等他按了几次之后还没看到下载提示时，他就会抱怨我们的网站，然后离开了。

然而事实上下载的的确确发生了，只是要等到下载完文件之后才能构建 blob 对象，再转化成文件。而且，用户再触发多几次下载就会造成一些资源上的浪费。

因此，如果是要下载大文件的话，还是推荐直接创建一个 <a> 标签拉~
写 html 也好，写 JavaScript 动态创建也好，用自己喜欢的方式去创建就好了。

FileSaver.js

调用方法

热心网友时间：2022-05-15 19:22

1、用到两个文件Blob.js和FileSaver.js
2、代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8"/>
<title>js导出excel-ComingX</title>
</head>
<body>
<h1> </h1>
<a>
<p><strong>数据内容:</strong></p>
<textarea rows="6" id="content">
姓名,学号,成绩
王三,103020120,98
张四,103020218,80
李石磊,20085802024,100
JohnsonLee,123654,523
</textarea>
<p>
<strong>文件名</strong>: <input type="text" name="filename" id="filename" value="hello.csv" /> (.csv后缀)
</p>
<p style="color: #3300ff;"">1. 使用FileSaver.js保存</p><button id="saveBtn">保存Excel文件</button>

</a>

<script async="" src="Blob.js"></script>
<script async="" src="FileSaver.js"></script>
<script>
(function () {
document.getElementById("saveBtn").onclick = function (event) {
event.preventDefault();
var BB = self.Blob;
var contentStr = document.getElementById("content").value; //内容
var fileNmae=document.getElementById("filename").value; //文件名
saveAs(
new BB(
["\ufeff" + contentStr] //\ufeff防止utf8 bom防止中文乱码
, { type: "text/plain;charset=utf8" }
) , fileNmae);
};
})();
</script>

</body>
</html>