前端批量下载文件、图片、打包成压缩包，JZip和file-saver

最新推荐文章于 2024-04-18 09:43:47 发布

前端小白的逆袭

最新推荐文章于 2024-04-18 09:43:47 发布

阅读量2.7k

点赞数 5

分类专栏： Web前端文章标签：前端

本文链接：https://blog.csdn.net/Kindergarten_Sir/article/details/112570006

版权

Web前端专栏收录该内容

140 篇文章 8 订阅

订阅专栏

一、安装JZip和file-saver

cnpm install file-saver jszip --save

二、导入

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

三、使用

download() {
	const zip = new JSZip();   // 实例化zip
    const img = zip.folder("qrCode");   // zip包内的文件夹名字
    this.listOfData.forEach((item) => {  // listOfData是含有图片的数据数组
        const basePic = item.url.replace(/^data:image\/(png|jpg);base64,/, "");  // 生成base64图片数据
        img.file(item.name + '的二维码.png', basePic, { base64: true });  // 将图片文件加入到zip包内
    })
    zip.generateAsync({ type: "blob" })   // zip下载
      .then(function (content) {
        // see FileSaver.js
        saveAs(content, "二维码.zip");  // zip下载后的名字
      });
}