导出功能: 导出为excel文档,后端做导出处理,js代码发送接口直接下载

本文详细介绍了三种在前端实现数据导出的方法,包括直接通过接口获取base64数据、解析后端返回的blob数据流以及使用post请求发送接口参数。每种方法都附带了具体实现代码,涵盖了数据格式转换、a标签下载以及处理Firefox浏览器兼容性问题等关键步骤。
摘要由CSDN通过智能技术生成
async handleExport() {
      const newRow = JSON.parse(JSON.stringify(this.form));
      delete newRow.creationDate;
      const params = {
        ...newRow,
        startTime: dateStart ? dateStart.getTime() : "",
        endTime: dateEnd ? dateEnd.getTime() : "",
        pageIndex: this.datas.page.pageIndex,
        pageSize: this.datas.page.pageSize,
      };
      // 法1,直接发送接口获取base64;格式数据
      this.ajax({
		url: 'xxx/xxx',
		data: params
	})
      var a = document.createElement("a");
      a.download = "冻结日志信息.xlsx";
      a.href = 'data:;base64,' + ret.data;
      $("body").append(a); // 修复firefox中无法触发click
      a.click();
      $(a).remove();


	// 法二:解析后端返回blob数据流,再新建a标签进行展示
      var url = "/xxx/downloadSupremeFreezeRecords";
      var xhr = new XMLHttpRequest();
      xhr.open("post", url, true); // 也可以使用POST方式,根据接口
      xhr.setRequestHeader("Content-Type", "application/json");
      xhr.responseType = "blob"; // 返回类型blob
      // 定义请求完成的处理函数,请求前也可以增加加载框/禁用下载按钮逻辑
      xhr.onload = function () {
        // 请求完成
        if (this.status === 200) {
          // 返回200
          var blob = this.response;
          var reader = new FileReader();
          reader.readAsDataURL(blob); // 转换为base64,可以直接放入a表情href
          reader.onload = function (e) {
            console.log(e, this.response)
            // 转换完成,创建一个a标签用于下载
            var a = document.createElement("a");
            a.download = "data.xlsx";
            a.href = e.target.result;
            $("body").append(a); // 修复firefox中无法触发click
            a.click();
            $(a).remove();
          };
        }
      };
      // 发送ajax请求,传参
      xhr.send(JSON.stringify(params));

      // 法三:使用post请求发送接口请求参数,缺点:传参格式Content-Type只能为x-www-form-urlenode,不能修改为application/json;
      const form = document.createElement("form");
      form.setAttribute("style", "display: none");
      form.setAttribute("method", "post");
      // form.setAttribute('target', '_blank'); // 打开新标签页
      form.enctype = 'multipart/form-data' // 文件形式,查百度,只有三种格式,其中没有application/json;
      form.setAttribute(
        "action",
        "/xxx/downloadSupremeFreezeRecords"
      );
      document.body.appendChild(form);
      const newRow = JSON.parse(JSON.stringify(this.form));
      delete newRow.creationDate;
      const params = {
        ...newRow,
        startTime: dateStart ? dateStart.getTime() : "",
        endTime: dateEnd ? dateEnd.getTime() : "",
        pageIndex: this.datas.page.pageIndex,
        pageSize: this.datas.page.pageSize,
      };
      for (const x in params) {
        const input = document.createElement("input");
        input.setAttribute("type", "hidden");
        input.name = x;
        input.value = params[x];
        form.appendChild(input);
      }
      form.submit();
    },

法一接收数据:是base64格式的,用a标签的话需要自行加上数据格式和base64;
a.href = ‘data:;base64,’ + ret.data;
在这里插入图片描述

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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值