前端element表格导出excel

一:安装依赖

npm install  xlsx file-saver  --save

二:在组件中导入

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

三:给对应表格添加id,绑定方法


导出 Excel

四: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(自定义表头+自定义导出字段内容)

你可能感兴趣的:(前端)