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();
        }
      },
相关推荐
汉得数字平台15 分钟前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹22 分钟前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_5 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20155 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
拾光拾趣录8 小时前
括号生成算法
前端·算法
拾光拾趣录9 小时前
requestIdleCallback:让你的网页如丝般顺滑
前端·性能优化
前端 贾公子9 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
拾光拾趣录9 小时前
链表合并:双指针与递归
前端·javascript·算法
@大迁世界9 小时前
前端:优秀架构的坟墓
前端·架构
拼图2099 小时前
element-plus——图标推荐
javascript·vue.js·elementui