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 获取表单file全路径
Dec 31 Javascript
js获取单选框或复选框值及操作
Dec 18 Javascript
jQuery插件datepicker 日期连续选择
Jun 12 Javascript
jquery简单实现带渐显效果的选项卡菜单代码
Sep 01 Javascript
javascript实现无缝上下滚动特效
Dec 16 Javascript
jquery 实现滚动条下拉时无限加载的简单实例
Jun 01 Javascript
JavaScript Ajax编程 应用篇
Jul 02 Javascript
全面接触神奇的Bootstrap导航条实战篇
Aug 01 Javascript
在HTML文档中嵌入JavaScript的四种方法
May 07 Javascript
微信小程序实现通过双向滑动缩放图片大小的方法
Dec 30 Javascript
如何使用less实现随机下雪动画详解
Jan 02 Javascript
Vue 中可以定义组件模版的几种方式
Aug 06 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 return语句的另一个作用
2014/07/30 PHP
老司机传授Ubuntu下Apache+PHP+MySQL环境搭建攻略
2016/03/20 PHP
PHP实现PDO操作mysql存储过程示例
2019/02/13 PHP
javascript 动态table添加colspan\rowspan 参数的方法
2009/07/25 Javascript
js 用CreateElement动态创建标签示例
2013/11/20 Javascript
jquery改变disabled的boolean状态的三种方法
2013/12/13 Javascript
jquery退出each循环的写法
2014/02/26 Javascript
第五篇Bootstrap 排版
2016/06/21 Javascript
Bootstrap php制作动态分页标签
2016/12/23 Javascript
react native仿微信PopupWindow效果的实例代码
2017/08/07 Javascript
详解angular笔记路由之angular-router
2017/09/12 Javascript
使用原生js+canvas实现模拟心电图的实例
2017/09/20 Javascript
JavaScript定义函数的三种实现方法
2017/09/23 Javascript
JQuery 选择器、DOM节点操作练习实例
2017/09/28 jQuery
微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】
2017/12/05 Javascript
基于JavaScript实现一个简单的Vue
2018/09/26 Javascript
Node.js assert断言原理与用法分析
2019/01/04 Javascript
优雅地使用loading(推荐)
2019/04/20 Javascript
详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑
2019/09/17 Javascript
vue循环中点击选中再点击取消(单选)的实现
2020/09/10 Javascript
js动态添加带圆圈序号列表的实例代码
2021/02/18 Javascript
[54:43]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第一场 2月22日
2021/03/11 DOTA
详细讲解用Python发送SMTP邮件的教程
2015/04/29 Python
详解python中asyncio模块
2018/03/03 Python
python实现对任意大小图片均匀切割的示例
2018/12/05 Python
对python内置map和six.moves.map的区别详解
2018/12/19 Python
Python字符串的常见操作实例小结
2019/04/08 Python
使用Python 自动生成 Word 文档的教程
2020/02/13 Python
Python利用for循环打印星号三角形的案例
2020/04/12 Python
科颜氏美国官网:Kiehl’s美国
2017/01/31 全球购物
护理专业毕业生自荐信
2014/06/15 职场文书
领导参观欢迎词
2015/01/26 职场文书
2015大学自主招生自荐信范文
2015/03/04 职场文书
物业保安辞职信
2015/05/12 职场文书
2015年成本会计工作总结
2015/10/14 职场文书
导游词之南京栖霞山
2019/10/18 职场文书