Vue通过Blob对象实现导出Excel功能（2种方法）

方法一：Excel 在 前端命名

 通过请求接口，发送请求。 基本像下面这个就可以导出实现了

exportExcel() {
      this.$axios({
        method: "",
        url: "XXXXX",
        data: {},
        //下面这二个必须带上
        headers: {
          'Content-Type': "application/json;charset=UTF-8"
        },
        responseType: "blob"

      }).then(res => {
        console.log(res,'res')
        const blob = new Blob([res.data]);
        let url = window.URL.createObjectURL(blob);
        const link = document.createElement("a");
        link.href = url;
        link.download = "填报情况统计列表" + this.timeFilter() + ".xlsx"; //命名Excel名字
        link.click();
        URL.revokeObjectURL(url);
      }).catch((err) => {
        this.$message({
          message: err.message,
          type: 'error',
        })
      })
    },

方法二：

        只导出当前所显示结果页面的表格进入excel，就用插件，比如vue-json-excel或者是Blob.js+Export2Excel.js来实现导出Excel功能。

        但是有些需求因为数据量太大，成千上万条数据，所以是需要后端拼接，然后输出二进制流文件，然后前端直接下载，这次我们谈谈后者的做法。

exportExcel() {
      var params = {
        XX: xx//需要携带的请求体            
      }
      this.$axios.get('/XX/XX', {
        params: params,
        responseType: 'blob'//首先设置responseType字段格式为 blob
      }).then(res => {
        console.log(res);
        let blob = new Blob([res], { type: "application/vnd.ms-excel" });// 为blob设置文件类型，这里以.xlsx为例
        let url = window.URL.createObjectURL(blob); // 创建一个临时的url指向blob对象
        let a = document.createElement("a");
        a.href = url;
        a.click();// 释放这个临时的对象url                
        window.URL.revokeObjectURL(url); 
      });
    },

'responseType'表示的是服务器响应的数据类型，可以是'arrayBuffer'、'blob'、'document'、'json'、'txt'、'stream'，默认为json。axios官方文档地址： https://www.kancloud.cn/yunye/axios/234845（axios请求配置章节）。

所以我们接收后台传给前端的二进制流之前需要先设置responseType为blob，否则默认会以json获取，下载下来的文件打开会提示文件已损坏。控制台输出的可以看到是个正确的Blob对象，这就说明我们的配置是对的。

后端最好也要配置response头的content-type为对应的类型

 

然后，需要给这个Blob对象设置一个type，这个type表明改Blob对象所包含数据的MIME类型。如果类型未知，则该值为空字符串。这里给出几个常用文件格式的MIME类型：（详细的可参考WebAPI官方文档： https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types）

       扩展名----------MIME类型

　　.csv--------------text/csv

　　.jpeg/.jpg-------image/jpeg

　　.png-------------image/png

　　.rar--------------application/x-rar-compressed

　　.doc-------------application/msword

　　.docx-----------application/vnd.openxmlformats-officedocument.wordprocessingml.document

　　.xls--------------application/vnd.ms-excel

       .xlsx------------application/vnd.openxmlformats-officedocument.spreadsheetml.sheet

　　.zip--------------application/zip

 一般来说，这样就可以实现下载的功能了。