欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-13 21:26:37
前端批量下载文件、图片、打包成压缩包,JZip和file-saver...

一、安装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下载后的名字
      });
}

四、参考资料

1、JZip的相关文档
2、file-saver的相关文档

如果对你有帮助,可以????+关注,我们一起学前端~~~~

本文地址:https://blog.csdn.net/Kindergarten_Sir/article/details/112570006

相关标签: Web前端 前端