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 相关文章推荐
解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
Nov 06 Javascript
jquery 子窗口操作父窗口的代码
Sep 21 Javascript
jQuery 1.5.1 发布,全面支持IE9 修复大量bug
Feb 26 Javascript
简单的Jquery遮罩层代码实例
Nov 14 Javascript
Jqgrid设置全选(选择)及获取选择行的值示例代码
Dec 28 Javascript
特殊情况下如何获取span里面的值
May 20 Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
Jul 05 Javascript
js实现二级菜单渐隐显示
Nov 03 Javascript
Vue路由切换时的左滑和右滑效果示例
May 29 Javascript
iview form清除校验状态的实现
Sep 19 Javascript
浅谈vue 多个变量同时赋相同值互相影响
Aug 05 Javascript
Js利用正则表达式去除字符串的中括号
Nov 23 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
在apache下限制每个虚拟主机的并发数!!!!
2006/10/09 PHP
50个PHP程序性能优化的方法
2014/06/02 PHP
thinkPHP5.0框架环境变量配置方法
2017/03/17 PHP
php实现查询功能(数据访问)
2017/05/23 PHP
jQuery性能优化28条建议你值得借鉴
2013/02/16 Javascript
js实现两个值相加alert出来精确到指定位
2013/09/25 Javascript
Node.js实现简单聊天服务器
2014/06/20 Javascript
原生javascript实现图片按钮切换
2015/01/12 Javascript
JS Array创建及concat()split()slice()的使用方法
2016/06/03 Javascript
详解数组Array.sort()排序的方法
2020/05/09 Javascript
Vue单文件组件的如何使用方式介绍
2017/07/28 Javascript
javaScript封装的各种写法
2017/08/14 Javascript
angularjs实现过滤并替换关键字小功能
2017/09/19 Javascript
vue iview组件表格 render函数的使用方法详解
2018/03/15 Javascript
vue实现条件判断动态绑定样式的方法
2018/09/29 Javascript
js作用域和作用域链及预解析
2019/04/11 Javascript
微信小程序的授权实现过程解析
2019/08/02 Javascript
微信小程序wx.request的简单封装
2019/11/13 Javascript
跟老齐学Python之开始真正编程
2014/09/12 Python
Python with用法实例
2015/04/14 Python
初步解析Python下的多进程编程
2015/04/28 Python
python实现简单中文词频统计示例
2017/11/08 Python
Python数据分析中Groupby用法之通过字典或Series进行分组的实例
2017/12/08 Python
Python用imghdr模块识别图片格式实例解析
2018/01/11 Python
Tensorflow之Saver的用法详解
2018/04/23 Python
关于python3中setup.py小概念解析
2019/08/22 Python
Python从列表推导到zip()函数的5种技巧总结
2019/10/23 Python
keras.layer.input()用法说明
2020/06/16 Python
浅谈keras中Dropout在预测过程中是否仍要起作用
2020/07/09 Python
python爬虫使用requests发送post请求示例详解
2020/08/05 Python
历史学专业推荐信
2013/11/06 职场文书
分家协议书
2014/04/21 职场文书
技术员岗位职责范本
2015/04/11 职场文书
导游词之张家界
2019/10/31 职场文书
Python函数中的不定长参数相关知识总结
2021/06/24 Python
Spring中的@Transactional的工作原理
2022/06/05 Java/Android