vue项目中批量下载文件并打压缩包

辉辉要奋斗

已于 2023-07-12 09:35:00 修改

阅读量1.5k

点赞数 1

文章标签： vue.js 前端 javascript

于 2023-06-13 16:53:57 首次发布

本文链接：https://blog.csdn.net/qq_47498423/article/details/131191964

版权

文章介绍了在Vue项目中如何利用axios、jszip和file-saver库实现多个文件的打包下载。首先，通过npm安装所需插件，然后在Vue组件中导入并使用这些库。接着，展示了下载单个文件和批量打包下载的方法，包括处理文件为Blob类型，生成zip文件，最后用file-saver保存为指定名称的zip文件。

摘要由CSDN通过智能技术生成

1、下载插件

npm install jszip
npm install file-saver

2、在vue文件中使用

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

3、下载文件以及打包方法

//下载依赖
// npm i axios, JSZip, FileSaver -s
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: "blob"
    })
      .then(data => {
        resolve(data.data);
      })
      .catch(error => {
        reject(error.toString());
      });
  });
};
 
 methods: {
    downLoadAll() {
  
      const data = ["server.zip","info.txt","img.png"]; // 需要下载打包的路径, 可以是本地相对路径, 也可以是跨域的全路径
       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保存文件  自定义文件名
         });
       });
    },
}

4、api封装方式

//模块api.js

export function getFile (url) {
  return axios.request({
    url: url,
    method: 'get',
    responseType: 'blob'
  })
}

    getFile (url) {
      return new Promise((resolve, reject) => {
        getFile(url).then(data => {
          resolve(data.data)
        }).catch(error => {
          reject(error.toString())
        })
      })
    },
    downloadAll () {
      const data = this.fileList // 需要下载打包的路径, 可以是本地相对路径, 也可以是跨域的全路径
      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.data, { binary: true }) // 逐个添加文件
          cache[file_name] = data.data
        })
        promises.push(promise)
      })
      Promise.all(promises).then(() => {
        zip.generateAsync({ type: 'blob' }).then(content => {
          // 生成二进制流
          FileSaver.saveAs(content, '测试.zip') // 利用file-saver保存文件  自定义文件名
        })
      })
    },

//通过url 转为blob格式的数据
getImgArrayBuffer(url) {
      let _this = this;
      return new Promise((resolve, reject) => {
        //通过请求获取文件blob格式
        let xmlhttp = new XMLHttpRequest();
        xmlhttp.open("GET", url, true);
        xmlhttp.responseType = "blob";
        xmlhttp.onload = function () {
          if (this.status == 200) {
            resolve(this.response);
          } else {
            reject(this.status);
          }
        };
        xmlhttp.send();
      });
},
// imgDataUrl 数据的url数组
downImg(imagesParams) {
      let _this = this;
      let zip = new JSZip();
      let cache = {};
      let promises = [];
      _this.title = "正在加载压缩文件";

      for (let item of imagesParams) {
        const promise = _this.getImgArrayBuffer(item.href).then((data) => {
          // 下载文件, 并存成ArrayBuffer对象(blob)
          zip.file(item.title, data, { binary: true }); // 逐个添加文件
          cache[item.title] = data;
        });
        promises.push(promise);
      }

      Promise.all(promises)
        .then(() => {
          zip.generateAsync({ type: "blob" }).then((content) => {
            _this.title = "正在压缩";
            // 生成二进制流
            FileSaver.saveAs(
              content,
              `服务确认函-${dayjs(new Date()).format("YYYY-MM-DD")}`
            ); // 利用file-saver保存文件  自定义文件名
            _this.title = "压缩完成";
          });
        })
        .catch((res) => {
          _this.$message.error("文件压缩失败");
        });
},