前端导出excel报表

作者: adm 分类: 前端 发布时间: 2023-11-20

后端返回blob流,前端post请求拿到流后下载excel


async exportReport() {
      if (!this.formData.StartTime || !this.formData.EndTime) {
        return this.$message.error("统计时间段不能为空");
      }
      const data = await reportExport(this.formData);
      if (data) {
        let blob = new Blob([data], {
          type: "application/vnd.ms-excel",
        });
        let url = window.URL.createObjectURL(blob); // 创建一个临时的url指向blob对象
        console.log(url);
        let a = document.createElement("a");
        a.href = url;
        a.download = "报表导出-" + time(); // 自定义文件名
        a.click();
        window.URL.revokeObjectURL(url); // 释放这个临时的对象url
      }
    },

注意:此方法还需要在封装的请求方法里设置responseType和paramsSerializer

export function reportExport(params, type = "post") {
  return request({
    method: type,
    url: url,
    params,
    responseType: "blob",
    paramsSerializer: function(params) {
      return Qs.stringify(params, { arrayFormat: "repeat", skipNulls: true });
    }
  });
}

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!