vue中el-table前端如何導出excel數(shù)據(jù)表格

更新時間：2024年07月15日 10:46:12 作者：~張小八~

這篇文章主要介紹了vue中el-table前端如何導出excel數(shù)據(jù)表格,本文通過實例代碼給大家介紹的非常詳細,需要的朋友可以參考下

一、el-table為正常時，導出方法如下：

1.添加導出按鈕

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

2.導出方法

 // web導出匯總單excel
      webExportTotalExcel(){
        // 獲取表格數(shù)據(jù)
        //const tableData = this.userTotalList;
        const tableData = this.userTotalList.map(row => {  //創(chuàng)建一個新的數(shù)組，處理null值
          return Object.keys(row).reduce((acc, key) => {
            acc[key] = row[key] === null ? '' : row[key];
            return acc;
          }, {});
        });
        // 構建 Excel 文件內(nèi)容
        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>';
        // 添加表格數(shù)據(jù)
        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 文件內(nèi)容
        excelContent += '</table></body></html>';
        // 創(chuàng)建 Blob 對象
        const blob = new Blob([excelContent], { type: 'application/vnd.ms-excel' });
        // 創(chuàng)建鏈接并觸發(fā)下載
        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中列為循環(huán)數(shù)據(jù)時，如下圖所示：

在這里插入圖片描述

導出方法如下：
1.導出按鈕：

<el-button class="greenLinearbg dc"  size="small"  @click="webExportHistoryExcel('','歷史賬單','el-table__fixed-right',0,'message')" v-if="historyBillShow">導出</el-button>

2.導出方法為：

  // web導出歷史賬單excel
      webExportHistoryExcel(id,excelName,className,number=0){
        const loading = this.$loading({
          lock: true,
          text: '數(shù)據(jù)導出中',
          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();
        }
      },

到此這篇關于vue中el-table前端導出excel數(shù)據(jù)表格的文章就介紹到這了,更多相關vue el-table導出excel數(shù)據(jù)表格內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: