js 导出excel文件(含json格式的失败数据处理)

一般来说,导出有2种实现方式:

  1. 直接放a标签里,通过href属性向后端发送请求导出
<a href="url">导出</a>

很明显的缺点:文件名不正确,是一串字符串。所以需要使用第二种方法。

  1. 需要进行数据处理的情况:手动 coding 发送请求的代码,将返回的 blob 对象导出。
    问题来了:如何导出呢?好像没有思路-_-
    好好思考:
    • 由方法一知:a标签可以直接导出。
      那么js应该可以模拟一个a标签。
    • url哪里来呢?
      createObjectURL可以将blob对象转换为url,可以像普通的 url 一样使用。
    • 最后一个问题:如何导出excel格式呢?
      MDN告诉我:用Blob 构造函数声明MIME类型就好。

思路整理好了,一步步实现呗:

this.$axios.get("XXX", {
      params,
      responseType: "blob",
})
.then((res) => {
      let blob = new Blob([res.data], {
           type: "application/vnd.ms-excel",
      });
      let fileName = "导出.xls";
      let link = document.createElement("a");
      link.href = window.URL.createObjectURL(blob);
      link.download = fileName;
      link.click();
      // 移除url
      window.URL.revokeObjectURL(link.href);
      //移除标签
      document.body.removeChild(link)
})

ps:一个编码好习惯:及时清除已执行完的变量,释放内存。

试了下,可以正确导出了。

正暗自欢喜已解决导出问题时,打开导出的excel一看:

excel

快乐没了

这啥???401?这不是接口给的登录提示信息么?而且是json 类型呀?o~o,忘记错误处理了。。。

看了下此刻接口的返回情况:

401

type 已然变为json类型,但是data 还是blob类型,怎么从blob中提取json数据呢?

FileReader

MDN 给了答案:使用FileReader

那就试一下,完善下上面的代码:

this.$axios.get("XXX", {
       params,
       responseType: "blob",
}).then((res) => {
       if (res.data.type === "application/json") {
          // 返回的格式是json类型,转换为json
          const reader = new FileReader();
          const self = this;
          // 读取操作完成时触发
          reader.onload = function () {
               const resData = this.result && JSON.parse(this.result);
               self.$message.error({
                   showClose: true,
                   message: (resData && resData.msg) || "导出失败"
               });
          };
          reader.onerror = (event) => {
                self.$message.error({
                      showClose: true,
                      message: reader.error
                });
          };
          reader.readAsText(res.data); //a text string
       } else {
          let blob = new Blob([res.data], {
              type: "application/vnd.ms-excel",
          });
          let fileName = "导出.xls";
          let link = document.createElement("a");
          link.href = window.URL.createObjectURL(blob);
          link.download = fileName;
          link.click();
          // 移除url
          window.URL.revokeObjectURL(link.href);
          //移除标签
          document.body.removeChild(link);
       }
});

完美收官!

总结
  • coding 难的是思路,也需要过硬的知识储备。多数时候官网是最佳的学习渠道,多多学习呀!
  • coding不能忘记异常的处理,要多做总结和记录。

本文章由javascript技术分享原创和收集

发表评论 (审核通过后显示评论):