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+iframe 实现无刷新载入整页的代码
Mar 17 Javascript
JQuery 选项卡效果(JS与HTML的分离)
Apr 01 Javascript
jquery对复选框(checkbox)的操作汇总
Jan 13 Javascript
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
Apr 29 Javascript
vuejs动态组件给子组件传递数据的方法详解
Sep 09 Javascript
微信小程序 picker 组件详解及简单实例
Jan 10 Javascript
Vue+SpringBoot开发V部落博客管理平台
Dec 27 Javascript
react+redux仿微信聊天界面
Jun 21 Javascript
kafka调试中遇到Connection to node -1 could not be established. Broker may not be available.
Sep 17 Javascript
JavaScript中的相等操作符使用详解
Dec 21 Javascript
如何优雅地取消 JavaScript 异步任务
Mar 22 Javascript
Node.js API详解之 tty功能与用法实例分析
Apr 27 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
松下Panasonic RF-B65电路分析
2021/03/02 无线电
php 什么是PEAR?(第三篇)
2009/03/19 PHP
采用header定义为文件然后readfile下载(隐藏下载地址)
2014/01/31 PHP
Linux系统下PHP-FPM的安装和配置教程
2015/08/17 PHP
PHP附件下载中文名称乱码的解决方法
2015/12/17 PHP
php实现xml与json之间的相互转换功能实例
2016/07/07 PHP
laravel在中间件内生成参数并且传递到控制器中的2种姿势
2019/10/15 PHP
给moz-firefox下添加IE方法和属性
2007/04/10 Javascript
模仿JQuery.extend函数扩展自己对象的js代码
2009/12/09 Javascript
javascript 运算数的求值顺序
2011/08/23 Javascript
js防止DIV布局滚动时闪动的解决方法
2014/10/30 Javascript
HTML5 实现的一个俄罗斯方块实例代码
2016/09/19 Javascript
百度地图API之百度地图退拽标记点获取经纬度的实现代码
2017/01/12 Javascript
关于Angular2 + node接口调试的解决方案
2017/05/28 Javascript
详解关于Vue版本不匹配问题(Vue packages version mismatch)
2018/09/17 Javascript
Vue一个案例引发的递归组件的使用详解
2018/11/15 Javascript
小程序实现录音上传功能
2019/11/22 Javascript
微信小程序scroll-view锚点链接滚动跳转功能
2019/12/12 Javascript
jQuery 选择器用法实例分析【prev + next】
2020/05/22 jQuery
js实现拖拽元素选择和删除
2020/08/25 Javascript
python合并文本文件示例
2014/02/07 Python
python中使用print输出中文的方法
2018/07/16 Python
Pycharm简单使用教程(入门小结)
2019/07/04 Python
Python Request爬取seo.chinaz.com百度权重网站的查询结果过程解析
2019/08/13 Python
python 浅谈serial与stm32通信的编码问题
2019/12/18 Python
tensorflow基于CNN实战mnist手写识别(小白必看)
2020/07/20 Python
移动端html5 meta标签的神奇功效
2016/01/06 HTML / CSS
加拿大高尔夫超市:Golf Town
2018/01/12 全球购物
New Balance法国官方网站:购买鞋子和服装
2019/09/01 全球购物
Expedia瑞典官网:预订度假屋、酒店、汽车租赁、机票等
2021/01/23 全球购物
为什么使用接口?
2014/08/13 面试题
出纳岗位职责范本
2013/12/01 职场文书
毕业实习证明范本
2015/06/16 职场文书
先进基层党组织主要事迹材料
2015/11/03 职场文书
《少年闰土》教学反思
2016/02/18 职场文书
如何利用python和DOS获取wifi密码
2021/03/31 Python