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();
        }
      },
相关推荐
zhanshuo8 分钟前
不依赖框架,如何用 JS 实现一个完整的前端路由系统
前端·javascript·html
火柴盒zhang9 分钟前
websheet在线电子表格(spreadsheet)在集团型企业财务报表中的应用
前端·html·报表·合并·spreadsheet·websheet·集团财务
khalil11 分钟前
基于 Vue3实现一款简历生成工具
前端·vue.js
拾光拾趣录17 分钟前
浏览器对队头阻塞问题的深度优化策略
前端·浏览器
用户81221993672218 分钟前
[已完结]后端开发必备高阶技能--自研企业级网关组件(Netty+Nacos+Disruptor)
前端
万少22 分钟前
2025中了 聊一聊程序员为什么都要做自己的产品
前端·harmonyos
abigale032 小时前
webpack+vite前端构建工具 -11实战中的配置技巧
前端·webpack·node.js
专注API从业者3 小时前
构建淘宝评论监控系统:API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle
Joker`s smile3 小时前
Chrome安装老版本、不同版本,自制便携版本用于前端调试
前端·chrome
weixin_416639973 小时前
爬虫工程师Chrome开发者工具简单介绍
前端·chrome·爬虫