Vue 中批量下载文件并打包

1.安装 3 个依赖: axios, jszip, file-saver

yarn add axios

yarn add jszip

yarn add file-saver

本地idea编译器进行下载

npm install -S axios

npm install -S jszip

npm install -S file-saver

-S将依赖写入package.josn里面 S一定要大写

2.引入依赖

import JSZip from 'jszip'
import fileSaver from 'file-saver'
import axios from 'axios'

3.下载文件

const getFile = url => {
  return new Promise((resolve, reject) => {
    axios({
      method:'get',
      url,
      responseType: 'arraybuffer'
    }).then(data => {
      resolve(data.data)
    }).catch(error => {
      reject(error.toString())
    })
  })
};

4.打包下载

if (res.content.length>0) {
  const zip = new JSZip();
  const cache = {};
  const promises = [];
  for (let key in res.content) {
    const promise = getFile(res.content[key].url).then(data => {
      // 下载文件, 并存成ArrayBuffer对象
      const file_name = res.content[key].name; // 获取文件名
      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保存文件
    })
  })

/*****原作者代码 https://www.jb51.net/article/128583.htm

import axios from 'axios'

import JSZip from 'jszip'

import FileSaver from 'file-saver'

 

const getFile = url => {

 return new Promise((resolve, reject) => {

 axios({

  method:'get',

  url,

  responseType: 'arraybuffer'

 }).then(data => {

  resolve(data.data)

 }).catch(error => {

  reject(error.toString())

 })

 })

}

 

export default {

 render(h) {

 return (<a on-click={ () => this.handleBatchDownload() } href="javascript:;" rel="external nofollow" >批量下载</a>)

 },

 methods: {

 handleBatchDownload() {

  const data = ['各类地址1', '各类地址2'] // 需要下载打包的路径, 可以是本地相对路径, 也可以是跨域的全路径

  const zip = new JSZip()

  const cache = {}

  const promises = []

  data.forEach(item => {

  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保存文件

  })

  })

 },

 },

}