vue.js中导出Excel表格的案例分析


Posted in Javascript onJune 11, 2019

有一个项目需求,要求在前端项目中导出Excel表格,经过查找代码,Vue.js确实可以实现,具体实现步骤为:

1.安装依赖

npm install -S file-saver xlsx
npm install -D script-loader

2.导入两个JS

下载Blob.js和Export2Excel.js,在src目录下新建Excel文件夹,里面放入Blob.js和Export2Excel.js两个JS文件

3.在main.js引入这两个JS文件 **

import Blob from './excel/Blob'
import Export2Excel from './excel/Export2Excel.js'

4.在组件中使用

//导出的方法
exportExcel() {
 require.ensure([], () => {
  const { export_json_to_excel } = require('../excel/Export2Excel');
  const tHeader = ['序号', '昵称', '姓名'];
  // 上面设置Excel的表格第一行的标题
  const filterVal = ['index', 'nickName', 'name'];
  // 上面的index、nickName、name是tableData里对象的属性
  const list = this.tableData; //把data里的tableData存到list
  const data = this.formatJson(filterVal, list);
  export_json_to_excel(tHeader, data, '列表excel');
 })
},

formatJson(filterVal, jsonData) {
 return jsonData.map(v => filterVal.map(j => v[j]))
}

tHeader是表头,filterVal 中的数据是表格的字段,tableData中存放表格里的数据,类型为数组,里面存放对象,表格的每一行为一个对象。

tableData 中的值为:

data () {
return {
 tableData: [
  {'index':'0',"nickName": "沙滩搁浅我们的旧时光", "name": "小明"},
  {'index':'1',"nickName": "女人天生高贵", "name": "小红"},
  {'index':'2',"nickName": "海是彩色的灰尘", "name": "小兰"}
 ]
}
}

最后实现的效果图:

vue.js中导出Excel表格的案例分析

如果运行时,报如下所示的错误:

vue.js中导出Excel表格的案例分析

这是因为Export2Excel.js的设置需要改下:

vue.js中导出Excel表格的案例分析

注: 把require('script-loader!vendor/Blob')改为 require('./Blob.js')

项目中实际应用案例

/ 导出 */

formatJson(filterVal, jsonData) {
   // console.log(filterVal,jsonData)
    return jsonData.map(v => filterVal.map(j => {
       if(j == 'xxdz'){      //..详细地址
        return v.name1 + v.name2 + v.name3 + v.gridName + v.xxdz
      }
      if(j == 'qyzw'){      //..区域装维
        return v.name2 + '/' + v.yxCname
      }
      if(j == 'state'){      //..工单状态
        return this.config.gzdStateList[v.state]
      }
      return v[j]
    }))
  },
  ygExcel() {
    let params = {}
    let queryForm = this.deepClone(this.queryForm)
    params.currentPage =1
    params.pageSize = this.count
    params.queryForm = queryForm
    params.prop = this.prop
    params.order = this.order
    // params.ifExport = true
    this.startLoading()
    this.$post( "/api/UserController/getList",params, (data) => {
     console.log(data)
      let tableData =data.list;
      // let tableData = data.list;
      require.ensure([], () => {
        const { export_json_to_excel } = require('../vendor/Export2Excel');
        const tHeader = this.config.ygbHeader;//在config中定义表头
        const filterVal = this.config.ygFilterVal;//在config中定义表头对应的字段
        const data = this.formatJson(filterVal, tableData);
        export_json_to_excel(tHeader, data, '员工详情表');下载是显示的表名
      })
    })
  },

总结

