没有合适的资源?快使用搜索试试~ 我知道了~
在Vue里如何把网页的数据导出到Excel的方法
5星 · 超过95%的资源 0 下载量 175 浏览量
2021-01-18
17:01:57
上传
评论
收藏 151KB PDF 举报
温馨提示
前言: 在做后台管理的时候,我们往往有需要把网页上面的数据导出到excel这样的需求,真实的企业项目里对应一些导出财务报表、员工信息、交易记录、考勤打卡记录…等等需求,本文将对此做探讨。 开始前补充: 网上是有些牛人已经把这个功能封装成组件了,但每个人的封装逻辑五花八门,组件的功能也很有限,不一定真能完全符合自己的业务需求,找相应的API也很麻烦,存在不太敢用,不会用等问题,那么本文将教你如何自己封装,如何自己自定义相关功能,如何自定义Excel的样式 ,尤其是导出excel后自定义样式,这在一些现存封装好的组件是不好实现的,本文可以实现! 本文导出Excel方法的优点: 网页上的table
资源推荐
资源详情
资源评论
在在Vue里如何把网页的数据导出到里如何把网页的数据导出到Excel的方法的方法
前言:前言: 在做后台管理的时候,我们往往有需要把网页上面的数据导出到excel这样的需求,真实的企业项目里对应一些导出财务报表、员工信息、交易
记录、考勤打卡记录…等等需求,本文将对此做探讨。
开始前补充:开始前补充: 网上是有些牛人已经把这个功能封装成组件了,但每个人的封装逻辑五花八门,组件的功能也很有限,不一定真能完全符合自己的业务
需求,找相应的API也很麻烦,存在不太敢用,不会用等问题,那么本文将教你如何自己封装,如何自己自定义相关功能,如何自定义如何自己封装,如何自己自定义相关功能,如何自定义Excel的样式的样式 ,
尤其是导出excel后自定义样式,这在一些现存封装好的组件是不好实现的,本文可以实现!
本文导出本文导出Excel方法的优点:方法的优点: 网页上的table与导出Excel之后的table完全独立,也就是说你导出Excel之后的内容与网页没有直接联系,这意味着数据
导出到Excel后有非常强的1定制性定制性 ,实在不理解这句话也没关系,本文看完你自然就明白了。2能跨浏览器兼容,甚至是某能跨浏览器兼容,甚至是某E浏览器。浏览器。3导出非常快,导出非常快,
不卡顿!不卡顿!
一、使用脚手架创建一个Vue项目,在生成的src目录下创建exportToExcel.js文件(名称自取), 并且到App.vue里面快速模拟生成一份表格数据
1、我这里简单模拟网页上一份表格数据,使用的是iview的table组件,网页上展示的表格的组件你可以用你自己喜欢的组件,我这里做演示用,你完
全可以不跟我一样;
<style lang="less">
</style>
<template>
<div>
<h2>这是一个使用iview的table组件,做展示用,你当然可以在自己的项目里用自己想要的任何table组件</h2>
<Table :columns="column" :data="tableData"></Table> //iview的Table组件
<Button @click="toExcel">导出表格数据到Excel</Button> //导出excel的按钮
</div>
</template>
<script>
import transform from './exportToExcel.js' //这个方法来源于二步骤封装的方法,往下看
export default {
name:'App', //这是一个父组件,名称为App.vue
data(){
return {
tableData:[], //表格数据
column:[] //表格的列
}
},
methods:{
toExcel(){
//调用我们封装好的方法,传3个参数过去,分别为:数据,文件名,回到函数(可根据自己需求决定回调是否需要)
transform(this.tableData, '我是文件名', this.callback)
},
callback(info){
console.log(info)
}
},
created(){
//模拟网络请求
this.tableData = [
{index:1,name:'我是1号',age:18,sex:'男',hobby:'web',hair:'thick',salaried:'99999999'},
{index:2,name:'我是2号',age:18,sex:'男',hobby:'web',hair:'thick',salaried:'99999999'},
{index:3,name:'我是3号',age:18,sex:'男',hobby:'web',hair:'thick',salaried:'99999999'},
{index:4,name:'我是4号',age:18,sex:'男',hobby:'web',hair:'thick',salaried:'99999999'},
{index:5,name:'我是5号',age:18,sex:'男',hobby:'web',hair:'thick',salaried:'99999999'},
{index:6,name:'我是6号',age:18,sex:'女',hobby:'web',hair:'thick',salaried:'99999999'},
{index:7,name:'我是7号',age:18,sex:'女',hobby:'web',hair:'thick',salaried:'99999999'},
{index:8,name:'我是8号',age:18,sex:'女',hobby:'web',hair:'thick',salaried:'99999999'},
{index:9,name:'我是9号',age:18,sex:'女',hobby:'web',hair:'thick',salaried:'99999999'},
{index:10,name:'我是10号',age:18,sex:'女',hobby:'web',hair:'thick',salaried:'99999999'},
{index:11,name:'我是11号',age:18,sex:'男',hobby:'web',hair:'thick',salaried:'99999999'},
{index:12,name:'我是12号',age:18,sex:'男',hobby:'web',hair:'thick',salaried:'99999999'},
{index:13,name:'我是13号',age:18,sex:'女',hobby:'web',hair:'thick',salaried:'99999999'},
{index:14,name:'我是14号',age:18,sex:'女',hobby:'web',hair:'thick',salaried:'99999999'},
{index:15,name:'我是15号',age:18,sex:'男',hobby:'web',hair:'thick',salaried:'99999999'}
] this.column = [
{key:'index',title:'序号',width:120},
{key:'name',title:'姓名',width:120},
{key:'age',title:'年龄',width:120},
{key:'sex',title:'性别',width:120},
{key:'hobby',title:'爱好',width:120},
{key:'hair',title:'发量',width:120},
{key:'salaried',title:'薪水',width:120}
] }
}
</script>
weixin_38576561
- 粉丝: 4
- 资源: 903
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 9.3 使用EigenFaceRecognizer训练人脸分类器,并将模型保存为faceModel.xml文件
- (源码)基于Spring Boot 2的管理后台系统.zip
- (源码)基于Java Swing的铁路售票系统.zip
- (源码)基于Java的电源租赁管理系统.zip
- (源码)基于STM32F4的嵌入式系统实验室项目.zip
- (源码)基于Python和PyTorch框架的强化学习导航系统.zip
- (源码)基于Python的健康日报自动填写系统.zip
- 9.1 使用haarcascade-frontalface-default.xml分类器对静态图像进行人脸检测
- (源码)基于Arduino和M5Atom的WiFi CO2监测系统.zip
- (源码)基于Keras的YoloV3目标检测系统.zip
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
- 1
- 2
前往页