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 相关文章推荐
innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等区别
Jun 29 Javascript
JS request函数 用来获取url参数
May 17 Javascript
jQuery弹出层始终垂直居中相对于屏幕或当前窗口
Apr 01 Javascript
javascript打印html内容功能的方法示例
Nov 28 Javascript
js解析json读取List中的实体对象示例
Mar 11 Javascript
JQuery中的html()、text()、val()区别示例介绍
Sep 01 Javascript
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
Dec 18 Javascript
JS中创建函数的三种方式及区别
Mar 13 Javascript
JavaScript轻松创建级联函数的方法示例
Feb 10 Javascript
jQuery.Sumoselect插件实现下拉复选框效果
Nov 09 jQuery
详解Vue后台管理系统开发日常总结(组件PageHeader)
Nov 01 Javascript
Vue移动端实现图片上传及超过1M压缩上传
Dec 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
php 获取全局变量的代码
2011/04/21 PHP
PHP生成不同颜色、不同大小的tag标签函数
2013/09/23 PHP
php读取flash文件高宽帧数背景颜色的方法
2015/01/06 PHP
php图像处理函数imagecopyresampled用法详解
2016/12/02 PHP
Zend Framework入门教程之Zend_Db数据库操作详解
2016/12/08 PHP
js css后面所带参数含义介绍
2013/08/18 Javascript
js 使FORM表单的所有元素不可编辑的示例代码
2013/10/17 Javascript
一个JavaScript变量声明的知识点
2013/10/28 Javascript
js使用for循环及if语句判断多个一样的name
2014/09/09 Javascript
js验证真实姓名与身份证号,手机号的简单实例
2016/07/18 Javascript
浅谈JS继承_寄生式继承 &amp; 寄生组合式继承
2016/08/16 Javascript
利用JS判断客户端类型你应该知道的四种方法
2017/12/22 Javascript
jQuery实现模糊搜索功能的方法分析
2018/06/29 jQuery
js 闭包深入理解与实例分析
2020/03/19 Javascript
微信小程序点击item使之滚动到屏幕中间位置
2020/03/25 Javascript
Vue中computed和watch有哪些区别
2020/12/19 Vue.js
[02:59]2014DOTA2西雅图国际邀请赛 圆满落幕中国夺冠
2014/07/23 DOTA
Python contextlib模块使用示例
2015/02/18 Python
为Python的web框架编写MVC配置来使其运行的教程
2015/04/30 Python
python中string模块各属性以及函数的用法介绍
2016/05/30 Python
详解Python nose单元测试框架的安装与使用
2017/12/20 Python
TensorFlow实现卷积神经网络
2018/05/24 Python
Pycharm无法使用已经安装Selenium的解决方法
2018/10/13 Python
Python 给屏幕打印信息加上颜色的实现方法
2019/04/24 Python
Python实现多态、协议和鸭子类型的代码详解
2019/05/05 Python
python的内存管理和垃圾回收机制详解
2019/05/18 Python
Python Django 前后端分离 API的方法
2019/08/28 Python
python图的深度优先和广度优先算法实例分析
2019/10/26 Python
css3.0新属性效果在ie下的解决方案
2010/05/10 HTML / CSS
软件测试面试题
2015/10/21 面试题
自我评价中英文语句
2013/11/30 职场文书
淘宝客服工作职责
2014/07/11 职场文书
我的中国梦演讲稿800字
2014/08/19 职场文书
学校党员个人问题整改措施思想汇报
2014/10/08 职场文书
护士医德考评自我评价
2015/03/03 职场文书
SQL使用复合索引实现数据库查询的优化
2022/05/25 SQL Server