【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法には2つのパラメータがあり、2つ目のパラメータはダウンロードされたファイル名であり、1つ目のパラメータは比較的取りにくい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();
    })
}

まず、1つの原生の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よりも効率的である.
ダウンロードしました.