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 相关文章推荐
JavaScript 申明函数的三种方法 每个函数就是一个对象(一)
Dec 04 Javascript
最佳的addEvent事件绑定是怎样诞生的
Oct 24 Javascript
用最通俗易懂的代码帮助新手理解javascript闭包 推荐
Mar 01 Javascript
在javascript中如何得到中英文混合字符串的长度
Jan 17 Javascript
JS实现控制表格只显示行边框或者只显示列边框的方法
Mar 31 Javascript
纯css实现窗户玻璃雨滴逼真效果
Aug 23 Javascript
JS从数组中随机取出几个数组元素的方法
Aug 02 Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
Feb 14 Javascript
vue使用 better-scroll的参数和方法详解
Jan 25 Javascript
使用React手写一个对话框或模态框的方法示例
Apr 25 Javascript
微信小程序中data-key属性之数据传输(经验总结)
Aug 22 Javascript
v-slot和slot、slot-scope之间相互替换实例
Sep 04 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多态的实现详解
2013/06/09 PHP
CodeIgniter生成静态页的方法
2016/05/17 PHP
ThinkPHP框架使用redirect实现页面重定向的方法实例分析
2018/04/12 PHP
php获取微信基础接口凭证Access_token
2018/08/23 PHP
PHP全局使用Laravel辅助函数dd
2019/12/26 PHP
JS多物体 任意值 链式 缓冲运动
2012/08/10 Javascript
Jquery倒数计时按钮setTimeout的实例代码
2013/07/04 Javascript
Javascript 实现的数独解题算法网页实例
2013/10/15 Javascript
原生js ActiveXObject获取execl里面的值
2013/11/01 Javascript
提高jQuery性能优化的技巧
2015/08/03 Javascript
jQuery xml字符串的解析、读取及查找方法
2016/03/01 Javascript
Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享
2016/06/07 Javascript
JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
2016/08/24 Javascript
jQuery Form表单取值的方法
2017/01/11 Javascript
AngularJS对动态增加的DOM实现ng-keyup事件示例
2018/03/12 Javascript
vue和webpack安装命令详解
2018/06/15 Javascript
ES6 更易于继承的类语法的使用
2019/02/11 Javascript
JS实现求字符串中出现最多次数的字符和次数示例
2019/07/05 Javascript
JavaScript 声明私有变量的两种方式
2021/02/05 Javascript
推荐11个实用Python库
2015/01/23 Python
Python中生成Epoch的方法
2017/04/26 Python
Python列表和元组的定义与使用操作示例
2017/07/26 Python
分享vim python缩进等一些配置
2018/07/02 Python
python实现每天自动签到领积分的示例代码
2020/08/18 Python
Python+Selenium实现自动化的环境搭建的步骤(图文)
2020/09/01 Python
python安装及变量名介绍详解
2020/12/12 Python
乐天旅游香港网站:日本饭店预订
2017/11/29 全球购物
MONNIER Frères英国官网:源自巴黎女士奢侈品配饰电商平台
2018/12/06 全球购物
MediaMarkt比利时:欧洲最大电器连锁店
2020/12/21 全球购物
EJB需直接实现它的业务接口或Home接口吗,请简述理由
2016/11/23 面试题
编辑硕士自荐信范文
2013/11/27 职场文书
网络编辑岗位职责范本
2014/02/10 职场文书
学习雷锋月活动总结
2014/07/03 职场文书
幼儿园中班教师个人总结
2015/02/05 职场文书
创业计划书之电动车企业
2019/10/11 职场文书
祝福语集锦:给百岁老人祝寿贺词
2019/11/19 职场文书