[JavaScript知识库] vue 使用 jszip file-saver 对附件word pdf png 等进行zip打包下载

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> vue 使用 jszip file-saver 对附件word pdf png 等进行zip打包下载 -> 正文阅读

[JavaScript知识库]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)
}