js 多个不同格式文件下载为一个zip

业务场景：后端返回对象数组，每个对象里包含了后缀 .pdf、.jpeg、 .png等文件, 需要将这些格式不同的文件下载为一个zip包

• 思路：后端返回文件的数据流，我们转成blob，通过URL对象下的 createObjectURL方法将blob转成可访问的url字符串;
• 安装JSZip，file-saver库
• 文档地址：https://stuk.github.io/jszip/

• html

 <button @click="download">download</button>

• js

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

async download(){
         var arr = [
                'https://dggtechtest.oss-cn-beijing..... .pdf',
                'https://dggtechtest.oss-cn-beijing..... .pdf',
        ];

        try{
                var zip = new JSZip();

                let blob = await fetch(arr[0]).then(res=>res.blob());
                zip.file('1.pdf', blob);

                let blob2 = await fetch(arr[1]).then(res=>res.blob());
                zip.file('2.pdf', blob2);
                
                let src = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAA.....';
                let img = src.replace(/^data:image\/jpeg;base64,(.)/, '$1'); // 去除头部'data:image/jpeg;base64,'
                
                zip.file('m.jpeg', img, {base64:true});

                zip.generateAsync({type:'blob'}).then((content)=>{
                    console.log('content:', content);
                    saveAs(content, 'example.zip');
                });
        } catch(err){
            console.log("err:", err);
        }
}