前端element表格导出excel

一:安装依赖

复制代码
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(自定义表头+自定义导出字段内容)

相关推荐
街尾杂货店&25 分钟前
css word-spacing属性
前端·css
千叶寻-28 分钟前
正则表达式
前端·javascript·后端·架构·正则表达式·node.js
光影少年6 小时前
angular生态及学习路线
前端·学习·angular.js
无尽夏_8 小时前
HTML5(前端基础)
前端·html·html5
Jagger_8 小时前
敏捷开发流程-精简版
前端·后端
FIN66688 小时前
昂瑞微冲刺科创板:创新驱动,引领射频芯片国产化新征程
前端·安全·前端框架·信息与通信·芯片
GISer_Jing8 小时前
ByteDance——jy真题
前端·javascript·面试
睡美人的小仙女1278 小时前
浏览器为何屏蔽本地文件路径?
前端
真的想不出名儿8 小时前
Vue 中 props 传递数据的坑
前端·javascript·vue.js
FIN66688 小时前
昂瑞微:深耕射频“芯”赛道以硬核实力冲刺科创板大门
前端·人工智能·科技·前端框架·信息与通信·智能