vue 下载Excel 文件 vue-json-excel
1.安装
npm install vue-json-excel -S
2.引入
在mian.js中
//引入 导出Excel vue-json-excelimport JsonExcelfrom"vue-json-excel";
Vue.component("downloadExcel", JsonExcel);
3.构建外部-公共组件 downloadExcel
通过传值的方式,传入参数。参考父子组件传值
<template><!-- name="导出的文件名字.xls"--><download-excel:fetch="fetchData":fields="json_fields"
worksheet="My Worksheet":name="json_name"class="excel"><el-button size="mini"class="el-icon-download"></el-button></download-excel></template><script>exportdefault{props:{list: Array,json_fields: Object,json_name: String,},data(){return{};},methods:{fetchData(){let excelList=[];
console.log("this.list");
console.log(this.list);//this.list是从后台接口获取的一组JSON数据(注意:使用forEach前,先判断数组存不存在!)this.list.forEach((item)=>{
excelList.push(item);});
console.log("excelList");
console.log(excelList);return excelList;},},};</script><style lang="less" scoped>.excel{display: inline-block;}</style>
4.使用公共组件
引入
import downloadExcelfrom"@/components/downloadExcel.vue";
定义
components:{ downloadExcel},
使用在 vue 页面中
<!-- Excel --><downloadExcel:list="list":json_fields="json_fields":json_name="json_name"/>
相关参数。json_fields是下载的时候对应的 表头和字段。json_name是下载时候的名字。list是table表中绑定的数据。
json_fields:{户主姓名:"Name",户主证件类型:"Id_Type",户主证件号码:{//身份证号码长度 太长,变成科学计数法,通过将其变为字符串来解决field:"Id_No",callback:value=>{return" "+ value;}},// 状态: {// field: "Status",// callback: (value) => {// return value === true ? "启用" : "禁用";// },// },},json_name:"房屋图.xls",
点击按钮下载就行。