前端_通过URL读取文件,打成Zip包进行下载

后端
返回对应文件的名称及URL

前端
1.install jszip

npm install jszip file-saver 

JSZip是一个用于创建、读取和编辑.zip文件的javascript库，并且拥有有友好而简单的API

2.引入 jszip 和 file-saver

import JSZip from 'jszip';
import FileSaver from 'file-saver';

3.JS文件方法

//通过url获取图片数据
const getFile = (url) => {
  return new Promise((resolve, reject) => {
    axios(url, {
      method: 'GET',
      responseType: 'blob'
    }).then((res) => {
      console.log('res',res);
      resolve(res)
    }).catch((error) => {
      reject(error)
    })
  })
}

/**
 * 通过url获取文件并打包下载
 * @param {*} data  文件链接及名称的数组
 * @param {*} fileName 文件类型
 */
export function getDownLoadZip(data, fileName) {
  //创建实例
  const zip = new JSZip(); 

  const promises = [];  //用于存储多个promise
  data.forEach((item) => {
    const promise = getFile(item.fileUrl).then((res) => {
      const fileName = item.fileName + '';
      //可参考官方文档进行传参
      // https://stuk.github.io/jszip/documentation/api_jszip/file_data.html
      zip.file( fileName,res.data ,{binary: true});
    })
    promises.push(promise)
  })

  Promise.all(promises).then(() => {
    zip.generateAsync({
      type: "blob",
      compression: "DEFLATE",  // STORE：默认不压缩 DEFLATE：需要压缩
      compressionOptions: {
        level: 9               // 压缩等级1~9    1压缩速度最快，9最优压缩方式
      }
    }).then((res) => {
      FileSaver.saveAs(res, fileName ? fileName : "影视文件.zip") // 利用file-saver保存文件
    })
  })
}

vue文件

1.引入js方法

import { getDownLoadZip } from "@/utils/zipdownload";

2.调用方法

//调用接口,返回的是文件名称和URL的数组
downloadZip(){
//模拟接口返回

const data = [
    {
        fileUrl: 'https://www.xxx.com/data/data_service/20210429/144b4b1e4e457485c10fed54b8bc8d48.docx',
        fileName: '文件一'
    },
    {
        fileUrl: 'https://www.xxx.com/data/data_service/20210429/144b4b1e4e457485c10fed54b8bc8d48.docx',
        fileName: '文件二'
    },
    {
        fileUrl: 'https://www.xxx.com/data/data_service/20210429/144b4b1e4e457485c10fed54b8bc8d48.docx',
        fileName: '文件三'
    },
    {
        fileUrl: 'https://www.xxx.com/data/data_service/20210429/144b4b1e4e457485c10fed54b8bc8d48.docx',
        fileName: '文件四'
    },
 ];  
   downloadFiles(data).then(res =>{
    //调用js的方法
     getDownLoadZip(res,"影视文件.zip");
   })
 },