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 相关文章推荐
JS中showModalDialog 的使用解析
Apr 17 Javascript
js实现连个数字相加而不是拼接的方法
Feb 23 Javascript
函数式 JavaScript(一)简介
Jul 07 Javascript
js实现在同一窗口浏览图片
Sep 17 Javascript
jquery显示隐藏元素的实现代码
May 19 Javascript
基于jQuery实现仿百度首页选项卡切换效果
May 29 Javascript
Node.js中npm常用命令大全
Jun 09 Javascript
JS实现非首屏图片延迟加载的示例
Jan 06 Javascript
vue实现的请求服务器端API接口示例
May 25 Javascript
浅谈目前可以使用ES10的5个新特性
Jun 25 Javascript
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 jQuery
javascript实现左右缓动动画函数
Nov 25 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
destoon实现调用热门关键字的方法
2014/07/15 PHP
PHP简单实现无限级分类的方法
2016/05/13 PHP
php利用gd库为图片添加水印
2016/11/09 PHP
PHP基于MySQLI函数封装的数据库连接工具类【定义与用法】
2017/08/11 PHP
PHP中localeconv()函数的用法
2019/03/26 PHP
通过event对象的fromElement属性解决热区设置主实体的一个bug
2008/12/22 Javascript
使用jquery实现select添加实现后台权限添加的效果
2011/05/28 Javascript
js确定对象类型方法
2012/03/30 Javascript
得到jQuery detach()后节点中的某个值实现代码
2013/02/05 Javascript
原生javascript实现简单的datagrid数据表格
2015/01/02 Javascript
jquery实现美观的导航菜单鼠标提示特效代码
2015/09/06 Javascript
简单实现Vue的observer和watcher
2016/12/21 Javascript
JS实现一个简单的日历
2017/02/22 Javascript
Javascript前端经典的面试题及答案
2017/03/14 Javascript
Javascript中toFixed计算错误(依赖银行家舍入法的缺陷)解决方法
2017/08/22 Javascript
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
2019/04/01 Javascript
基于form-data请求格式详解
2019/10/29 Javascript
jQuery实现轮播图效果demo
2020/01/11 jQuery
简单了解前端渐进式框架VUE
2020/07/20 Javascript
[46:48]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第三局
2016/02/25 DOTA
python高阶爬虫实战分析
2018/07/29 Python
Django中使用CORS实现跨域请求过程解析
2019/08/05 Python
python为QT程序添加图标的方法详解
2020/03/09 Python
Python变量及数据类型用法原理汇总
2020/08/06 Python
浅析Python 责任链设计模式
2020/09/11 Python
Java提供了哪些企业应用编程接口
2015/02/13 面试题
struct与class的区别
2014/02/03 面试题
什么情况下你必须要把一个类定义为abstract的
2013/01/06 面试题
分厂厂长岗位职责
2013/12/29 职场文书
素食餐饮项目创业计划书
2014/02/02 职场文书
法学专业毕业生自荐信
2014/06/11 职场文书
车辆年检委托书范本
2014/10/14 职场文书
裁员通知
2015/04/25 职场文书
2015年保险公司个人工作总结
2015/05/22 职场文书
赤壁观后感(2)
2015/06/15 职场文书
矛盾论读书笔记
2015/06/29 职场文书