【js】javascript 批量下載 pdf

背景

最近有一個單獨和批量下載 pdf 的文件的需求。單獨下載首先想到的是用 a 標籤 download 屬性直接下載。實踐中發現，瀏覽器會默認打開pdf文件，而不是直接下載。批量下載須要壓縮，這一步也須要在前端實現。

這裏記錄下個人實現方式。適用於絕大部分文件。

準備工做

這裏用到了兩個 npm 包：

• jszip
• file-saver

jszip 用於壓縮。file-saver 用於在前端保存文件。

npm install file-saver jszip --save

安裝好以後，先實現單獨下載。

單獨下載

單獨下載 pdf，只用 file-saver 就能夠了。

import { saveAs } from 'file-saver';

function save() {
    saveAs(blob, filename);
}

saveAs 方法有兩個參數，第二個參數是下載的文件名，第一個參數就比較難獲取了，是一個 Blob 對象

什麼是 Blob？傳送門

如今的狀況是接口返回了pdf的URL，而後我要用這個url獲取對應PDF的blob。

怎麼作？固然是 ajax。

ajax 獲取blob

直接貼上代碼：

const getPdfBlob = (url: string) => {
    return new Promise((resolve, reject)=> {
        let xhr = new XMLHttpRequest()
        xhr.open('get', url+'?t='+Math.random(), true);
        xhr.setRequestHeader('Content-Type', `application/pdf`);
        xhr.responseType = 'blob';
        xhr.onload = function () {
            if (this.status == 200) {
                //接受二進制文件流
                var blob = this.response;
                resolve(blob);
            }
        }
        xhr.send();
    })
}

首先，寫一個原生的 XMLHttpRequest ，方法爲 get，url 中的 t 參數是爲了阻止緩存。而後設置 responseType 爲 blob，最後接受回來的就是 blob 數據。

爲了後面批量使用，getPdfBlob 函數內部用 promise 包了一下。

使用方法：

getPdfBlob(url).then(blob => {
    saveAs(blob, filename);// 拿到 blob 並下載 pdf
})

單獨下載搞定！

批量下載

首先，批量下載要壓縮成zip包以後下載，因此要用到 jszip。

這裏寫了一個將批量文件壓縮爲一個zip的方法：

import JSZip from 'jszip'
import { saveAs } from 'file-saver';

getMultiZip(blobs)=> {
    var zip = new JSZip();
    blobs.forEach(blob=> {
        // 添加要壓縮的pdf
        zip.file('單個pdf文件名.pdf', blob, { binary:true });
    })
    zip.generateAsync({type:'blob'}).then(function(content) {
        //生成zip並保存
        saveAs(content, '批量pdf文件名.zip');
    });
}

有了這個方法以後，接下來批量獲取 blob。

單獨下載須要發起一個 ajax，批量下載，就要每一個 URL 都發起 ajax。

由於前面的 getPdfBlob 包裝了promise，因此批量獲取就能夠這樣寫：

Promise.all(
  pdfUrlList.map(url=> getPdfBlob(url))
).then(res=> {
    // res結構：[blob, blob, blob, ...]
    getMultiZip(res)
})

這裏用 Promise.all 的好處是能夠並行發起請求，等最後一個請求結束後拿到全部的 blob，比循環執行 ajax 高效的多。

批量下載搞定！