纯前端实现下载

2019-11-03 本文已影响0人 CondorHero

最近我同学找到我让我给她看一下她们的项目需求，表格数据导出到 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});