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 相关文章推荐
js bind 函数 使用闭包保存执行上下文
Dec 26 Javascript
从阶乘函数对比Javascript和C#的异同
May 31 Javascript
基于JavaScript的操作系统你听说过吗?
Jan 28 Javascript
jquery使用on绑定a标签无效 只能用live解决
Jun 02 Javascript
JS实现课堂随机点名和顺序点名
Mar 09 Javascript
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
Aug 26 Javascript
vue使用keep-alive实现数据缓存不刷新
Oct 21 Javascript
p5.js入门教程和基本形状绘制
Mar 15 Javascript
vue组件横向树实现代码
Aug 02 Javascript
在微信小程序中渲染HTML内容的方法示例
Sep 28 Javascript
vuedraggable+element ui实现页面控件拖拽排序效果
Jul 29 Javascript
vue如何获取自定义元素属性参数值的方法
May 14 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
如何过滤高亮显示非法字符
2006/10/09 PHP
dedecms 制作模板中使用的全局标记图文教程
2007/03/11 PHP
PHP代码优化技巧小结
2015/09/29 PHP
php实现URL加密解密的方法
2016/11/17 PHP
jquery星级插件、支持页面中多次使用
2012/03/25 Javascript
iframe子页面获取父页面元素的方法
2013/11/05 Javascript
jQuery中.live()方法的用法深入解析
2013/12/30 Javascript
js在输入框屏蔽按键,只能键入数字的示例代码
2014/01/03 Javascript
jquery 实现两级导航菜单附效果图
2014/03/07 Javascript
js随机生成26个大小写字母
2016/02/12 Javascript
javascript设计模式之Adapter模式【适配器模式】实现方法示例
2017/01/13 Javascript
微信小程序 开发之滑块视图容器(swiper)详解及实例代码
2017/02/22 Javascript
详解node如何让一个端口同时支持https与http
2017/07/04 Javascript
React/Redux应用使用Async/Await的方法
2017/11/16 Javascript
微信小程序实现弹出菜单
2018/07/19 Javascript
如何对react hooks进行单元测试的方法
2019/08/14 Javascript
[48:23]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#1COL VS EG第一局
2016/03/05 DOTA
python dataframe常见操作方法:实现取行、列、切片、统计特征值
2018/06/09 Python
python中的数组赋值与拷贝的区别详解
2019/11/26 Python
python3 dict ndarray 存成json,并保留原数据精度的实例
2019/12/06 Python
浅谈tensorflow 中的图片读取和裁剪方式
2020/06/30 Python
美国网上购买眼镜:Eyeconic
2017/07/29 全球购物
Nike挪威官网:Nike.com (NO)
2018/11/26 全球购物
AJAX的全称是什么
2012/11/06 面试题
大四学生毕业自荐信
2013/11/07 职场文书
小学少先队活动方案
2014/02/18 职场文书
信息科学与技术专业求职信范文
2014/02/20 职场文书
信息学院毕业生自荐信范文
2014/03/04 职场文书
反邪教标语
2014/06/23 职场文书
会计专业应届生自荐信
2014/06/28 职场文书
讲文明懂礼貌演讲稿
2014/09/11 职场文书
2014年班务工作总结
2014/12/02 职场文书
拾金不昧表扬稿
2015/01/16 职场文书
公司行政管理制度范本
2015/08/05 职场文书
css3 filter属性的使用简介
2021/03/31 HTML / CSS
将Python代码打包成.exe可执行文件的完整步骤
2021/05/12 Python