vue 使用 jszip file-saver 对附件word pdf png 等进行zip打包下载

vue jszip file-saver 实现一个勾选，批量前端下载文件，多个的话进行下载zip文件下载功能，如下图所示

1. 安装依赖

npm install jszip
npm install file-saver

2. 在utils文件下新建downloadZip.js 封装下载zip包方法

downloadZip.js 文件代码

import axios from "axios"
import JSZip from "jszip"
import FileSaver from "file-saver"
export const downloadZip = {
    
    
  handleBatchDownload(data) {
    
    
    const zip = new JSZip()
    const cache = {
    
    }
    const promises = []
    let _this = this
    data.forEach((item) => {
    
    
      const promise = _this.getFile2(item.url).then((data) => {
    
    
        // 下载文件, 并存成ArrayBuffer对象
        zip.file(item.file_name, data, {
    
    
          binary: true,
        }) // 逐个添加文件
        cache[item.file_name] = data
      })
      promises.push(promise)
    })
    Promise.all(promises).then(() => {
    
    
      zip
        .generateAsync({
    
    
          type: "blob",
        })
        .then((content) => {
    
    
          // 生成二进制流
          FileSaver.saveAs(content, "批量下载.zip") // 利用file-saver保存文件
        })
    })
  },
  getFile2(url) {
    
    
    return new Promise((resolve, reject) => {
    
    
      axios({
    
    
        method: "get", //使用get请求
        url, //放入的文件地址
        responseType: "arraybuffer", //请求的数据buffer对象
      })
        .then((data) => {
    
    
          resolve(data.data)
        })
        .catch((error) => {
    
    
          reject(error.toString())
        })
    })
  },
}

3. vue 页面调用 handleBatchDownload 方法进行下载

先vue页面引用方法

import {
    
     downloadZip } from "@/utils/downloadZip"

点击下载进行下载保存，如下

// 点击进行批量文件打包下载
downLoadAll(){
    
    
	let data = [
		{
    
    
			url:'https://profile.csdnimg.cn/8/1/5/1_qq_36410795', //文件url地址
			file_name:'2022-04-11-日志.pdf' // 文件名
		},
		{
    
    
			url:'https://profile.csdnimg.cn/8/1/5/1_qq_36410795',
			file_name:'2022-04-14-日志.pdf'
		}
	]
	// data 参数就是下载地址数组，使用很简单
	await downloadZip.handleBatchDownload(data)
}