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 相关文章推荐
各种页面定时跳转(倒计时跳转)代码总结
Oct 24 Javascript
Javascript 读取操作Sql中的Xml字段
Oct 09 Javascript
jQuery+Ajax实现无刷新分页
Oct 30 Javascript
HTML5 JS压缩图片并获取图片BASE64编码上传
Nov 16 Javascript
微信小程序的动画效果详解
Jan 18 Javascript
详解angular 中的自定义指令之详解API
Jun 20 Javascript
vue.js根据代码运行环境选择baseurl的方法
Feb 28 Javascript
angularJs中$scope数据序列化的实例
Sep 30 Javascript
微信小程序bindtap事件与冒泡阻止详解
Aug 08 Javascript
深入理解令牌认证机制(token)
Aug 22 Javascript
vue动画—通过钩子函数实现半场动画操作
Aug 09 Javascript
OpenLayers3加载常用控件使用方法详解
Sep 25 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
对javascript和select部件的结合运用
2006/10/09 PHP
在服务端进行目录建立、删除,文件上传、删除的过程的php代码
2008/09/10 PHP
PHP扩展模块memcached长连接使用方法分析
2014/12/24 PHP
php导入大量数据到mysql性能优化技巧
2014/12/29 PHP
thinkPHP实现将excel导入到数据库中的方法
2016/04/22 PHP
php从身份证获取性别和出生年月
2017/02/09 PHP
浅谈PHP中如何实现Hook机制
2017/11/14 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
php弹出提示框的是实例写法
2019/09/26 PHP
讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
2007/04/12 Javascript
jQuery的Ajax时无响应数据的解决方法
2010/05/25 Javascript
js判断undefined类型示例代码
2014/02/10 Javascript
利用a标签自动解析URL分析网址实例
2014/10/20 Javascript
推荐一个自己用的封装好的javascript插件
2015/01/29 Javascript
JavaScript使用function定义对象并调用的方法
2015/03/23 Javascript
js简单判断移动端系统的方法
2016/02/25 Javascript
原生js实现自由拖拽弹窗代码demo
2016/06/29 Javascript
js完整倒计时代码分享
2016/09/18 Javascript
vue2.0 实现导航守卫(路由守卫)
2018/05/21 Javascript
微信小程序picker组件关于objectArray数据类型的绑定方法
2019/03/13 Javascript
原生JS实现汇率转换功能代码实例
2020/05/13 Javascript
举例讲解Python中的Null模式与桥接模式编程
2016/02/02 Python
Python实现html转换为pdf报告(生成pdf报告)功能示例
2019/05/04 Python
python的命名规则知识点总结
2019/10/04 Python
python脚本实现mp4中的音频提取并保存在原目录
2020/02/27 Python
解决django FileFIELD的编码问题
2020/03/30 Python
使用纯 CSS 创作一个脉动 loader效果的源码
2018/09/28 HTML / CSS
Carrs Silver官网:英国著名的银器品牌
2020/08/29 全球购物
英文翻译的自我评价语句
2013/10/04 职场文书
大学生的应聘自我评价
2013/12/13 职场文书
幼儿园大班个人总结
2015/02/28 职场文书
《假如》教学反思
2016/02/17 职场文书
七年级之家长会发言稿范文
2019/09/04 职场文书
详解MindSpore自定义模型损失函数
2021/06/30 Python
Python+Selenium自动化环境搭建与操作基础详解
2022/03/13 Python
源码分析Redis中 set 和 sorted set 的使用方法
2022/03/22 Redis