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 相关文章推荐
Js 订制自己的AlertBox(信息提示框)
Jan 09 Javascript
ASP小贴士/ASP Tips javascript tips可以当桌面
Dec 10 Javascript
js中的值类型和引用类型小结 文字说明与实例
Dec 12 Javascript
基于Jquery的动态创建DOM元素的代码
Dec 28 Javascript
多种方法实现JS动态添加事件
Nov 01 Javascript
js限制checkbox选中个数以限制六个为例
Jul 15 Javascript
使用angular写一个hello world
Jan 23 Javascript
Node.js中常规的文件操作总结
Oct 13 Javascript
AngularJS 防止页面闪烁的方法
Mar 09 Javascript
Angular2平滑升级到Angular4的步骤详解
Mar 29 Javascript
微信小程序 判断手机号的实现代码
Apr 19 Javascript
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
Aug 01 jQuery
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
3.从实例开始
2006/10/09 PHP
php类的定义与继承用法实例
2015/07/07 PHP
PHP常见漏洞攻击分析
2016/02/21 PHP
如何正确配置Nginx + PHP
2016/07/15 PHP
php开发最强大的IDE编辑的phpstorm 2020.2配置Xdebug调试的详细教程
2020/08/17 PHP
Javascript实例教程(19) 使用HoTMetal(4)
2006/12/23 Javascript
用javascript实现的激活输入框后隐藏初始内容
2007/06/29 Javascript
基于jQuery的输入框在光标位置插入内容, 并选中
2011/10/29 Javascript
Js如何判断客户端是PC还是手持设备简单分析
2012/11/22 Javascript
JS简单实现登陆验证附效果图
2013/11/19 Javascript
解决html按钮切换绑定不同函数后点击时执行多次函数问题
2014/05/14 Javascript
JS实现下拉菜单赋值到文本框的方法
2015/08/18 Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
2015/10/01 Javascript
nodejs获取微信小程序带参数二维码实现代码
2017/04/12 NodeJs
Angular实现图片裁剪工具ngImgCrop实践
2017/08/17 Javascript
vue.js动画中的js钩子函数的实现
2018/07/06 Javascript
简单分析js中的this的原理
2019/08/31 Javascript
浅谈vue.watch的触发条件是什么
2020/11/07 Javascript
前端如何实现动画过渡效果
2021/02/05 Javascript
Vue基本指令实例图文讲解
2021/02/25 Vue.js
[01:01:52]DOTA2-DPC中国联赛正赛 iG vs LBZS BO3 第一场 3月4日
2021/03/11 DOTA
python3调用R的示例代码
2018/02/23 Python
Python爬虫——爬取豆瓣电影Top250代码实例
2019/04/17 Python
导入tensorflow:ImportError: libcublas.so.9.0 报错
2020/01/06 Python
python编写一个会算账的脚本的示例代码
2020/06/02 Python
Selenium执行完毕未关闭chromedriver/geckodriver进程的解决办法(java版+python版)
2020/12/07 Python
conda安装tensorflow和conda常用命令小结
2021/02/20 Python
CSS3截取字符串实例代码【推荐】
2018/06/07 HTML / CSS
JavaScript+Canvas实现自定义画板的示例代码
2019/05/13 HTML / CSS
办公室年终个人自我评价
2013/10/28 职场文书
初三学习计划书范文
2014/04/30 职场文书
2014年导购员工作总结
2014/11/18 职场文书
2014年库房工作总结
2014/11/26 职场文书
毕业生就业推荐表自我评价
2015/03/02 职场文书
严以律己学习心得体会
2016/01/13 职场文书
创业项目大全(适合在家创业的项目)
2019/08/15 职场文书