美文网首页
前端导出excel报表

前端导出excel报表

作者: 超开心儿 | 来源:发表于2022-06-29 10:13 被阅读0次

    后端返回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 });
        }
      });
    }
    

    相关文章

      网友评论

          本文标题:前端导出excel报表

          本文链接:https://www.haomeiwen.com/subject/oqetbrtx.html