介绍 & lt;风格lang=發ess"比;
& lt;/style>
& lt; template>
& lt; div>
& lt; h3>这是一个使用iview的表组件,做展示用,你当然可以在自己的项目里用自己想要的任何表组件& lt;/h3>
& lt;表:列=癱olumn":数据=皌ableData"祝辞& lt;/Table>//iview的表组件
& lt;按钮@click=皌oExcel"祝辞导出表格数据到Excel//导出excel的按钮
& lt;/div>
& lt;/template>
& lt; script>
从& # 39;进口变换。/exportToExcel.js& # 39;//这个方法来源于二步骤封装的方法,往下看
出口默认{
名称:& # 39;应用# 39;//这是一个父组件,名称为App.vue
数据(){
返回{
tableData:[],//表格数据
专栏:[]//表格的列
}
}，
方法:{
toExcel () {//调用我们封装好的方法,传3个参数过去,分别为:数据,文件名,回到函数(可根据自己需求决定回调是否需要)
变换。tableData & # 39;我是文件名& # 39;this.callback)
}，
回调(信息){
console.log(信息)
}
}，
创建(){//模拟网络请求
这一点。tableData=[
{指数:1,名字:& # 39;我是1号& # 39;,年龄:18日性别:& # 39;男& # 39;,爱好:& # 39;网络# 39;,头发:& # 39;厚# 39;,受薪:& # 39;99999999 & # 39;},
{指数:2,名字:& # 39;我是2号& # 39;,年龄:18日性别:& # 39;男& # 39;,爱好:& # 39;网络# 39;,头发:& # 39;厚# 39;,受薪:& # 39;99999999 & # 39;},
{指数:3,名字:& # 39;我是3号& # 39;,年龄:18日性别:& # 39;男& # 39;,爱好:& # 39;网络# 39;,头发:& # 39;厚# 39;,受薪:& # 39;99999999 & # 39;},
{指数:4,名字:& # 39;我是4号& # 39;,年龄:18日性别:& # 39;男& # 39;,爱好:& # 39;网络# 39;,头发:& # 39;厚# 39;,受薪:& # 39;99999999 & # 39;},
{指数:5,名字:& # 39;我是5号& # 39;,年龄:18日性别:& # 39;男& # 39;,爱好:& # 39;网络# 39;,头发:& # 39;厚# 39;,受薪:& # 39;99999999 & # 39;},
名称:{指数:6日& # 39;我是6号& # 39;,年龄:18岁性:& # 39;女& # 39;,爱好:& # 39;网络# 39;,头发:& # 39;厚# 39;,受薪:& # 39;99999999 & # 39;},
名称:{指数:7日& # 39;我是7号& # 39;,年龄:18岁性:& # 39;女& # 39;,爱好:& # 39;网络# 39;,头发:& # 39;厚# 39;,受薪:& # 39;99999999 & # 39;},
名称:{指数:8日& # 39;我是8号& # 39;,年龄:18岁性:& # 39;女& # 39;,爱好:& # 39;网络# 39;,头发:& # 39;厚# 39;,受薪:& # 39;99999999 & # 39;},
名称:{指数:9日& # 39;我是9号& # 39;,年龄:18岁性:& # 39;女& # 39;,爱好:& # 39;网络# 39;,头发:& # 39;厚# 39;,受薪:& # 39;99999999 & # 39;},
{指数:10,名字:& # 39;我是10号& # 39;,年龄:18日性别:& # 39;女& # 39;,爱好:& # 39;网络# 39;,头发:& # 39;厚# 39;,受薪:& # 39;99999999 & # 39;},
名称:{指数:11日& # 39;我是11号& # 39;,年龄:18岁性:& # 39;男& # 39;,爱好:& # 39;网络# 39;,头发:& # 39;厚# 39;,受薪:& # 39;99999999 & # 39;},
名称:{指数:12日& # 39;我是12号& # 39;,年龄:18岁性:& # 39;男& # 39;,爱好:& # 39;网络# 39;,头发:& # 39;厚# 39;,受薪:& # 39;99999999 & # 39;},
名称:{指数:13日& # 39;我是13号& # 39;,年龄:18岁性:& # 39;女& # 39;,爱好:& # 39;网络# 39;,头发:& # 39;厚# 39;,受薪:& # 39;99999999 & # 39;},
名称:{指数:14日& # 39;我是14号& # 39;,年龄:18岁性:& # 39;女& # 39;,爱好:& # 39;网络# 39;,头发:& # 39;厚# 39;,受薪:& # 39;99999999 & # 39;},
名称:{指数:15日& # 39;我是15号& # 39;,年龄:18岁性:& # 39;男& # 39;,爱好:& # 39;网络# 39;,头发:& # 39;厚# 39;,受薪:& # 39;99999999 & # 39;}
]
这一点。列=[
{关键:& # 39;指数# 39;,标题:& # 39;序号& # 39;,宽度:120},
{关键:& # 39;名字# 39;,标题:& # 39;姓名& # 39;,宽度:120},
{关键:& # 39;年龄# 39;,标题:& # 39;年龄& # 39;,宽度:120},
{关键:& # 39;性与# 39;,标题:& # 39;性别& # 39;,宽度:120},
{关键:& # 39;爱好# 39;,标题:& # 39;爱好& # 39;,宽度:120},
{关键:& # 39;头发# 39;,标题:& # 39;发量& # 39;,宽度:120},
{关键:& # 39;受薪# 39;,标题:& # 39;薪水& # 39;,宽度:120}
]
}
}
& lt;/script>
在Vue中实现把网页的数据导出到Excel的方法?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
一、使用脚手架创建一个Vue项目,在生成的src目录下创建exportToExcel.js文件(名称自取),并且到应用程序。vue里面快速模拟生成一份表格数据
1,我这里简单模拟网页上一份表格数据,使用的是iview的表组件,网页上展示的表格的组件你可以用你自己喜欢的组件,我这里做演示用,你完全可以不跟我一样,
