前端element表格导出excel-优快云博客

本文链接：https://blog.youkuaiyun.com/wytraining/article/details/132712305

一：安装依赖

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;
}

五：若需要根据查询条件，导出不同的表格，可以通过绑定动态id来实现（若id不变，会导致导出的始终是第一次查询到的数据）

<el-table :id="tableId">

查询表格数据时，更新tableId

const tableId = ref('')
const getDataList = async () => {
  let res = await dataApi.getData()
  const refresh = new Date().getTime() + ''
  tableId.value = `department${refresh}`
  dataList.value = res.data
}

const exportExcel = () => {
  // 将原先写死的id替换，其余保持一致即可（同步骤四）
  var ws1 = XLSX.utils.table_to_book(document.querySelector(`#${tableId.value}`));//对应要导出的表格id
}

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