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实现下拉菜单效果的代码
Jul 25 Javascript
JavaScript高级程序设计(第3版)学习笔记5 js语句
Oct 11 Javascript
js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器
Jun 06 Javascript
Jquery中val()表单取值赋值的实例代码
Aug 15 Javascript
jquery实现文本框数量加减功能的例子分享
May 10 Javascript
jQuery中each()方法用法实例
Dec 27 Javascript
js实现绿白相间竖向网页百叶窗动画切换效果
Mar 02 Javascript
js获取iframe中的window对象的实现方法
May 20 Javascript
JavaScript奇技淫巧44招【实用】
Dec 11 Javascript
webpack打包单页面如何引用的js
Jun 07 Javascript
详解在Angular项目中添加插件ng-bootstrap
Jul 04 Javascript
vue实现移动端悬浮窗效果
Dec 01 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
虫族 ZERG 概述
2020/03/14 星际争霸
如何使用PHP中的字符串函数
2006/11/24 PHP
windows xp下安装pear
2006/12/02 PHP
PHP中error_log()函数的使用方法
2015/01/20 PHP
php二维数组合并及去重复的方法
2015/03/04 PHP
PHP二维数组实现去除重复项的方法【保留各个键值】
2017/12/21 PHP
PHP+Mysql分布式事务与解决方案深入理解
2021/02/27 PHP
使用jQuery简化Ajax开发 Ajax开发入门
2009/10/14 Javascript
js原生态函数中使用jQuery中的 $(this)无效的解决方法
2011/05/25 Javascript
用示例说明filter()与find()的用法以及children()与find()的区别分析
2013/04/26 Javascript
JavaScript初学者建议:不要去管浏览器兼容
2014/02/04 Javascript
JavaScript中reduce()方法的使用详解
2015/06/09 Javascript
javascript解析xml实现省市县三级联动的方法
2015/07/25 Javascript
每天一篇javascript学习小结(基础知识)
2015/11/10 Javascript
js中遍历对象的属性和值的方法
2016/07/27 Javascript
vue-router 学习快速入门
2017/03/01 Javascript
详解vue mint-ui源码解析之loadmore组件
2017/10/11 Javascript
微信小程序显示下拉列表功能【附源码下载】
2017/12/12 Javascript
微信小程序缓存过期时间的使用详情
2019/05/12 Javascript
微信头像地址失效踩坑记附带解决方案
2019/09/23 Javascript
解决python3中自定义wsgi函数,make_server函数报错的问题
2017/11/21 Python
基于Python中capitalize()与title()的区别详解
2017/12/09 Python
python中字符串变二维数组的实例讲解
2018/04/03 Python
Python绘制频率分布直方图的示例
2019/07/08 Python
python多线程同步之文件读写控制
2021/02/25 Python
Django之模板层的实现代码
2019/09/09 Python
详解pycharm连接不上mysql数据库的解决办法
2020/01/10 Python
Pycharm编辑器功能之代码折叠效果的实现代码
2020/10/15 Python
Python+OpenCV图像处理——实现轮廓发现
2020/10/23 Python
python链表类中获取元素实例方法
2021/02/23 Python
处理textarea中的换行和空格
2019/12/12 HTML / CSS
Agoda香港:全球特价酒店预订
2017/05/07 全球购物
利用promise及参数解构封装ajax请求的方法
2021/03/24 Javascript
学校食堂食品安全责任书
2014/07/28 职场文书
交通事故调解协议书
2015/05/20 职场文书
OpenCV实现反阈值二值化
2021/11/17 Java/Android