位置:首页 > web前端 > javascript

前端js+Browser方法实现文档流导出

dearweb 发布:2021-10-15 12:37:21阅读:

不少前端小伙伴在工作的时候都会遇到需要导出的功能,如果后端直接返回给我们文档流的情况下,我们如何才能实现导出下载excel表格呢?本文给大家一一介绍。

其实实现数据流导出为excel表格很简单

// 请求接口拿到文件流数据
      const res = await exportTerm(obj);
      // 创建a标签
      let alink = document.createElement("a");
      // 生成的文档名称
      alink.download = `术语_${new Date().getTime()}.xlsx`;
      // 隐藏
      alink.style.display = "none";
      // new Blob
      const blob = new Blob([res]);
      // 静态方法会创建一个 DOMString,其中包含一个表示参数中给出的对象的URL。
      alink.href = URL.createObjectURL(blob);
      // 添加a标签
      document.body.appendChild(alink);
      // 点击a标签
      alink.click();
      // URL.revokeObjectURL() 静态方法用来释放一个之前已经存在的、通过调用 URL.createObjectURL() 创建的 URL 对象。当你结束使用某个 URL 对象之后,应该通过调用这个方法来让浏览器知道不用在内存中继续保留对这个文件的引用了。
      URL.revokeObjectURL(alink.href);
请求方法中需要增加  responseType: "blob"

下面写的是axios方法,如果你用的是ajax或者其他的只需要在请求中增加这行代码就行了

export function batchExportPaymentInfo(params) {
  return request({
    url: `/server/financialPayment/batchExportPaymentInfo`,
    method: "get",
    params,
    responseType: "blob"  // 这行是重点
  });
}

上述就是js获取文档流导出成excel表格的方法。

24人点赞 返回栏目 分享一波

小礼物走一波,支持作者

还没有人赞赏,支持一波吧

留言 评论仅代表网友个人 留言列表

暂无留言,快来抢沙发吧!

手机扫码查看 手机扫码查看