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 相关文章推荐
利用JQuery制作符合Web标准的QQ弹出消息
Jan 14 Javascript
jquery序列化方法实例分析
Jun 10 Javascript
Angular页面间切换及传值的4种方法
Nov 04 Javascript
JS中传递参数的几种不同方法比较
Jan 20 Javascript
js实现移动端编辑添加地址【模仿京东】
Apr 28 Javascript
js链表操作(实例讲解)
Aug 29 Javascript
浅谈Koa服务限流方法实践
Oct 23 Javascript
AngularJS2 与 D3.js集成实现自定义可视化的方法
Dec 01 Javascript
js实现通过开始结束控制的计时器
Feb 25 Javascript
layui实现二维码弹窗、并下载到本地的方法
Sep 25 Javascript
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
Oct 30 Javascript
如何在vue 中使用柱状图 并自修改配置
Jan 21 Vue.js
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
PHP的FTP学习(四)
2006/10/09 PHP
提高PHP编程效率 引入缓存机制提升性能
2010/02/15 PHP
php笔记之:AOP的应用
2013/04/24 PHP
smarty模板引擎中自定义函数的方法
2015/01/22 PHP
Yii实现微信公众号场景二维码的方法实例
2020/08/30 PHP
AJAX使用了UpdatePanel后无法使用alert弹出脚本
2010/04/02 Javascript
UserData用法总结 lanyu出品
2010/07/01 Javascript
使用jQueryMobile实现滑动翻页效果的方法
2015/02/04 Javascript
javascript中的正则表达式使用指南
2015/03/01 Javascript
jQuery.each使用详解
2015/07/07 Javascript
HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
2015/11/25 Javascript
基于JS实现Android,iOS一个手势动画效果
2016/04/27 Javascript
JavaScript中闭包之浅析解读(必看篇)
2016/08/25 Javascript
Nodejs下DNS缓存问题浅析
2016/11/16 NodeJs
javaScript实现复选框全选反选事件详解
2020/11/20 Javascript
Vue.js自定义事件的表单输入组件方法
2018/03/08 Javascript
解决vue单页面应用中动态修改title问题
2019/06/09 Javascript
Node.js系列之连接DB的方法(3)
2019/08/30 Javascript
JavaScript如何实现监听键盘输入和鼠标监点击
2020/07/20 Javascript
[01:46]DOTA2上海特锦赛小组赛英文解说KotlGuy采访
2016/02/27 DOTA
[01:16:13]DOTA2-DPC中国联赛 正赛 SAG vs Dragon BO3 第一场 2月22日
2021/03/11 DOTA
[55:26]DOTA2-DPC中国联赛 正赛 Aster vs LBZS BO3 第一场 2月23日
2021/03/11 DOTA
Python的Tornado框架实现异步非阻塞访问数据库的示例
2016/06/30 Python
python 根据pid杀死相应进程的方法
2017/01/16 Python
Python中str.join()简单用法示例
2018/03/20 Python
python re模块匹配贪婪和非贪婪模式详解
2020/02/11 Python
基于python实现坦克大战游戏
2020/10/27 Python
MYPROTEIN澳大利亚官方网站:欧洲运动营养品牌
2019/06/26 全球购物
大四本科生的自我评价
2013/12/30 职场文书
颁奖晚会主持词
2014/03/25 职场文书
小班下学期评语
2014/05/04 职场文书
大学生工作自荐书
2014/06/16 职场文书
2015年党员承诺书
2015/01/21 职场文书
2015年度销售个人工作总结
2015/03/31 职场文书
观后感格式
2015/06/19 职场文书
Go语言特点及基本数据类型使用详解
2022/03/21 Golang