vue开发问题——cli3前端导出Excel文件，或导出文本流

当时的同事不知道抄谁的，稍后整理之后会引用其他博主，如有雷同。。。那就雷同把，那么多一样的我也不知道引用谁的了

但凡是能找到原博客能解决问题的，我都不会以“原创”发布文章，但是就是拿来之后用不了，或者几经曲折解决，老了，记不住了，故留下博文。以备不时之需哈~

我这里主要是记录的导出Excel文件，首先就是选哪种，博客一大堆，从头入手，一个一个去试，太浪费精力，以下稍作分析

1、后端写好的Excel，发送给前端，前端接收乱码，需要转换文本流导出文件

和前几个一样，自己启动的前后端，swagger测试，返回的是文件，但是vue接收的是Blob格式的数据。
理论如下：来自Nike丶超哥哥 的前端实现导出（下载）这个讲的比较好，
代码看这个：来自前端小木的前端导出功能实现的三种方式
原理为通过动态创建a标签来实现前端导出功能

但是cli3，axios记得要封装下载方法，因为他的responseType比较独特，需要设置，虽然我的博文axios封装有写，我还是再粘贴一遍

  function download(url, params) {
    return new Promise((resolve, reject) => {
      axios.post(url, params, {responseType: 'blob'})
        .then(response => {
            resolve(response);
        }, err => {
          reject(err);
        })
        .catch((error) => {
          reject(error)
        })
    })
  }

接收Blob类型转文件方法

cadreInter(obj) {
      this.$http
        .download("/cadre/export/cadre", obj)
        .then((res) => {
          this.$message({
            message: "正在生成导出文档",
            type: "success",
          });
          const link = document.createElement("a");
          let blob = new Blob([res.data], {
            type: "application/vnd.ms-excel",
          });
          link.style.display = "none";
          link.href = URL.createObjectURL(blob);
          const filename = res.headers["content-disposition"]
            .split(";")[1]
            .split("filename=")[1];
          link.setAttribute("download", decodeURI(filename));
          document.body.appendChild(link);
          link.click();
          URL.revokeObjectURL(link.href);
          document.body.removeChild(link);
        })
        .catch((err) => {
          this.$message.error("导出失败");
          console.log(err);
        });
    },

详细解释在理论那个讲的好。如果需要后端怎么写怎么配置的，私聊我，我再找下，毕竟我是前端么~

2、vue纯前端导出Excel

直说了啊，这个不会，没写，稍作分析：前后端分离的情况下，前端做到的就是拿到数据就能用，不做处理，或者简单的处理就可以，并且前端大量js性能去for循环处理数据，然后再去渲染。得不偿失。如果后端很忙或者。。。。。。。。。
1、导出Excel插件，网上很多，但是项目只有一处需要导出文件，再加个依赖包，大材小用
2、像这类导出依赖插件，不常用，肯定api较少，遇到好的拿到就能用，遇到没见过的，出了问题就是一盒烟，一下午了~

3、js遍历json数据，重写到Excel

js 实现纯前端将数据导出excel两种方式，亲测有效这篇也不错，但是在vue项目里，所有的数据模板都是element组件，再去重写。我当时就没用。

4、如果用到Excel，word，ppt多的话，建议直接金山wps

金山开发文档可以参考下：WPS 加载项概述