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 相关文章推荐
input+select(multiple) 实现下拉框输入值
May 21 Javascript
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
Jun 19 Javascript
TypeOf这些知识点你了解吗
Feb 21 Javascript
jquery自定义插件——window的实现【示例代码】
May 06 Javascript
AngularJS在IE8的不支持的解决方法
May 13 Javascript
Vue.js每天必学之内部响应式原理探究
Sep 07 Javascript
JavaScript优化以及前段开发小技巧
Feb 02 Javascript
vue通过watch对input做字数限定的方法
Jul 13 Javascript
JS实现前端页面的搜索功能
Jun 12 Javascript
vue-router 源码实现前端路由的两种方式
Jul 02 Javascript
angularJS实现不同视图同步刷新详解
Oct 09 Javascript
vue实现购物车的监听
Apr 20 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
简体中文转换为繁体中文的PHP函数
2006/10/09 PHP
php管理nginx虚拟主机shell脚本实例
2014/11/19 PHP
PHP注释语法规范与命名规范详解篇
2018/01/21 PHP
javascript this用法小结
2008/12/19 Javascript
Javascript函数式编程简单介绍
2015/10/11 Javascript
javascript 中的 delete及delete运算符
2015/11/15 Javascript
EasyUI学习之DataGird分页显示数据
2016/12/29 Javascript
浅谈webpack编译vue项目生成的代码探索
2017/12/11 Javascript
iView框架问题整理小结
2018/10/16 Javascript
微信小程序后端实现授权登录
2020/02/24 Javascript
mpvue实现微信小程序快递单号查询代码
2020/04/03 Javascript
jQuery 添加元素和删除元素的方法
2020/07/15 jQuery
js实现tab栏切换效果
2020/08/02 Javascript
Python3.4实现从HTTP代理网站批量获取代理并筛选的方法示例
2017/09/26 Python
Tensorflow使用tfrecord输入数据格式
2018/06/19 Python
使用python爬取微博数据打造一颗“心”
2019/06/28 Python
python求绝对值的三种方法小结
2019/12/04 Python
Python可变对象与不可变对象原理解析
2020/02/25 Python
CSS教程:CSS3圆角属性
2009/04/02 HTML / CSS
Skyscanner澳大利亚:全球领先的旅游搜索网站
2018/03/24 全球购物
网络体系结构及协议的定义
2014/03/13 面试题
个人自我鉴定怎么写
2013/10/28 职场文书
保洁主管岗位职责
2013/11/20 职场文书
函授毕业生的自我鉴定
2013/11/26 职场文书
国培远程培训感言
2014/03/08 职场文书
环境日宣传活动总结
2014/07/09 职场文书
明星员工获奖感言
2014/08/14 职场文书
管理岗位竞聘演讲稿
2014/08/18 职场文书
群众路线党员自我评议范文2014
2014/09/24 职场文书
大学拉赞助协议书范文
2014/09/26 职场文书
营销与策划实训报告
2014/11/05 职场文书
办公用房租赁协议书
2014/11/29 职场文书
2015年公路养护工作总结
2015/05/13 职场文书
大学体育课感想
2015/08/10 职场文书
2016年大学生暑假爱心支教活动策划书
2015/11/26 职场文书
基于nginx实现上游服务器动态自动上下线无需reload的实现方法
2021/03/31 Servers