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 相关文章推荐
菜单效果
Oct 14 Javascript
JS IE和FF兼容性问题汇总
Feb 09 Javascript
JQuery select标签操作代码段
May 16 Javascript
js 浏览器事件介绍
Mar 30 Javascript
alert和confirm功能介绍
May 21 Javascript
jQuery中contents()方法用法实例
Jan 08 Javascript
Javascript操作表单实例讲解(下)
Jun 20 Javascript
Angular2生命周期钩子函数的详细介绍
Jul 10 Javascript
vue学习教程之带你一步步详细解析vue-cli
Dec 26 Javascript
解决vue-cli项目打包出现空白页和路径错误的问题
Sep 04 Javascript
JavaScript 作用域scope简单汇总
Oct 23 Javascript
vue实现购物车加减
May 30 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 DataGrid 实现代码
2009/08/12 PHP
php函数间的参数传递(值传递/引用传递)
2013/09/23 PHP
php读取txt文件并将数据插入到数据库
2016/02/23 PHP
CL vs ForZe BO5 第二场 2.13
2021/03/10 DOTA
jquery判断小数点两位和自动删除小数两位后的数字
2014/03/19 Javascript
jQuery瀑布流插件Wookmark使用实例
2014/04/02 Javascript
JavaScript给按钮绑定点击事件(onclick)的方法
2015/04/07 Javascript
jQuery实现判断滚动条到底部
2015/06/23 Javascript
jquery分割字符串的方法
2015/06/24 Javascript
深入理解javascript函数参数与闭包
2016/12/12 Javascript
微信小程序图片宽100%显示并且不变形
2017/06/21 Javascript
vue 怎么创建组件及组件使用方法
2017/07/27 Javascript
解决vue v-for 遍历循环时key值报错的问题
2018/09/06 Javascript
浅谈在Vue.js中如何实现时间转换指令
2019/01/06 Javascript
JQuery中的常用事件、对象属性与使用方法分析
2019/12/23 jQuery
微信小程序语音同步智能识别的实现案例代码解析
2020/05/29 Javascript
Vue通过provide inject实现组件通信
2020/09/03 Javascript
原生JavaScript实现弹幕组件的示例代码
2020/10/12 Javascript
详解ES6 扩展运算符的使用与注意事项
2020/11/12 Javascript
[40:01]OG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
深入浅析Python中join 和 split详解(推荐)
2016/06/30 Python
python中如何使用正则表达式的非贪婪模式示例
2017/10/09 Python
详解python中的index函数用法
2019/08/06 Python
python matplotlib库绘制条形图练习题
2019/08/10 Python
python运用sklearn实现KNN分类算法
2019/10/16 Python
Bench加拿大官方网站:英国城市服装品牌
2017/11/03 全球购物
自我鉴定范文
2013/11/10 职场文书
幼儿园教师培训制度
2014/01/16 职场文书
大学社团活动策划书
2014/01/26 职场文书
整顿机关作风心得体会
2014/09/10 职场文书
戒毒悔改检讨书
2014/09/21 职场文书
博士给导师的自荐信
2015/03/06 职场文书
货款欠条范本
2015/07/03 职场文书
生活小常识广播稿
2015/08/19 职场文书
Vue和Flask通信的实现
2021/05/19 Vue.js
详解Spring事件发布与监听机制
2021/06/30 Java/Android