在Vue里如何把网页的数据导出到Excel的方法

在在Vue里如何把网页的数据导出到里如何把网页的数据导出到Excel的方法的方法

主要介绍了在Vue里如何把网页的数据导出到Excel，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习

价值，需要的朋友们下面随着小编来一起学习学习吧

前言：前言： 在做后台管理的时候，我们往往有需要把网页上面的数据导出到excel这样的需求，真实的企业项目里对应一些导出财务报表、员工信息、交易

记录、考勤打卡记录…等等需求，本文将对此做探讨。

开始前补充：开始前补充： 网上是有些牛人已经把这个功能封装成组件了，但每个人的封装逻辑五花八门，组件的功能也很有限，不一定真能完全符合自己的业务

需求，找相应的API也很麻烦，存在不太敢用，不会用等问题，那么本文将教你如何自己封装，如何自己自定义相关功能，如何自定义如何自己封装，如何自己自定义相关功能，如何自定义Excel的样式的样式 ，

尤其是导出excel后自定义样式，这在一些现存封装好的组件是不好实现的，本文可以实现！

<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>

column:[] //表格的列

}

},

methods:{

toExcel(){

//调用我们封装好的方法，传3个参数过去，分别为：数据，文件名，回到函数(可根据自己需求决定回调是否需要)

transform(this.tableData, '我是文件名', this.callback)

},

callback(info){

console.log(info)

{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'},

{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}

]

}

}