vue中多個文件下載實現打包壓縮下載

1.安裝各個依賴.

npm i axios
  npm i jszip
  npm i file-saver

2.在須要的頁面進行引入

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

3.在methods中證實方法

getFile(url) {
    let that = this;
    return new Promise((resolve, reject) => {
    axios({
    method: "get",
    url,
    responseType: "arraybuffer",
    onDownloadProgress: function(progressEvent) {
        
    }
    })
    .then(data => {
    console.log(data);
    resolve(data.data);
    })
    .catch(error => {
    reject(error.toString());
    });
    });
    },

downfile(){
const data = []; // 須要下載打包的路徑, 能夠是本地相對路徑, 也能夠是跨域的全路徑
//this.List爲多個下載數據的地址數組
    this.List.forEach(item => {
      data.push(`${item.fileurl`);//item.fileurl把文件路徑添加在要下載的data數組中
    });
    const zip = new JSZip();
    const cache = {};
    const promises = [];
    data.forEach(item => {
      const promise = this.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保存文件
      });
    });
}

在網上找的方法，若有侵權請聯繫qq 896978695