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();
        }
      },
相关推荐
abigale0320 分钟前
webpack+vite前端构建工具 -11实战中的配置技巧
前端·webpack·node.js
专注API从业者39 分钟前
构建淘宝评论监控系统:API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle
Joker`s smile43 分钟前
Chrome安装老版本、不同版本,自制便携版本用于前端调试
前端·chrome
weixin_416639971 小时前
爬虫工程师Chrome开发者工具简单介绍
前端·chrome·爬虫
我是如子啊1 小时前
【解决“此扩展可能损坏”】Edge浏览器(chrome系列通杀))扩展损坏?一招保留数据快速修复
前端·chrome·edge
灵性花火1 小时前
Qt的前端和后端过于耦合(0/7)
开发语言·前端·qt
孤水寒月5 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀5 小时前
html初学者第一天
前端·html
速易达网络7 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
耶啵奶膘7 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app