vue PDF批量下载打包 详解

1. 第一步引进并且安装
import JSZip from ‘jszip’
import FileSaver from ‘file-saver’
npm install jszip
npm install file-saver --save
//该方法查看第三步。
import {getFile} from “@/api/file/contract/saleList.js”;

2.第二部
点击批量下载的方法
**loadFilesWin(){
//这块代码就是拿到pdf的地址，后台一起放回给我的。所以需要遍历 第一步就是要拿到地址
let temp = []
for(let k = 0; k < this.tableList.length; k++){
let url = this.tableList[k].unsealedContract
temp.push( url)
}
const data = temp // data =[’/test/1.pdf’,’/test/.2.pdf’]

   //这里开始复制就可以
    const zip = new JSZip()
    const cache = {}
    const promises = []
    data.forEach(item => {
    //注意getFile方法是我自己封装的。源码在下面第三步
    const promise = getFile(item).then(data => { // 下载文件, 并存成ArrayBuffer对象
    const arr_name = item.split("/")
    const file_name = arr_name[arr_name.length - 1] // 获取文件名
    zip.file(file_name, data, { binary: true }) // 逐个添加文件
    cache[file_name] = data
    })
    promises.push(promise)
    })
    Promise.all(promises).then(() => {
    zip.generateAsync({type:"blob"}).then(content => { // 生成二进制流
    FileSaver.saveAs(content, "打包下载.zip") // 利用file-saver保存文件
    })
  })
},**

第三步 getFile方法

import Axios from ‘axios’
const urls = ‘/download’;
// 批量下载
export function getFile(data){
return new Promise((resolve, reject) => {
Axios({
method:‘get’,
url:urls+data,
responseType: ‘arraybuffer’
}).then(data => {
resolve(data)
}).catch(error => {
reject(error.toString())
})
})
}
这里有个坑有注意下

if(response.config.responseType){
return response.data
} 需要加上这一行代码 不然 返回的不正确 当然你没有拦截器就不需要了

最后一步 针对菜鸟。upload地址 应该明白吧。就是你这个pdf的前缀地址 服务器代理里面要加上 target打上你的前缀地址即可Ok