美文网首页Web前端之路
js 导出excel文件

js 导出excel文件

作者: 嘻哈章鱼小丸子 | 来源:发表于2021-01-04 17:56 被阅读0次

    一般来说,导出有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)
    })
    

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

    总结

    coding 难的是思路,也需要过硬的知识储备。多多学习呀!

    相关文章

      网友评论

        本文标题:js 导出excel文件

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