在在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>
- 1
- 2
前往页