vue中导出Excel表格的实现代码


Posted in Javascript onOctober 18, 2018

项目中我们可能会碰到导出Excel文件的需求,一般后台管理系统中居多,将table中展示的数据导出保存到本地。当然我们也可以通过一些处理来修改要导出的数据格式,具体需求具体对待。

1、首先我们需要安装3个依赖,file-saver、xlsx和script-loader。

使用npm安装:

npm install file-saver xlsx -S
npm install script-loader -D

使用yarn安装:

yarn add file-saver xlsx -S
yarn add script-loader -D

2、在/src目录下新建一个vendor(名字也可自取)文件夹,存入Blob.js和Export2Excel.js文件。
Blob.js和Export2Excel.js文件地址:https://github.com/han6054/export-excel

当然也可以自行下载,或许会有版本的问题吧。

3、在/build/webpack.base.conf.js中新增一行代码(vendor的名字必须和第二步新建的文件夹名字相同)。

resolve: {
 extensions: ['.js', '.vue', '.json'],
 alias: {
  'vue$': 'vue/dist/vue.esm.js',
  '@': resolve('src'),
  'vendor': path.resolve(__dirname, '../src/vendor') // 新增这一行
 }
}

4、在vue项目中的使用。

/**
 * excel导出
 */
exportTable () {
 // this.DefaultData.exportExcelMax限制一下导出的总条数
 if (this.totals <= this.DefaultData.exportExcelMax) {
  this.$confirm('确定要导出当前<strong>' + this.totals + '</strong>条数据?', '提示', {
   dangerouslyUseHTMLString: true,
   confirmButtonText: '确定',
   cancelButtonText: '取消'
  }).then(() => {
   this.getExpportData()
  }).catch(() => {
  })
 } else {
  this.$confirm('当前要导出的<strong>' + this.totals + '</strong>条数据,数据量过大,不能一次导出!<br/>建议分时间段导出所需数据。', '提示', {
   dangerouslyUseHTMLString: true,
   showCancelButton: false
  }).then(() => {
  }).catch(() => {
  })
 }
},

/**
 * 对导出数据格式处理
 */
formatJson (filterVal, jsonData) {
 return jsonData.map(v => filterVal.map(j => v[j]))
},

/**
 * 导出的列表数据
 */
getExpportData: function () {
 const loading = this.$loading({
  lock: true,
  text: '正在导出,请稍等......',
  spinner: 'el-icon-loading',
  background: 'rgba(0, 0, 0, 0.7)'
 })
 const data = {
  phoneNo: this.formInline.phoneNo,
  userName: this.formInline.userName,
  amount: this.formInline.amount,
  fee: this.formInline.fee,
  currentPage: this.currentPage,
  pageSize: this.DefaultData.exportExcelMax
 }
 // 这里封装了axios,根据自身情况修改即可
 this.http(
  this.ApiSetting.orderExport,
  data
 ).then((res) => {
  // handleDataList这里可以对导出的数据根据需求做下处理
  const handleDataList = res.data.list
  for (let i in res.data.list) {
   handleDataList[i].amount = res.data.list[i].amount * 100
   handleDataList[i].fee = res.data.list[i].fee + '%'
  }
  if (res.data.list.length > 0) {
   require.ensure([], () => {
    /* eslint-disable */
    // 这里的径路要修改正确
    const { export_json_to_excel } = require('../../vendor/Export2Excel')
    /* eslint-enable */
    // 导出的表头
    const tHeader = ['手机号码', '用户姓名', '交易金额', '手续费']
    // 导出表头要对应的数据
    const filterVal = ['phoneNo', 'userName', 'amount', 'fee']
    // 如果对导出的数据没有可处理的需求,把下面的handleDataList换成res.data.list即可,删掉上面相应的代码
    const data = this.formatJson(filterVal, handleDataList)
    // this.DefaultData.formatLongDate.getNow()自己写的一个获取当前时间,方便查找导出后的文件。根据需求自行可处理。
    export_json_to_excel(tHeader, data, '订单查询列表-' + this.DefaultData.formatLongDate.getNow())
    this.$message({
     message: '导出成功',
     duration: 2000,
     type: 'success'
    })
   })
  } else {
   this.$message({
    message: '数据出?,请联系管理员',
    duration: 2000,
    type: 'warning'
   })
  }
  loading.close()
 }, error => {
  console.log(error)
  loading.close()
 })
}

