vue中文件下载插件

在项目代码中封装一个工具类来实现：

export const exportFile = (result) => {
  console.log("result", result);
  let contentDisposition = result.headers["content-disposition"];
  // 这里后端给的内容中，文件名字可能是驼峰式名称的 fileName ，或者是全部小写的 filename
  let filename = decodeURI(contentDisposition.split("fileName=")[1] || contentDisposition.split("filename=")[1]);
  // let filename = "1.xlsx";
  // 注意这里的 result.data ，如果只传 result 的话，最后下载出来的excel文件，里面显示的是 [object Object]
  let blob = new Blob([result.data], { type: result.headers["content-type"] });
  // let blob = new Blob([result.data],{type: "application/x-msdownload;charset=GBK"});
  // let blob = new Blob([result.data],{type: "application/x-msdownload"});
  // let blob = new Blob([result.data]);
  // let blob = new Blob([result.data],{type: "application/vnd.ms-excel"});
  let url = window.URL.createObjectURL(blob);
  if (window.navigator.msSaveBlob) {
    //IE
    try {
      window.navigator.msSaveBlob(blob, filename);
    } catch (e) {
      console.log(e);
    }
  } else {
    //非IE
    let link = document.createElement("a");
    link.style.display = "none";
    link.href = url;
    link.setAttribute("download", filename);
    document.body.appendChild(link);
    link.click();
  }
  URL.revokeObjectURL(url); // 释放内存
};

在要使用导出的页面引入

import { exportFile } from "@/utils/exportFile.js";
...
exportFile(res); 
//res为接口返回的数据，

在上面代码中，res的返回数据应当和下图中类型一致

其中 Blob 是 JavaScript 中的一个二进制数据类型，表示一个不可变、原始数据的类文件对象。这个 Blob 对象的 size 属性表示二进制数据的大小，单位为字节；type 属性表示二进制数据的 MIME 类型，这里的 application/vnd.ms-excel 表示这个二进制数据是 Excel 文件。因此，这段代码的意思是，定义了一个大小为 8892 字节，MIME 类型为 Excel 文件的 Blob 对象，可以将其用于上传或下载 Excel 文件等二进制数据的操作。