最近我同学找到我让我给她看一下她们的项目需求，表格数据导出到 Excel ，实现批量下载，下载的还是压缩包要求是 zip 格式的。你还别说真不太会。正好休息我们来学一学。
一、最简单的 a 标签下载
其中：
- href: 表示下载文件的绝对/相对地址
- download: 文件名（可省略，省略后浏览器自动识别源文件名）
<a href="./1.gif" download="动图1">下载动图</a>
二、FileSaver.js
FileSaver.js GitHub项目地址是：https://github.com/eligrey/FileSaver.js/
压缩和未压缩的JS文件也是在dist目录下，大家自行下载。其中 npm 社区上也有。
FileSaver 的下载方式完全是前端(Client-Side)的下载方式，它是基于 Blob （binary large object）/url/file 进行下载的，但是会限制 Blob 数据的大小不能过大。依据浏览器不同基本都可达到 500MB+，如果文件超出这个范围，官网给出了替代方案 StreamSaver。
filesaver.js 支持Blob、File和Url进行下载，常用的也就是 blob ，因为如果使用 url ，想想也没必要用 FileSaver 了，<a> 标签的 download 是最简单的，然后关于 File 没人下载保存个文件夹吧，一般是一个压缩包，下面我们会使用 jszip 实现。我们主要用它的 blob 。关于 blob 是啥？请参考：
理解DOMString、Document、FormData、Blob、File、ArrayBuffer数据类型 « 张鑫旭-鑫空间-鑫生活
简单来理解 blob 就是 二进制（大对象）。Blob 可以实现几乎任意文件的二进制传输，但是主要是图片二进制形式的上传与下载。
创建Blob对象可以调用Blob构造函数（常用），还可以使用一个已有 Blob 对象上的
slice() 方法切出另一个Blob对象，还可以调用 canvas 对象上的 toBlob 方法（常用）。
下面来看 filesaver.js 使用示例：
- 数据写入进行下载：
<script src = "./jszip.min.js"></script>
<script src = "./FileSaver.min.js"></script>
<script>
let txt = "Hello, world!";
let blob = new Blob([txt], {type: "text/plain;charset=utf-8"});
saveAs(blob, "hello world.txt");
</script>
- canvas 图片 blob 下载示例
var canvas = document.getElementById("zxx-canvas");
canvas.toBlob(function(blob) {
saveAs(blob, "example.png");
});
三、js 生成 PDF 下载
jsPDF 是一个基于 HTML5 的客户端解决方案,用于生成各种用途的 PDF 文档。
官网：https://parall.ax/products/jspdf
采坑指南：
jsPDF使用技巧 - - SegmentFault 思否 https://segmentfault.com/a/1190000017175481?utm_source=tag-newest
一个示例：
//默认导出为a4纸，纵向，以毫米为单位
var doc = new jsPDF();
doc.text('Hello world!', 100, 10);
doc.save('a4.pdf');
四、js 生成二维码（扫描二维码下载）
官网下载：https://github.com/davidshimjs/qrcodejs
对应的 npm 社区的 qrcodejs2
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="qrcode"></div>
<script src="./qrcode.min.js"></script>
<script>
var qrcode = new QRCode(document.getElementById("qrcode"), {
text: "这里可以放链接，也可以放文字。",
width: 128,
height: 128,
colorDark : "#ffffff",//表现为二维码之间的空隙，前景色
colorLight : "#000000",//表现为二维码块的颜色，背景色
correctLevel : QRCode.CorrectLevel.H//容错级别
});
</script>
</body>
</html>
生成二维码：
其中 correctLevel 容错级别有：
QRCode.CorrectLevel.L
QRCode.CorrectLevel.M
QRCode.CorrectLevel.Q
QRCode.CorrectLevel.H
我们强烈建议采用30%的容错率（对目前主流手机，在绝大多数扫描场景下，容错率越高，越容易被快速扫描!!!）二维码包含的信息太长，导致二维码识别度太低扫不出来，建议文本二维码的文字数量不超过150字（低端手机也能扫描），如果文字过多导致生成的二维码过密，可以调低容错率。
其他 API：
qrcode.clear(); // clear the code.清除二维码
qrcode.makeCode("http://naver.com"); // make another code.设置二维码内容
五、js-zip打包下载
js-zip 压缩下载依赖于 filesaver。所以我们得引入两个包，一个用来压缩，一个用来打包。
<script src="jszip/jszip.min.js"></script>
<script src="jszip/FileSaver.js"></script>><!--用于文件下载-->
12
看一个例子，下载一个文本压缩包：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src = "./jszip.min.js"></script>
<script src = "./FileSaver.min.js"></script>
<script>
//•创建一个JSZip实例：
var zip = new JSZip();
//•使用.file(fileName,fileContent)添加一个txt文件
zip.file("Hello.txt", "Hello World\n");
//type:"blob" 压缩的结果为二进制流,可用作文件上传
zip.generateAsync({type:"blob"})
.then(function(content) {
//saveAs(content, "example.zip"); 直接在浏览器打成example.zip包并下载，saveAs依赖的js是FileSaver.js
saveAs(content, "example.zip");
});
</script>
</body>
</html>
这时我们会下载一个example.zip 的压缩包，压缩包里面有个文件就叫 hello.txt，文件内容为：Hello World。
如果你不想使用 Filesaver.js 来保存文件，毕竟需要多引入一个文件，可以使用 a 标签来确定：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src = "./jszip.min.js"></script>
<script>
//•创建一个JSZip实例：
var zip = new JSZip();
//•使用.file(fileName,fileContent)添加一个txt文件
zip.file("Hello.txt", "Hello World\n");
//type:"blob" 压缩的结果为二进制流,可用作文件上传
zip.generateAsync({type:"blob"})
.then(function(content) {
// 创建隐藏的可下载链接
var eleLink = document.createElement('a');
eleLink.download = 'example.zip';
eleLink.style.display = 'none';
// 下载内容转变成blob地址
eleLink.href = URL.createObjectURL(content);
// 触发点击
document.body.appendChild(eleLink);
eleLink.click();
// 然后移除
document.body.removeChild(eleLink);
});
</script>
</body>
</html>
除了可以下载文本文件，我们还可以创建一个文件夹，文件夹里面可以放进的东西是 base64 或 blob 数据。也就是除了图片常见的 Excel，word 等等都可以压缩。
//•使用.folder(folderName)添加一个文件夹
var img = zip.folder("images");
// •使用.file(fileName,fileContent,base64FLag)在文件夹下添加一个图片文件
//fileContent可以是File文件也可以是Blob二进制数据
img.file("smile.gif", imgData, {base64: true});
网友评论