在需要导出功能的页面加入上面三个方法,修改好需要注意的事项,导出Excel表格就ok了。

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

Javascript 相关文章推荐
关于__defineGetter__ 和__defineSetter__的说明
May 12 Javascript
javascript实现的网页局布刷新效果
Dec 01 Javascript
javascript 无提示关闭窗口脚本
Aug 17 Javascript
jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
Feb 26 Javascript
jQuery中parent()方法用法实例
Jan 07 Javascript
js实现从右向左缓缓浮出网页浮动层广告的方法
May 09 Javascript
js实现固定显示区域内自动缩放图片的方法
Jul 18 Javascript
浅析AngularJs HTTP响应拦截器
Dec 28 Javascript
jquery对象访问是什么及使用方法介绍
May 03 Javascript
vue.js学习之递归组件
Dec 13 Javascript
JavaScript设计模式之代理模式详解
Jun 09 Javascript
基于JavaScript中字符串的match与replace方法(详解)
Dec 04 Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
Oct 18 #Javascript
vue 指令之气泡提示效果的实现代码
Oct 18 #Javascript
使用JS获取页面上的所有标签
Oct 18 #Javascript
深入理解 Koa 框架中间件原理
Oct 18 #Javascript
JS实现十分钟倒计时代码实例
Oct 18 #Javascript
基于Vue实现可以拖拽的树形表格实例详解
Oct 18 #Javascript
JavaScript的词法结构精华篇
Oct 17 #Javascript
You might like
暴雪前总裁遗憾:没尽早追赶Dota 取消星际争霸幽灵
2020/03/08 星际争霸
松下Panasonic RF-B65电路分析
2021/03/02 无线电
Can't create/write to file 'C:\WINDOWS\TEMP\...MYSQL报错解决方法
2011/06/30 PHP
destoon切换城市后实现logo旁边显示地区名称的方法
2014/08/21 PHP
关于PHP中字符串与多进制转换函数的实例代码
2016/11/03 PHP
解决Laravel5.x的php artisan migrate数据库迁移创建操作报错SQLSTATE[42000]
2020/04/06 PHP
location.href 在IE6中不跳转的解决方法与推荐使用代码
2010/07/08 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
2011/06/27 Javascript
javascript类型转换示例
2014/04/29 Javascript
浅谈jQuery.easyui的datebox格式化时间
2015/06/25 Javascript
轻松学习jQuery插件EasyUI EasyUI实现树形网络基本操作(2)
2015/11/30 Javascript
基于JavaScript实现通用tab选项卡(通用性强)
2016/01/07 Javascript
jQuery添加和删除输入文本框标签代码
2016/05/20 Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
2016/07/28 Javascript
prototype.js简单实现ajax功能示例
2017/10/18 Javascript
React中使用UEditor百度富文本的方法
2018/08/22 Javascript
如何使用CSS3+JQuery实现悬浮墙式菜单
2019/06/18 jQuery
jQuery实现可编辑的表格
2019/12/11 jQuery
[05:53]完美世界携手游戏风云打造 卡尔工作室观战系统篇
2013/04/22 DOTA
[04:31]2016国际邀请赛中国区预选赛妖精采访
2016/06/27 DOTA
Python计算已经过去多少个周末的方法
2015/07/25 Python
Python简单的制作图片验证码实例
2017/05/31 Python
python中的set实现不重复的排序原理
2018/01/24 Python
Python切割图片成九宫格的示例代码
2020/03/10 Python
享受加州生活方式的时尚舒适:XCVI
2018/07/09 全球购物
阿姆斯特丹城市卡:Amsterdam Pass
2019/12/01 全球购物
小米俄罗斯授权商店:Xiaomi俄罗斯
2019/12/08 全球购物
山海经纬软件测试笔试题和面试题
2013/04/02 面试题
应届毕业生如何写求职信
2014/02/16 职场文书
西湖英语导游词
2015/02/06 职场文书
2015年世界无烟日演讲稿
2015/03/18 职场文书
公司酒会主持词
2015/07/02 职场文书
​(迎国庆)作文之我爱我的祖国
2019/09/19 职场文书
php修改word的实例方法
2021/11/17 PHP
win10电脑右下角输入法图标不见了?Win10右下角不显示输入法的解决方法
2022/07/23 数码科技
了解MySQL查询语句执行过程(5大组件)
2022/08/14 MySQL