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 相关文章推荐
详解jquery中$.ajax方法提交表单
Nov 03 Javascript
jQuery遍历页面所有CheckBox查看是否被选中的方法
Apr 14 Javascript
JavaScript中实现Map的示例代码
Sep 09 Javascript
谈谈Jquery ajax中success和complete有哪些不同点
Nov 20 Javascript
BootStrap 智能表单实战系列(十)自动完成组件的支持
Jun 13 Javascript
js注入 黑客之路必备!
Sep 14 Javascript
JavaScript实现自动切换图片代码
Oct 11 Javascript
angular 基于ng-messages的表单验证实例
May 04 Javascript
Vue实现搜索 和新闻列表功能简单范例
Mar 16 Javascript
selenium+java中用js来完成日期的修改
Oct 31 Javascript
vue el-tree 默认展开第一个节点的实现代码
May 15 Javascript
使用jQuery实现购物车
Oct 29 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
php通过COM类调用组件的实现代码
2012/01/11 PHP
PHP中的cookie不用刷新就生效的方法
2012/02/04 PHP
搭建基于Docker的PHP开发环境的详细教程
2015/07/01 PHP
Laravel访问出错提示:`Warning: require(/vendor/autoload.php): failed to open stream: No such file or di解决方法
2019/04/02 PHP
Javascript的IE和Firefox兼容性汇编
2006/07/01 Javascript
javascript中的=等号个数问题两个跟三个有什么区别
2013/10/23 Javascript
js实现图片旋转的三种方法
2014/04/10 Javascript
jQuery分别获取选中的复选框值的示例
2014/06/17 Javascript
轻松创建nodejs服务器(1):一个简单nodejs服务器例子
2014/12/18 NodeJs
js预加载图片方法汇总
2015/06/15 Javascript
JavaScript_object基础入门(必看篇)
2016/06/13 Javascript
javascript中获取元素标签中间的内容的实现方法
2016/10/08 Javascript
jQuery AJAX 方法success()后台传来的4种数据详解
2018/08/08 jQuery
JS实现头条新闻的经典轮播图效果示例
2019/01/30 Javascript
layui 中select下拉change事件失效的解决方法
2019/09/20 Javascript
解决vue项目,npm run build后,报路径错的问题
2020/08/13 Javascript
Python发送form-data请求及拼接form-data内容的方法
2016/03/05 Python
Python搭建HTTP服务器和FTP服务器
2017/03/09 Python
pandas进行数据的交集与并集方式的数据合并方法
2018/06/27 Python
python中ASCII码和字符的转换方法
2018/07/09 Python
不管你的Python报什么错,用这个模块就能正常运行
2018/09/14 Python
Python中出现IndentationError:unindent does not match any outer indentation level错误的解决方法
2020/04/18 Python
Python3批量生成带logo的二维码方法
2019/06/24 Python
python cumsum函数的具体使用
2019/07/29 Python
HTML5重塑Web世界它将如何改变互联网
2012/12/17 HTML / CSS
澳洲网红粉泥面膜:Sand & Sky
2019/08/13 全球购物
美国轻奢时尚购物网站:REVOLVE(支持中文)
2020/07/18 全球购物
上课迟到检讨书
2014/01/19 职场文书
2014大学生党员评议个人总结
2014/09/22 职场文书
教师群众路线剖析材料
2014/09/29 职场文书
文明单位汇报材料
2014/12/24 职场文书
学生乘坐校车安全责任书
2015/05/11 职场文书
建党伟业电影观后感
2015/06/01 职场文书
党支部半年考察意见
2015/06/01 职场文书
活动简报范文
2015/07/22 职场文书
导游词之山东八大关
2019/12/18 职场文书