vue中el-table前端导出excel数据表格

一、el-table为正常时，导出方法如下：

1.添加导出按钮

c 复制代码

        <el-button class="greenLinearbg dc"  size="small"  @click="webExportTotalExcel()" v-if="totalBillShow">导出</el-button>

2.导出方法

c 复制代码

 // web导出汇总单excel
      webExportTotalExcel(){
        // 获取表格数据
        //const tableData = this.userTotalList;
        const tableData = this.userTotalList.map(row => {  //创建一个新的数组，处理null值
          return Object.keys(row).reduce((acc, key) => {
            acc[key] = row[key] === null ? '' : row[key];
            return acc;
          }, {});
        });

        // 构建 Excel 文件内容
        let excelContent = `<html><head><meta charset="UTF-8"></head><body><table border="1">`;

        // 添加表头
        excelContent += '<tr>';
        for (const column of this.$refs.tableRef.columns) {
          if (column.property) {
            excelContent += `<th>${column.label}</th>`;
          }
        }
        excelContent += '</tr>';

        // 添加表格数据
        for (const row of tableData) {
          excelContent += '<tr>';
          for (const column of this.$refs.tableRef.columns) {
            if (column.property) {
              excelContent += `<td>${row[column.property]}</td>`;
            }
          }
          excelContent += '</tr>';
        }

        // 构建完整的 Excel 文件内容
        excelContent += '</table></body></html>';

        // 创建 Blob 对象
        const blob = new Blob([excelContent], { type: 'application/vnd.ms-excel' });

        // 创建链接并触发下载
        const link = document.createElement("a");
        link.href = URL.createObjectURL(blob);
        link.download = '汇总单.xlsx'; // 设置默认文件名
        link.style.display = "none";
        document.body.appendChild(link);
        link.click();
        window.URL.revokeObjectURL(link.href);
      },

二、el-table中列为循环数据时，如下图所示：

导出方法如下：

1.导出按钮：

c 复制代码

<el-button class="greenLinearbg dc"  size="small"  @click="webExportHistoryExcel('','历史账单','el-table__fixed-right',0,'message')" v-if="historyBillShow">导出</el-button>

2.导出方法为：

c 复制代码

  // web导出历史账单excel
      webExportHistoryExcel(id,excelName,className,number=0){
        const loading = this.$loading({
          lock: true,
          text: '数据导出中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        const columns = this.$refs.message.columns,outputColumns=[];
        for(let i=0,len=columns.length;i<len;i++){
          if('label' in columns[i]){
            if('prop' in columns[i])
              outputColumns.push(columns[i].prop);
            else if('slot' in columns[i] && columns[i].slot!='action' && columns[i].label!='操作')
              outputColumns.push(columns[i].slot);
          }
        }
        if(this.$refs.message.selectRow=='all'){
          request({
            url:'/system/nonResidentYhzd/selectYhzdTable',
            method:'post',
            data:{pageNum:1,pageSize:this.queryParams.total}
          }).then(response => {
            ExportUtils.exportExcel(id,excelName,'',className,number,this.$refs.message.selectRow,response.rows,outputColumns);
            loading.close();
          });
        }
        else{
          ExportUtils.exportExcel(id,excelName,'',className,number,this.$refs.message.selectRow,this.$refs.message.selectList,outputColumns);
          loading.close();
        }
      },