前端下载文件为zip

最新推荐文章于 2024-12-04 16:18:07 发布

喜欢云的猫

最新推荐文章于 2024-12-04 16:18:07 发布

阅读量1.1k

点赞数 1

文章标签：前端

本文链接：https://blog.youkuaiyun.com/2202_75390830/article/details/131780106

版权

该代码段提供了一个函数downloadZip，用于处理从后端获取的二进制文件流，创建Blob对象并根据不同浏览器的特性（Chrome,IE,Firefox）进行下载。方法接受文件流、文件名和文件类型作为参数，确保在不同环境下都能正确下载zip或rar文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

封装文件

/**
 * 下载压缩包文件
 * @param {blob} fileArrayBuffer 文件流
 * @param {String} filename 文件名称
 * @param {String} fileType 文件格式
 */
export const downloadZip = (fileArrayBuffer, filename, fileType) => {
  let data = new Blob([fileArrayBuffer], {
    type:
      fileType == "zip"
        ? "application/zip,charset=utf-8"
        : "application/x-rar-compressed,charset=utf-8",
  });
  if (typeof window.chrome !== "undefined") {
    // Chrome
    var link = document.createElement("a");
    link.href = window.URL.createObjectURL(data);
    link.download = filename;
    link.click();
    console.log(data);
  } else if (typeof window.navigator.msSaveBlob !== "undefined") {
    // IE
    var blob = new Blob([data], {
      type:
        fileType == "zip" ? "application/zip" : "application/x-rar-compressed",
    });
    window.navigator.msSaveBlob(blob, filename);
  } else {
    // Firefox
    var file = new File([data], filename, {
      type:
        fileType == "zip" ? "application/zip" : "application/x-rar-compressed",
    });
    window.open(URL.createObjectURL(file));
  }
};

使用

//后端返回二进制文件 直接调用方法即可下载 

 async downLoadFile() {
      let res = await commonFileManyDownloads({
        filePath: this.tableData.annex_addr,
      });
      downloadZip(res.data, "附件", "zip");
    },

其中 res.data为二进制文件流