VUE+jszip如何實(shí)現(xiàn)下載多個(gè)文件導(dǎo)出為一個(gè)zip格式

更新時(shí)間：2024年03月08日 09:32:05 作者：前端小小白~

這篇文章主要介紹了VUE+jszip如何實(shí)現(xiàn)下載多個(gè)文件導(dǎo)出為一個(gè)zip格式方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

VUE+jszip下載多個(gè)文件導(dǎo)出為一個(gè)zip格式

項(xiàng)目需求：

將多個(gè)文件/圖片導(dǎo)出為一個(gè)zip格式壓縮包，點(diǎn)擊<下載全部附件>按鈕下載上面三個(gè)文件

1、安裝jszip和file-saver插件

npm install jszip
npm install file-saver

2、在所需頁面引入

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

3、模擬fileList數(shù)組

//fileList模擬文件數(shù)組
  export default {
    name: "notice-list",
    data() {
      return {
	      fileList: [
	      {
	        fileName: '3.jpg',
	        feilePath: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
	      },
	      {
	        fileName: '5.jpg',
	        feilePath: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
	      },
	      {
	        fileName: '測(cè)試2.doc',
	        feilePath: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
	      }
	    ],
      }
    }
}

4、在methods中定義方法

     // 下載全部附件   downloadBtn<下載全部附件>按鈕綁定事件
      downloadBtn() {
        var blogTitle = `全部附件`; // 下載后壓縮包的名稱
        var zip = new JSZip();
        var promises = [];
        let cache = {};
        for (let item of this.fileList) {
          // item.feilePath為文件鏈接地址
          // item.fileName為文件名稱
          if(item.feilePath) {
            const promise = this.getImgArrayBuffer(item.feilePath).then((data) => {
              // 下載文件, 并存成ArrayBuffer對(duì)象(blob)
              zip.file(item.fileName, data, { binary: true }); // 逐個(gè)添加文件
              cache[item.fileName] = data;
            });
            promises.push(promise);
          } else {
          // feilePath地址不存在時(shí)提示
            alert(`附件${item.fileName}地址錯(cuò)誤，下載失敗`);
          }
        }
        Promise.all(promises).then(() => {
          zip.generateAsync({ type: "blob" }).then((content) => {
            // 生成二進(jìn)制流
            FileSaver.saveAs(content, blogTitle); // 利用file-saver保存文件  blogTitle:自定義文件名
          });
        }).catch((res) => {
          alert("文件壓縮失敗");
        });
      },
      //文件以流的形式獲?。▍?shù)url為文件鏈接地址）
      getImgArrayBuffer(url) {
        return new Promise((resolve, reject) => {
          //通過請(qǐng)求獲取文件blob格式
          let xmlhttp = new XMLHttpRequest();
          xmlhttp.open("GET", url, true);
          xmlhttp.responseType = "blob";
          xmlhttp.onload = function () {
            if (xmlhttp.status == 200) {
              resolve(xmlhttp.response);
            } else {
              reject(xmlhttp.response);
            }
          };
          xmlhttp.send();
        });
      },