快捷導(dǎo)航

vue項(xiàng)目實(shí)現(xiàn)下載zip壓縮包

更新時(shí)間：2024年03月08日 09:15:02 作者：阿wei程序媛

這篇文章主要介紹了vue項(xiàng)目實(shí)現(xiàn)下載zip壓縮包方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue項(xiàng)目下載zip壓縮包

直接上代碼

1.請求后端接口

//必須加上responseType，因?yàn)橄螺d的zip屬于流和普通的下載方式還是有較大區(qū)別的，同時(shí)headers也需要設(shè)置一下，不然是下載不了。
export function loadLabel(query) {
  return request({
    url: '/express/admin/loadLabel',
    method: 'get',
    params: query,
    responseType: 'blob',
    headers:{ 'Content-Type': 'application/json; application/octet-stream'},
  })
}

2.HTML

<el-button
    size="mini"
    type="text"
    icon="el-icon-download"
    @click="handleIndent(scope.row)"
    v-hasPermi="['express:result:export']">
      下載失敗訂單
</el-button>

3.JS

  //下載面單封裝方法
    fileHandle(data, fileName) {
      let blob = new Blob([data], { type: 'application/zip' })
      let url = window.URL.createObjectURL(blob)
      const link = document.createElement('a') // 創(chuàng)建a標(biāo)簽
      link.href = url
      link.download = fileName // 重命名文件
      link.click()
      URL.revokeObjectURL(url) // 釋放內(nèi)存
    },
    /** 下載面單 */
    handleSheet(row){
      this.queryParams.parentId=row.id,
      this.queryParams.statusCode=200
      this.$confirm('是否確認(rèn)下載成功的面單嘛?', '提示', {
        confirmButtonText: '確定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const loading1= this.$loading({
          lock: true,
          text: '正在下載，請稍等',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        loadLabel(this.queryParams).then(res => {
          loading1.close();
          this.fileHandle(res,'面單.zip')
        })
      }).catch(() => {
      });
    },

當(dāng)然也可以不用封裝的方法

 handleSheet(row){
      this.queryParams.parentId=row.id,
      this.queryParams.statusCode=200
      const queryparmas=this.queryParams
      this.$confirm("是否確認(rèn)導(dǎo)出所有數(shù)據(jù)?", "警告", {
        confirmButtonText: "確定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(function() {
        return loadLabel(queryparmas);
      }).then(response => {
        let blob = new Blob([response.data], {type: 'application/zip'})
        let url = window.URL.createObjectURL(blob)
        const link = document.createElement('a') // 創(chuàng)建a標(biāo)簽
        link.href = url
        link.download = '面單.zip' // 重命名文件
        link.click()
        URL.revokeObjectURL(url) // 釋放內(nèi)存
      }).catch(function(err) {
        console.log(err)
      });
    },

以上兩種形式的代碼就能實(shí)現(xiàn)zip下載

vue多文件下載zip格式

場景

多圖片時(shí)，下載成一個(gè)zip壓縮包文件

代碼實(shí)現(xiàn)

1、安裝 jszip 和 file-saver 插件

npm install jszip
npm install file-saver

2、引入并使用

import JSZip from "jszip";
import FileSaver from "file-saver";
 
/**
 * 下載全部附件
 * @param {*} fileList 下載列表
 * @param {*} zipName 壓縮包名稱
 */
export function downloadMoreFileBtn(fileList, zipName) {
  var zip = new JSZip();
  var promises = [];
  let cache = {};
  for (let item of fileList) {
    // item.feilePath為文件鏈接地址
    // item.fileName為文件名稱
    if(item.imageUrl) {
      const promise = getImgArrayBuffer(item.imageUrl).then((data) => {
        // 下載文件, 并存成ArrayBuffer對象(blob)
        zip.file(item.imageName, data, { binary: true }); // 逐個(gè)添加文件
        cache[item.imageName] = data;
      });
      promises.push(promise);
    } else {
    // feilePath地址不存在時(shí)提示
      alert(`附件${item.imageName}地址錯(cuò)誤，下載失敗`);
    }
  }
  Promise.all(promises).then(() => {
    zip.generateAsync({ type: "blob" }).then((content) => {
      // 生成二進(jìn)制流
      FileSaver.saveAs(content, zipName); // 利用file-saver保存文件  zipName:自定義文件名
    });
  }).catch((res) => {
    alert("文件壓縮失敗");
  });
}
 
/**
 * 文件以流的形式獲?。▍?shù)url為文件鏈接地址）
 * @param {*} url 
 * @returns 
 */
export function getImgArrayBuffer(url) {
  return new Promise((resolve, reject) => {
    //通過請求獲取文件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();
  });
}

3、案例

import { downloadMoreFileBtn } from "@/utils/tools";
 
export default {
  data() {
    return {
      basicImage: {
        name: '使用功能基準(zhǔn)圖',
        imageCount: 2,
        imageList: [
          {
            imageName: '使用功能基準(zhǔn)圖1.jpg',
            imageUrl: 'https://guoyan.haznet.cn/file/20230531100310f3u83t94wf.jpg',
          },
          {
            imageName: '使用功能基準(zhǔn)圖2.jpg',
            imageUrl: 'https://guoyan.haznet.cn/file/20230531100340aqer06tma5.jpg',
          }
        ]
      },
    }
  },
  methods: {
    /**
     * 下載圖片
     */
    downloadImg(val) {
      downloadMoreFileBtn(this.basicImage.imageList, this.basicImage.name)
    },
  },
}