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 相关文章推荐
Mootools 图片展示插件(lightbox,ImageMenu)收集集合
May 21 Javascript
JavaScript实现的内存数据库LokiJS介绍和入门实例
Nov 17 Javascript
DOM基础教程之模型中的模型节点
Jan 19 Javascript
JavaScript获得url查询参数的方法
Jul 02 Javascript
实例讲解jQuery EasyUI tree中state属性慎用
Apr 01 Javascript
Angular 4.x 动态创建表单实例
Apr 25 Javascript
JS按条件 serialize() 对应标签的使用方法
Jul 24 Javascript
Angular2管道Pipe及自定义管道格式数据用法实例分析
Nov 29 Javascript
jQuery滑动效果实现方法分析
Sep 05 jQuery
React父子组件间的传值的方法
Nov 13 Javascript
JavaScript中的this基本问题实例小结
Mar 09 Javascript
node.js +mongdb实现登录功能
Jun 18 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
欧美媒体选出10年前最流行的17部动画
2017/01/18 日漫
咖啡机如何保养和日常清洁?
2021/03/03 冲泡冲煮
PHP动态变静态原理
2006/11/25 PHP
ThinkPHP跳转页success及error模板实例教程
2014/07/17 PHP
PHP实现图片压缩的两则实例
2014/07/19 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
javascript之函数直接量(function(){})()
2007/06/29 Javascript
jQuery 源码分析笔记(5) jQuery.support
2011/06/19 Javascript
jQuery 获取URL的GET参数值的小例子
2013/04/18 Javascript
浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
2013/07/09 Javascript
Nodejs express框架一个工程中同时使用ejs模版和jade模版
2015/12/28 NodeJs
javascript实现右侧弹出“分享到”窗口效果
2016/02/01 Javascript
JavaScript的模块化开发框架Sea.js上手指南
2016/05/12 Javascript
利用AngularJs实现京东首页轮播图效果
2016/09/08 Javascript
javascript加载xml 并解析各节点的值(实现方法)
2016/10/12 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
2017/03/02 Javascript
Webpack之tree-starking 解析
2018/09/11 Javascript
React通过redux-persist持久化数据存储的方法示例
2019/02/14 Javascript
详解关于JSON.parse()和JSON.stringify()的性能小测试
2019/03/14 Javascript
Node中对非阻塞I/O、事件循环的知识点总结
2020/01/05 Javascript
微信小程序实现导航栏和内容上下联动功能代码
2020/06/29 Javascript
js+audio实现音乐播放器
2020/09/13 Javascript
在vue中获取wangeditor的html和text的操作
2020/10/23 Javascript
nuxt 服务器渲染动态设置 title和seo关键字的操作
2020/11/05 Javascript
浅析Python中的序列化存储的方法
2015/04/28 Python
Python 使用类写装饰器的小技巧
2018/09/30 Python
python 判断txt每行内容中是否包含子串并重新写入保存的实例
2020/03/12 Python
python新式类和经典类的区别实例分析
2020/03/23 Python
分享8款纯CSS3实现的搜索框功能
2017/09/14 HTML / CSS
车间调度岗位职责
2013/11/30 职场文书
高中生学期学习自我评价
2014/02/24 职场文书
高中军训第一天感言
2014/03/06 职场文书
超市客服工作职责
2014/06/11 职场文书
会议室标语
2014/06/21 职场文书
催款函怎么写
2015/06/24 职场文书
干货:如何写好工作计划!
2019/05/17 职场文书