Vue 实现EXCEL导出下载功能

一、POST

post请求返回文件流转成blob下载

api.js

export const excelExport = (data) => {
    return request({
        url: '/api/export',
        method: 'post',
        data: data,
        responseType: 'blob'//responseType为blob,后端返回文件流，前端转换成Blob对象下载
    })
}

export.vue

<template>
  <div>
    <el-button type="primary" size="mini" @click="handleExcel" :loading="loading">导出EXCEL</el-button>
  </div>
</template>

<script>
import {excelExport} from "@/api.js";

export default {
  data() {
    return {
      loading: false,
      searchObj: {}
    };
  },
  methods: {
    handleExcel() {
      this.loading = true;
      excelExport(this.searchObj).then(res => {
        this.loading = false;
        let blob = new Blob([res.data], {type: "application/vnd.ms-excel;charset=utf-8"});
        if (window.navigator.msSaveBlob) {
          window.navigator.msSaveBlob(blob, Date.now() + ".xls");
        } else {
          let url = window.URL.createObjectURL(blob);
          let link = document.createElement("a");
          link.style.display = 'none';
          link.href = url;
          link.download = Date.now() + ".xls";
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        }
      }).catch(() => {
        this.loading = false;
      });
    }
  }
};
</script>

二、GET

get请求下载则是直接下载，无需做其他的操作

<template>
  <div>
    <el-button type="primary" size="mini" @click="handleExcel" :loading="loading">导出EXCEL</el-button>
  </div>
</template>

<script>
import {getToken} from "@/api.js";

export default {
  data() {
    return {
      loading: false,
      searchObj: {}
    };
  },
  methods: {
    handleExcel() {
      let queryStr = '';
      this.searchObj = {
        ...this.searchObj,
        token: getToken()
      }
      //拼接请求参数
      for (let key of Object.keys(this.searchObj)) {
        if (this.searchObj[key]) {
          if (queryStr == '') {
            queryStr = key + '=' + this.searchObj[key];
          } else {
            queryStr = queryStr + '&' + key + '=' + this.searchObj[key];
          }
        }
      }
      window.open(`/api/export?` + queryStr);
    }
  }
};
</script>

由于请求参数可能会携带特殊字符，需要对参数中特殊字符进行处理

特殊字符分类：

1. 用于分隔 URI 组件的标点符号：; / ? : @ & = + $ , #
2. 其他ASCII 标点符号进行编码： - \ _ . ! ~ \ * ' ( )

下面中列出了一些URL特殊符号及编码 十六进制值：

1. + URL 中+号表示空格  %2B
2. 空格 URL中的空格可以用+号或者编码  %20
3.  / 分隔目录和子目录  %2F
4.  ? 分隔实际的 URL 和参数  %3F
5.  % 指定特殊字符  %25
6.  # 表示书签  %23
7.  & URL 中指定的参数间的分隔符  %26
8.  = URL 中指定参数的值  %3D

 对特殊字符进行处理的方式

1. 使用replace() 方法进行替换，如果使用 replace("#","%23") 只会替换第一个字符，所以要使用全局替换 replace(/\#/g,"%23")

   handleExcel() {
         let queryStr = '';
         this.searchObj = {
           ...this.searchObj,
           token: getToken()
         }
         //拼接请求参数
         for (let key of Object.keys(this.searchObj)) {
           if (this.searchObj[key]) {
             let str = this.searchObj[key].replace(/\#/g, "%23").replace(/\&/g, "%26");
             if (queryStr == '') {
               queryStr = key + '=' + str;
             } else {
               queryStr = queryStr + '&' + key + '=' + str;
             }
           }
         }
         window.open(`/api/export?` + queryStr);
   }

2. 在拼接请求URL之前 可以先将参数值通过 encodeURIComponent 处理一下。encodeURIComponent() 函数对 URI 组件进行编码。此函数对特殊字符进行编码。此外，它还对以下字符进行编码： , / ? : @ & = + $ #

   handleExcel() {
         let queryStr = '';
         this.searchObj = {
           ...this.searchObj,
           token: getToken()
         }
         //拼接请求参数
         for (let key of Object.keys(this.searchObj)) {
           if (this.searchObj[key]) {
             if (queryStr == '') {
               queryStr = key + '=' + encodeURIComponent(this.searchObj[key]);
             } else {
               queryStr = queryStr + '&' + key + '=' + encodeURIComponent(this.searchObj[key]);
             }
           }
         }
         window.open(`/api/export?` + queryStr);
   }

   提示：请使用 decodeURIComponent() 函数对编码的 URI 组件进行解码。