方法一: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

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

 

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