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 相关文章推荐
Gird事件机制初级读本
Mar 10 Javascript
jQuery的实现原理的模拟代码 -1 核心部分
Aug 01 Javascript
javascript对下拉列表框(select)的操作实例讲解
Nov 29 Javascript
jquery实现的点击翻书效果代码
Nov 04 Javascript
JavaScript中数组去除重复的三种方法
Apr 22 Javascript
AngularJS在IE8的不支持的解决方法
May 13 Javascript
深入解析JavaScript中的arguments对象
Jun 12 Javascript
Javascript 函数的四种调用模式
Nov 05 Javascript
给easyui datebox扩展一个清空的实例
Nov 09 Javascript
js实现定时进度条完成后切换图片
Jan 04 Javascript
Node.js获取前端ajax提交的request信息
Feb 20 Javascript
React为 Vue 引入容器组件和展示组件的教程详解
May 03 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生成WAP页面
2006/10/09 PHP
PHP中的函数嵌套层数限制分析
2011/06/13 PHP
JpGraph php柱状图使用介绍
2011/08/23 PHP
PHP如何实现Unicode和Utf-8编码相互转换
2015/07/29 PHP
smarty自定义函数用法示例
2016/05/20 PHP
Yii2下session跨域名共存的解决方案
2017/02/04 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
Jquery下的26个实用小技巧(jQuery tips, tricks &amp; solutions)
2010/03/01 Javascript
JS的反射问题
2010/04/07 Javascript
Jquery 动态添加按钮实现代码
2010/05/06 Javascript
ASP.NET jQuery 实例16 通过控件CustomValidator验证RadioButtonList
2012/02/03 Javascript
解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题
2014/01/14 Javascript
jQuery中的$.ajax()方法应用
2014/05/06 Javascript
jquery通过ajax加载一段文本内容的方法
2015/01/15 Javascript
jQuery实现仿腾讯迷你首页选项卡效果代码
2015/09/17 Javascript
Bootstrap3制作搜索框样式的方法
2016/07/11 Javascript
jQuery EasyUI API 中文帮助文档和扩展实例
2016/08/01 Javascript
jquery实现图片上传前本地预览
2017/04/28 jQuery
Vue关于数据绑定出错解决办法
2017/05/15 Javascript
JavaScript之排序函数_动力节点Java学院整理
2017/06/30 Javascript
JS中获取 DOM 元素的绝对位置实例详解
2018/04/23 Javascript
Vue三种常用传值示例(父传子、子传父、非父子)
2018/07/24 Javascript
使用vue实现通过变量动态拼接url
2020/07/22 Javascript
[02:38]2018年度DOTA2最佳劣单位选手-完美盛典
2018/12/17 DOTA
[01:20:47]DOTA2-DPC中国联赛 正赛 Ehome vs Magma BO3 第一场 1月19日
2021/03/11 DOTA
Python实现简单石头剪刀布游戏
2021/01/20 Python
python 实现将文件或文件夹用相对路径打包为 tar.gz 文件的方法
2019/06/10 Python
详解Python openpyxl库的基本应用
2021/02/26 Python
CSS3制作漂亮的照片墙的实现代码
2016/06/08 HTML / CSS
HTML5的结构和语义(3):语义性的块级元素
2008/10/17 HTML / CSS
联想澳大利亚官网:Lenovo Australia
2018/01/18 全球购物
laravel使用redis队列实例讲解
2021/03/23 PHP
生物医学工程专业学生求职信范文分享
2013/12/14 职场文书
个人简历中的自我评价怎么写
2014/01/26 职场文书
2014年计生标语
2014/06/23 职场文书
农业局党的群众路线教育实践活动整改方案
2014/09/20 职场文书