vue+element表格导出为Excel文件


Posted in Javascript onSeptember 26, 2019

本文实例为大家分享了vue+element表格导出为Excel文件的具体代码,供大家参考,具体内容如下

vue+element表格导出为Excel文件

安装这三个依赖

npm install xlsx file-saver -S

npm install script-loader -S -D

组件代码

<template>
 <div>
  <el-button type="primary" @click="exportExcel">导出文件</el-button>
 
  <el-table
  :data="tableData"
  style="width: 100%"
  id='out-table'
  >
  <el-table-column
  prop="date"
  label="日期"
  width="180">
  </el-table-column>
  <el-table-column
  prop="name"
  label="姓名"
  width="180">
  </el-table-column>
  <el-table-column
  prop="address"
  label="地址">
  </el-table-column>
  </el-table>
 </div>
</template>
 
 
<script>
//引入安装的依赖
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
export default {
 name: 'demo5',
 data() {
  return {
   tableData: [{
   date: '2016-05-02',
   name: '王小虎',
   address: '上海市普陀区金沙江路 1518 弄'
   }, {
   date: '2016-05-04',
   name: '王小虎',
   address: '上海市普陀区金沙江路 1517 弄'
   }, {
   date: '2016-05-01',
   name: '王小虎',
   address: '上海市普陀区金沙江路 1519 弄'
   }, {
   date: '2016-05-03',
   name: '王小虎',
   address: '上海市普陀区金沙江路 1516 弄'
   }]
  }
  },
 methods:{
  // XLSX.uitls.table_to_book( 放入的是table 的DOM 节点 ) ,sheetjs.xlsx 即为导出表格的名字,可修改!
  exportExcel () {
   var wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
   var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
   try {
    FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'sheetjs.xlsx')
   } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
   return wbout
  },
 }
}
</script>
 
<style scoped>
.el-table{
 margin-top:30px;
}
</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
再论Javascript下字符串连接的性能
Mar 05 Javascript
19个很有用的 JavaScript库推荐
Jun 27 Javascript
JQuery入门——移除绑定事件unbind方法概述及应用
Feb 05 Javascript
js实现分享到随页面滚动而滑动效果的方法
Apr 10 Javascript
javascript实现rgb颜色转换成16进制格式
Jul 10 Javascript
jQuery实现鼠标滑过点击事件音效试听
Aug 31 Javascript
JavaScript利用Date实现简单的倒计时实例
Jan 12 Javascript
JS实现的验证身份证及获取地区功能示例
Jan 16 Javascript
jquery实现弹窗功能(窗口居中显示)
Feb 27 Javascript
Three.js实现简单3D房间布局
Dec 30 Javascript
JavaScript实现点击出现子菜单效果
Feb 08 Javascript
代码解析React中setState同步和异步问题
Jun 03 Javascript
利用layer实现表单完美验证的方法
Sep 26 #Javascript
vue点击当前路由高亮小案例
Sep 26 #Javascript
使用layer弹窗提交表单时判断表单是否输入为空的例子
Sep 26 #Javascript
vue框架制作购物车小球动画效果实例代码
Sep 26 #Javascript
IDEA安装vue插件图文详解
Sep 26 #Javascript
layui use 定义js外部引用函数的方法
Sep 26 #Javascript
解决layui的radio属性或别的属性没显示出来的问题
Sep 26 #Javascript
You might like
使用php从身份证号中获取一系列线索(星座、生肖、生日等)
2016/05/11 PHP
PHP Class SoapClient not found解决方法
2018/01/20 PHP
PHP实现微信公众号验证Token的示例代码
2019/12/16 PHP
javascript实现的基于金山词霸网络翻译的代码
2010/01/15 Javascript
jquery实现文本框数量加减功能的例子分享
2014/05/10 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2014/09/04 Javascript
javascript实现带下拉子菜单的导航菜单效果
2015/05/14 Javascript
详解JavaScript的流程控制语句
2015/11/30 Javascript
javascript数据类型详解
2017/02/07 Javascript
Node.js实现文件上传的示例
2017/06/28 Javascript
javascript 取小数点后几位几种方法总结
2017/08/02 Javascript
js自定义trim函数实现删除两端空格功能
2018/02/09 Javascript
iview tabs 顶部导航栏和模块切换栏的示例代码
2019/03/04 Javascript
微信小程序如何获取用户头像和昵称
2019/09/23 Javascript
初学Python实用技巧两则
2014/08/29 Python
Python计算斗牛游戏概率算法实例分析
2017/09/26 Python
python+opencv实现阈值分割
2018/12/26 Python
python实现单机五子棋
2020/08/28 Python
HTML5 History API 实现无刷新跳转
2016/01/11 HTML / CSS
Marc Jacobs官方网站:美国奢侈品牌
2017/08/29 全球购物
全球立体声:World Wide Stereo
2018/09/29 全球购物
Armor Lux法国官方网站:水手服装、成衣和内衣
2020/05/26 全球购物
Tea Collection官网:一家位于旧金山的童装公司
2020/08/07 全球购物
路由表示做什么用的?在linux环境中怎么来配置一条默认路由?
2013/06/07 面试题
部队领导证婚词
2014/01/12 职场文书
毕业生自荐书
2014/02/02 职场文书
八项规定个人对照检查材料思想汇报
2014/09/25 职场文书
债务纠纷代理词
2015/05/25 职场文书
2015大学迎新标语
2015/07/16 职场文书
2015年小学重阳节活动总结
2015/07/29 职场文书
红领巾广播站广播稿
2015/08/19 职场文书
三好学生主要事迹材料
2015/11/03 职场文书
学习计划是什么
2019/04/30 职场文书
python保存大型 .mat 数据文件报错超出 IO 限制的操作
2021/05/10 Python
详解Redis基本命令与使用场景
2021/06/01 Redis
排查Tomcat进程假死的问题
2022/05/06 Servers