纯前端实现下载

最近我同学找到我让我给她看一下她们的项目需求，表格数据导出到 Excel ，实现批量下载，下载的还是压缩包要求是 zip 格式的。你还别说真不太会。正好休息我们来学一学。

一、最简单的 a 标签下载

其中：

href: 表示下载文件的绝对/相对地址
download: 文件名（可省略，省略后浏览器自动识别源文件名）

下载动图

二、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 了，标签的 download 是最简单的，然后关于 File 没人下载保存个文件夹吧，一般是一个压缩包，下面我们会使用 jszip 实现。我们主要用它的 blob 。关于 blob 是啥？请参考：
理解DOMString、Document、FormData、Blob、File、ArrayBuffer数据类型 « 张鑫旭-鑫空间-鑫生活

简单来理解 blob 就是二进制（大对象）。Blob 可以实现几乎任意文件的二进制传输，但是主要是图片二进制形式的上传与下载。

创建Blob对象可以调用Blob构造函数（常用），还可以使用一个已有 Blob 对象上的
slice() 方法切出另一个Blob对象，还可以调用 canvas 对象上的 toBlob 方法（常用）。

下面来看 filesaver.js 使用示例：

数据写入进行下载：

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
示例：




    
    Document

生成二维码：

其中 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。所以我们得引入两个包，一个用来压缩，一个用来打包。

 
 >
12

看一个例子，下载一个文本压缩包：




    
    Document

这时我们会下载一个example.zip 的压缩包，压缩包里面有个文件就叫 hello.txt，文件内容为：Hello World。

如果你不想使用 Filesaver.js 来保存文件，毕竟需要多引入一个文件，可以使用 a 标签来确定：




    
    Document

除了可以下载文本文件，我们还可以创建一个文件夹，文件夹里面可以放进的东西是 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});