前端element表格导出excel

wytraining2023-09-07 16:53

一：安装依赖

复制代码

npm install  xlsx file-saver  --save

二：在组件中导入

复制代码

import FileSaver from 'file-saver'
import XLSX from 'xlsx'

三：给对应表格添加id，绑定方法

复制代码

<el-table id='tableDom'>
<el-button @click="exportExcel">导出 Excel</el-button>

四：methods中写入方法

复制代码

const exportExcel = () => {
  var ws1 = XLSX.utils.table_to_book(document.querySelector('#tableDom'));//对应要导出的表格id

  /* get binary string as output */
  var wbOut = XLSX.write(ws1, {
    bookType: "xlsx",
    bookSST: true,
    type: "array"
  });

  try {
    FileSaver.saveAs(
      new Blob([wbOut], {type: "application/octet-stream"}),
       "demo.xlsx"  // 可以自定义导出文件的名称
    );
  } catch (e) {
    if (typeof console !== "undefined") console.log(e, wbOut);
  }
  return wbOut;
}

element-ui表格导出及导出所有分页数据
 VUE element-ui 之table表格导出Excel（自定义表头+自定义导出字段内容）