Vue實現(xiàn)文件批量打包壓縮下載

更新時間：2022年07月15日 10:31:46 作者：鵬仔工作室

這篇文章主要為大家詳細(xì)介紹了如何利用Vue實現(xiàn)文件批量打包壓縮下載功能，文中的實現(xiàn)步驟講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起了解一下

上次做了一個選擇多個數(shù)據(jù)生成多個二維碼并下載，當(dāng)時項目催的緊，就簡單寫了個循環(huán)生成二維碼下載，一次性會下載很多文件，特別難整理；

剛好這次項目又遇到類似這種功能，需要一次性批量下載多個文件，那么就安排下打包下載吧！

需要用到的是file-saver、jszip兩個插件

首先，我們安裝這兩個插件，在控制臺中依次輸入下方命令執(zhí)行

npm install file-saver
npm install jszip

上方依賴安裝完成，我們在需要實現(xiàn)打包下載的頁面中引入這兩個插件

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

在data中，我就簡單定義一個數(shù)組 fileList ，用來存放要下載的文件鏈接

data() {
  return {
    fileList: [
      {
        name: 'logo1',
        url: 'https://duanqinghua.com/logo.png'
      },
      {
        name: 'logo2',
        url: 'http://sharedbk.com/logo.png'
      }
    ]
  }
}

接著就是在 methods 中寫下載事件了

// 點擊下載
download() {
  var blogTitle = `下載文件名字`; // 下載后壓縮包的命名
  var zip = new JSZip();
  var promises = [];
  let cache = {};
  let arrImg = [];
  for (let i = 0; i < this.appData.resources.length; i++) {
    arrImg.push({
      path: this.appData.resources[i].url, // 文件鏈接
      name: this.appData.resources[i].name // 文件名稱
    });
  }
  for (let item of arrImg) {
    // item.path為文件鏈接地址
    const promise = this.getImgArrayBuffer(item.path).then((data) => {
      // 下載文件, 并存成ArrayBuffer對象(blob)
      zip.file(item.name, data, { binary: true }); // 逐個添加文件
      cache[item.name] = data;
    });
    promises.push(promise);
  }
  Promise.all(promises).then(() => {
    zip.generateAsync({ type: "blob" }).then((content) => {
      // 生成二進制流
      FileSaver.saveAs(content, blogTitle); // 利用file-saver保存文件  自定義文件名
    });
  }).catch((res) => {
    alert("文件壓縮失敗");
  });
},
//文件以流的形式獲?。▍?shù)url為文件鏈接地址）
getImgArrayBuffer(url) {
  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();
  });
}

很多小伙伴復(fù)制完代碼使用，點擊下載后瀏覽器會報跨域問題，這個問題并非前端問題，需要后端在存儲文件的服務(wù)器中設(shè)置允許跨域，添加 Access-Control-Allow-Origin 即可！