VUE中导出Excel功能的实现
vue导出excel操作(wxport2excel.js)
·
一、在上一篇文章中我们已经完成了WebSql的操作,并且初始化了一些数据,那么如何导出这些数据呢?
**当然方法有多种,本次我们采用引入Export2Excel.js的方法
1、添加所需依赖
npm install file-saver
npm install xlsx
npm install script-loader
2、在src目录下新建一个文件夹,里面放入本次功能需要的文件:Blob.js和 Export2Excel.js(这两个文件可自行百度下载)
需要注意的是:Export2Excel.js中,顶部的路径需要根据自己的配置修改
3、在需要此功能的页面引入,注意路径(当然可以做成通用的方法,此处不做赘述)
3、调用此方法,本次我们使用上一篇文章中创建的数据库中的数据作为演示
//格式化
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]))
},
//获取城镇数据
GetCityList:function(){
var that=this;//与this区别开
that.ExportList=[];
this.$db.transaction(function(tx){
tx.executeSql("select * from City",[],function(tx,res){
for(var i=0;i<res.rows.length;i++){
that.ExportList.push(res.rows[i]);
}
that.getExcel_city(that.ExportList);
},function(tx,err){
console.log(err);
}
);
});
},
//导出城镇方法
getExcel_city(res) {
require.ensure([], () => {
const tHeader = ['编码', '名称']
const filterVal = ['CityID', 'Name']
const list = res
const data = this.formatJson(filterVal, list)
export_json_to_excel(tHeader, data, '城镇列表')
})
},
4、绑定到按钮上,点击按钮,可以导出excel:
二、介绍第二种方法:vue-json-excel
1、首先引入依赖
npm install vue-json-excel
2、在main.js中引用此方法
//引入导出excel组件方法
import JsonExcel from 'vue-json-excel'
Vue.component('downloadExcel', JsonExcel)
3、在需要使用此功能的页面中直接调用
//json_data为数据源List,json_fields为表头信息和取值逻辑
<button :data="json_data" :fields="json_fields" name="UserInfo">点击导出</button>
//表头为User_Name、City、phone、remark
//取值逻辑为:User_Name取字段name
//City取info中的city
//phone取phone中的landline(拼接后)
//remark取info中的remark(拼接后)
json_fields: {
"User_Name": "name", //常规字段
"City": "info.city", //支持嵌套属性
"phone": {
field: "phone.landline",
callback: value => {//自定义回调函数
return `Landline Phone - ${value}`;//拼接返回值
}
},
"remark": {
field: "info.remark",
callback: value => {
return `Reamrk: ${value}`;
}
}
},
//测试数据
json_data: [
{
name: "张三",
info:{
city: "New York",
country: "EN",
remark:"测试1"
},
phone: {
mobile: "1",
landline: "11"
}
},
{
name: "李四",
info:{
city: "BeiJing",
country: "CN",
remark:"测试2"
},
phone: {
mobile: "2",
landline: "22"
}
},
{
name: "王二",
info:{
city: "Nanjing",
country: "CN",
remark:"测试3"
},
phone: {
mobile: "3",
landline: "33"
}
}
],
//数据格式
json_meta: [
[{
" key ": " charset ",
" value ": " utf- 8 "
}]
]
4、导出结果
5、相关代码已经上传Github,地址如下:
https://github.com/736755244/Export
三、以上就是本次分享的内容,下一篇将介绍VUE导入并读取EXCEL的相关内容
欢迎留言,一起交流学习!
更多推荐
已为社区贡献4条内容
所有评论(0)