vue2 点击按钮下载二维码图片的压缩包（zip，rar都可以最好zip）

vue2 点击按钮下载二维码图片的压缩包（zip，rar都可以最好zip）

有这样一个数组

      list: [
        {
          url: "https://element.eleme.cn/#/zh-CN/component/button",
          title: "随便起的昵称",
        },
        {
          url: "https://element.eleme.cn/#/zh-CN/component/button",
          title: "随便起的昵称",
        },
        {
          url: "https://element.eleme.cn/#/zh-CN/component/button",
          title: "随便起的昵称",
        },
        {
          url: "https://element.eleme.cn/#/zh-CN/component/button",
          title: "随便起的昵称",
        },
      ],

遍历数组里的每条对象里的url生成二维码图片，保存到压缩文件里并下载到本地

后台根据需求写出到本地就可以吧

生成图片下载倒是可以，还要丢到压缩包再下载，这对于前端js有点为难了，后端语言倒是可以做压缩那一步，如node、java、php等

没验证，但是这个插件肯定能实现：

<script src="./html2canvas.js"></script>
<script src="./jszip.min.js"></script>
<script src="./FileSaver.js"></script>

function urlToBase64(url) {
    return new Promise ((resolve,reject) => {
        let image = new Image();
        image.onload = function() {
            let canvas = document.createElement('canvas');
            canvas.width = this.naturalWidth;
            canvas.height = this.naturalHeight;
            // 将图片插入画布并开始绘制
            canvas.getContext('2d').drawImage(image, 0, 0);
            // result
            let result = canvas.toDataURL('image/png')
            resolve(result);
        };
        // CORS 策略，会存在跨域问题https://stackoverflow.com/questions/20424279/canvas-todataurl-securityerror
        image.setAttribute("crossOrigin",'Anonymous');
        image.src = url;
        // 图片加载失败的错误处理
        image.onerror = () => {
            reject(new Error('转换失败'));
        };
    });
}
let fileList = [
    {
        fileName: 'cat.jpeg',
        filePath: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg'
    },
    {
        fileName: 'cat.jpeg',
        filePath: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg'
    },
    {
        fileName: 'cat.jpeg',
        filePath: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg'
    }
]

fileList.forEach(item => {
    urlToBase64(item.filePath).then(res=>{
        var zip = new JSZip();
        zip.file(item.fileName, res, {base64: true});
        zip.generateAsync({type:"blob"})
        .then(function(content) {
            saveAs(content, "截图.zip");
    })
})