以上所述是小编给大家介绍的vue.js中导出Excel表格的案例分析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
使用Javascript和DOM Interfaces来处理HTML
Oct 09 Javascript
Jquery+CSS3实现一款简洁大气带滑动效果的弹出层
May 15 Javascript
JS动态修改iframe内嵌网页地址的方法
Apr 01 Javascript
jQuery mobile 移动web(6)
Dec 20 Javascript
JS中的forEach、$.each、map方法推荐
Apr 05 Javascript
Bootstrap教程JS插件滚动监听学习笔记分享
May 18 Javascript
jQuery实现可拖拽的许愿墙效果【附demo源码下载】
Sep 14 Javascript
Bootstrap基本插件学习笔记之Alert警告框(20)
Dec 08 Javascript
Vue-cli 移动端布局和动画使用详解
Aug 10 Javascript
vue实现简单的登录弹出框
Oct 26 Javascript
JavaScript实现4位随机验证码的生成
Jan 28 Javascript
解决vue-router的beforeRouteUpdate不能触发
Apr 14 Vue.js
ES6 Proxy实现Vue的变化检测问题
Jun 11 #Javascript
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
Jun 10 #Javascript
vue2 中二级路由高亮问题及配置方法
Jun 10 #Javascript
JS中实现一个下载进度条及播放进度条的代码
Jun 10 #Javascript
vuex 中插件的编写案例解析
Jun 10 #Javascript
使用webpack搭建vue项目及注意事项
Jun 10 #Javascript
详解iview的checkbox多选框全选时校验问题
Jun 10 #Javascript
You might like
利用 window_onload 实现select默认选择
2006/10/09 PHP
php使用json_encode对变量json编码
2014/04/07 PHP
PHP随机生成信用卡卡号的方法
2015/03/23 PHP
PHP批量生成图片缩略图的方法
2015/06/18 PHP
php curl上传、下载、https登陆实现代码
2017/07/23 PHP
JQuery最佳实践之精妙的自定义事件
2010/08/11 Javascript
js onload事件不起作用示例分析
2013/10/09 Javascript
经过绑定元素时会多次触发mouseover和mouseout事件
2014/02/28 Javascript
解决jQuery动态获取手机屏幕高和宽的问题
2014/05/07 Javascript
JavaScript中的闭包(Closure)详细介绍
2014/12/30 Javascript
JavaScript Window浏览器对象模型方法与属性汇总
2015/04/20 Javascript
jQuery中通过ajax的get()函数读取页面的方法
2016/02/29 Javascript
JQuery解析XML的方法小结
2016/04/02 Javascript
jsp 网站引入外部css或者js失效问题解决
2016/10/31 Javascript
BootStrap学习笔记之nav导航栏和面包屑导航
2017/01/03 Javascript
详解webpack的配置文件entry与output
2017/08/21 Javascript
10个在JavaScript开发中常遇到的BUG
2017/12/18 Javascript
利用chrome浏览器进行js调试并找出元素绑定的点击事件详解
2021/01/30 Javascript
原生JS实现萤火虫效果
2020/03/07 Javascript
python pickle 和 shelve模块的用法
2013/09/16 Python
Tornado高并发处理方法实例代码
2018/01/15 Python
python实现对文件中图片生成带标签的txt文件方法
2018/04/27 Python
python2 与 python3 实现共存的方法
2018/07/12 Python
Flask入门之上传文件到服务器的方法示例
2018/07/18 Python
python的pip安装以及使用教程
2018/09/18 Python
Python使用urllib模块对URL网址中的中文编码与解码实例详解
2020/02/18 Python
Python json解析库jsonpath原理及使用示例
2020/11/25 Python
python 实现的车牌识别项目
2021/01/25 Python
斯洛伐克时尚服装网上商店:Cellbes
2016/10/20 全球购物
波兰最大的度假胜地和城市公寓租赁运营商:Sun & Snow
2018/10/18 全球购物
Feelunique美国:欧洲大型的在线美妆零售电商
2018/11/04 全球购物
大学生村官承诺书
2014/03/28 职场文书
农村党员一句话承诺
2014/05/30 职场文书
外出考察学习心得体会
2016/01/18 职场文书
Python 多线程之threading 模块的使用
2021/04/14 Python
MySQL RC事务隔离的实现
2022/03/31 MySQL