最近我同學(xué)找到我讓我給她看一下她們的項(xiàng)目需求，表格數(shù)據(jù)導(dǎo)出到 Excel ，實(shí)現(xiàn)批量下載，下載的還是壓縮包要求是 zip 格式的。你還別說真不太會。正好休息我們來學(xué)一學(xué)。
一、最簡單的 a 標(biāo)簽下載
其中：
- href: 表示下載文件的絕對/相對地址
- download: 文件名（可省略，省略后瀏覽器自動識別源文件名）
<a href="./1.gif" download="動圖1">下載動圖</a>
二、FileSaver.js
FileSaver.js GitHub項(xiàng)目地址是：https://github.com/eligrey/FileSaver.js/
壓縮和未壓縮的JS文件也是在dist目錄下，大家自行下載。其中 npm 社區(qū)上也有。
FileSaver 的下載方式完全是前端(Client-Side)的下載方式，它是基于 Blob （binary large object）/url/file 進(jìn)行下載的，但是會限制 Blob 數(shù)據(jù)的大小不能過大。依據(jù)瀏覽器不同基本都可達(dá)到 500MB+，如果文件超出這個(gè)范圍，官網(wǎng)給出了替代方案 StreamSaver。
filesaver.js 支持Blob、File和Url進(jìn)行下載，常用的也就是 blob ，因?yàn)槿绻褂?url ，想想也沒必要用 FileSaver 了，<a> 標(biāo)簽的 download 是最簡單的，然后關(guān)于 File 沒人下載保存?zhèn)€文件夾吧，一般是一個(gè)壓縮包，下面我們會使用 jszip 實(shí)現(xiàn)。我們主要用它的 blob 。關(guān)于 blob 是啥？請參考：
理解DOMString、Document、FormData、Blob、File、ArrayBuffer數(shù)據(jù)類型 ? 張鑫旭-鑫空間-鑫生活
簡單來理解 blob 就是 二進(jìn)制（大對象）。Blob 可以實(shí)現(xiàn)幾乎任意文件的二進(jìn)制傳輸，但是主要是圖片二進(jìn)制形式的上傳與下載。
創(chuàng)建Blob對象可以調(diào)用Blob構(gòu)造函數(shù)（常用），還可以使用一個(gè)已有 Blob 對象上的
slice() 方法切出另一個(gè)Blob對象，還可以調(diào)用 canvas 對象上的 toBlob 方法（常用）。
下面來看 filesaver.js 使用示例：
- 數(shù)據(jù)寫入進(jìn)行下載：
<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 是一個(gè)基于 HTML5 的客戶端解決方案,用于生成各種用途的 PDF 文檔。
官網(wǎng)：https://parall.ax/products/jspdf
采坑指南：
jsPDF使用技巧 - - SegmentFault 思否 https://segmentfault.com/a/1190000017175481?utm_source=tag-newest
一個(gè)示例：
//默認(rèn)導(dǎo)出為a4紙，縱向，以毫米為單位
var doc = new jsPDF();
doc.text('Hello world!', 100, 10);
doc.save('a4.pdf');
四、js 生成二維碼（掃描二維碼下載）
官網(wǎng)下載：https://github.com/davidshimjs/qrcodejs
對應(yīng)的 npm 社區(qū)的 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",//表現(xiàn)為二維碼之間的空隙，前景色
colorLight : "#000000",//表現(xiàn)為二維碼塊的顏色，背景色
correctLevel : QRCode.CorrectLevel.H//容錯(cuò)級別
});
</script>
</body>
</html>
生成二維碼：
其中 correctLevel 容錯(cuò)級別有：
QRCode.CorrectLevel.L
QRCode.CorrectLevel.M
QRCode.CorrectLevel.Q
QRCode.CorrectLevel.H
我們強(qiáng)烈建議采用30%的容錯(cuò)率（對目前主流手機(jī)，在絕大多數(shù)掃描場景下，容錯(cuò)率越高，越容易被快速掃描!!!）二維碼包含的信息太長，導(dǎo)致二維碼識別度太低掃不出來，建議文本二維碼的文字?jǐn)?shù)量不超過150字（低端手機(jī)也能掃描），如果文字過多導(dǎo)致生成的二維碼過密，可以調(diào)低容錯(cuò)率。
其他 API：
qrcode.clear(); // clear the code.清除二維碼
qrcode.makeCode("http://naver.com"); // make another code.設(shè)置二維碼內(nèi)容
五、js-zip打包下載
js-zip 壓縮下載依賴于 filesaver。所以我們得引入兩個(gè)包，一個(gè)用來壓縮，一個(gè)用來打包。
<script src="jszip/jszip.min.js"></script>
<script src="jszip/FileSaver.js"></script>><!--用于文件下載-->
12
看一個(gè)例子，下載一個(gè)文本壓縮包：
<!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>
//?創(chuàng)建一個(gè)JSZip實(shí)例：
var zip = new JSZip();
//?使用.file(fileName,fileContent)添加一個(gè)txt文件
zip.file("Hello.txt", "Hello World\n");
//type:"blob" 壓縮的結(jié)果為二進(jìn)制流,可用作文件上傳
zip.generateAsync({type:"blob"})
.then(function(content) {
//saveAs(content, "example.zip"); 直接在瀏覽器打成example.zip包并下載，saveAs依賴的js是FileSaver.js
saveAs(content, "example.zip");
});
</script>
</body>
</html>
這時(shí)我們會下載一個(gè)example.zip 的壓縮包，壓縮包里面有個(gè)文件就叫 hello.txt，文件內(nèi)容為：Hello World。
如果你不想使用 Filesaver.js 來保存文件，畢竟需要多引入一個(gè)文件，可以使用 a 標(biāo)簽來確定：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src = "./jszip.min.js"></script>
<script>
//?創(chuàng)建一個(gè)JSZip實(shí)例：
var zip = new JSZip();
//?使用.file(fileName,fileContent)添加一個(gè)txt文件
zip.file("Hello.txt", "Hello World\n");
//type:"blob" 壓縮的結(jié)果為二進(jìn)制流,可用作文件上傳
zip.generateAsync({type:"blob"})
.then(function(content) {
// 創(chuàng)建隱藏的可下載鏈接
var eleLink = document.createElement('a');
eleLink.download = 'example.zip';
eleLink.style.display = 'none';
// 下載內(nèi)容轉(zhuǎn)變成blob地址
eleLink.href = URL.createObjectURL(content);
// 觸發(fā)點(diǎn)擊
document.body.appendChild(eleLink);
eleLink.click();
// 然后移除
document.body.removeChild(eleLink);
});
</script>
</body>
</html>
除了可以下載文本文件，我們還可以創(chuàng)建一個(gè)文件夾，文件夾里面可以放進(jìn)的東西是 base64 或 blob 數(shù)據(jù)。也就是除了圖片常見的 Excel，word 等等都可以壓縮。
//?使用.folder(folderName)添加一個(gè)文件夾
var img = zip.folder("images");
// ?使用.file(fileName,fileContent,base64FLag)在文件夾下添加一個(gè)圖片文件
//fileContent可以是File文件也可以是Blob二進(jìn)制數(shù)據(jù)
img.file("smile.gif", imgData, {base64: true});
