js implements two ways to export data to excel with pure front-end

Blog reference

Export data to excel in vue

1. The back-end export interface returns the string format data format

   <el-button type="primary" plain @click="Ex">导出</el-button>
   Ex() {
    
    
       //str=后端导出接口--返回的数据内容
       let str = `指标名称,粒度,指标值,设备名称,指标来源,指标时间,
从4G网络切换入5G网络尝试次数	,,171	,ceshi	,核心网	,2020-12-09 13:00:00	,
从4G网络切换入5G网络尝试次数	,,171	,ceshi	,核心网	,2020-12-09 14:00:00	,
从4G网络切换入5G网络尝试次数	,,171	,ceshi	,核心网	,2020-12-09 15:00:00	,
从4G网络切换入5G网络尝试次数	,,171	,ceshi	,核心网	,2020-12-09 16:00:00	,
从4G网络切换入5G网络尝试次数	,1	,171	,ceshi	,核心网	,2020-12-09 17:00:00	,
从4G网络切换入5G网络尝试次数	,1	,171	,ceshi	,核心网	,2020-12-09 18:00:00	,
从4G网络切换入5G网络尝试次数	,1	,171	,ceshi	,核心网	,2020-12-09 19:00:00	,
从4G网络切换入5G网络尝试次数	,1	,171	,ceshi	,核心网	,2020-12-09 20:00:00	,`;
       //encodeURIComponent解决中文乱码
       let uri = "data:text/xls;charset=utf-8,\ufeff" + encodeURIComponent(str);
       //通过创建a标签实现
       var link = document.createElement("a");
       link.href = uri;
       //对下载的文件命名
       link.download = "json数据表.xls";
       document.body.appendChild(link);
       link.click();
       document.body.removeChild(link);
   },

2. The back-end export interface returns the binary file stream data format

   /**
    * 通过post方式导出文件
    * @param      key                 请求定义静态地址
    * @param      data                请求参数
    * @return     {Promise<*>}        返回promise对象
   */
   let postFileExport = (key, data, params, base) => {
    
    
       return Ajax({
    
    
           method: 'POST',
           url: UrlConfig[key],
           responseType: 'blob',
           data,
           params,
           base
       });
   };

   //函数封装
   /* 页面导出方法: ids:勾选导出，tableData：表格数据， urlKey：请求地址，fileName: 导出文件名 */
   async exportEvent(ids, tableData, urlKey, fileName) {
    
    
       console.log("导出", this.exportData)
       if (!urlKey) return;
       if (ids.length <= 0 && tableData.length <= 0) {
    
    
           this.$message.warning('没有数据提供导出');
           return;
       }

       let hasIds = ids.length > 0;
       if (tableData.length > 0) {
    
    
       this.tableData.loading = true;
       let result = await postFileExport(urlKey, hasIds ? {
    
    ids: JSON.stringify(ids)} : this.exportData);
       this.tableData.loading = false;
       if (!!result) {
    
    
           if (window.navigator && window.navigator.msSaveOrOpenBlob) {
    
    
               window.navigator.msSaveOrOpenBlob(new Blob( [result] ,  {
    
     type: "application/vnd.ms-excel" },  fileName )
                            , fileName + ".xls")
                            return 
           }
           let el = document.createElement("a");
           document.body.appendChild(el);
           el.setAttribute('download', fileName + ".xls");                        
           el.href = window.URL.createObjectURL(new Blob([result], {
    
     type: "application/vnd.ms-excel" }));
             el.click();
             document.body.removeChild(el);
           } else {
    
    
               this.$message.error('导出数据错误');
           }
      }
   },

• Page usage

   <el-button type="primary" plain @click="exportExcel">导出</el-button>
   
   async getTableData() {
    
    
       this.tableData.loading = true;
       let _params = {
    
    
         userId: this.userId,
         kpiname: this.queryParams.kpiname, //指标名称-下拉框选中值
         timed: this.queryParams.timed, //粒度-下拉框选中值
         userlabel: this.neName, //topo网元名称
       };
       this.exportData = JSON.parse(JSON.stringify(_params));
       let _result = await getDataRequest("COMINFO_PERFLIST", {
    
    
         page: this.pagingData.current,
         size: this.pagingData.size,
         fromTime: this.queryParams.timeRange[0],
         toTime: this.queryParams.timeRange[1],
         serviceType: this.tagMenu == "全部" ? "" : this.tagMenu, //来源
         ..._params,
       });
       this.tableData.loading = false;
       if (!!_result && _result.code === 200) {
    
    
         this.tableData.data = _result.data.list;
         this.pagingData.total = _result.data.total;
       } else {
    
    
         this.$message.error(_result.msg);
       }
     },
     exportExcel() {
    
    
       this.exportEvent("", this.tableData.data, "COMINFO_PERFEXPORT", "性能列表导出_" + Tool.dateFormat('YYYYMMDDhhmmss'));
   },