vue el-table导出excel表

最新推荐文章于 2025-06-19 22:12:46 发布

撸猫的咸鱼

最新推荐文章于 2025-06-19 22:12:46 发布

阅读量641

点赞数

CC 4.0 BY-SA版权

分类专栏：工作

本文链接：https://blog.csdn.net/lgplrcode/article/details/118703113

工作专栏收录该内容

24 篇文章

订阅专栏

1、在src的utils创建excel.js


//引入依赖
import FileSaver from 'file-saver';
import XLSX from 'xlsx';


// id绑定的id，title表格名称
export const excel = (id, title) => {
  /* generate workbook object from table */
  //  判断要导出的节点中是否有fixed的表格，如果有，转换excel时先将该dom移除，然后append回去，
  let fix = document.querySelector('.el-table__fixed');
  let wb;
  if (fix) {
    wb = XLSX.utils.table_to_book(document.querySelector('#'+id).removeChild(fix));
    document.querySelector('#'+id).appendChild(fix);
  } else {
    wb = XLSX.utils.table_to_book(document.querySelector('#'+id));
  }


  //网上wb = XLSX.utils.table_to_book(document.querySelector('#'+id));直接这样写，如果存在固定列，导出的excel表格会重复两遍

  /* get binary string as output */
  let wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' });
  try {
    FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), title+'.xlsx')
  } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
  return wbout
};

2、在el-table添加id

   id="out-table"

  <el-table
      id="out-table"
      v-loading="listLoading"
      :data="list"
      element-loading-text="载入中"
      border
      fit
      stripe
      highlight-current-row
      :height="tableHeight"
      width="100%"
    >

3、excel 导出

  <el-button style="width: 100px" type="primary" @click="exportExcel(info.taskId)">
              导出报表
            </el-button>
 import {excel} from '@/utils/excel.js'

      exportExcel () {//导出表格 传入两个参绑定的id和表格名称
        excel('out-table','达人表')
      },