vue 下载Excel 文件

2022-07-22 10:18:58

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"&nbsp;"+ value;}},// 状态: {//   field: "Status",//   callback: (value) => {//     return value === true ? "启用" : "禁用";//   },// },},json_name:"房屋图.xls",

点击按钮下载就行。

  • 作者:好多达不溜
  • 原文链接:https://blog.csdn.net/weixin_46531845/article/details/124147123
    更新时间:2022-07-22 10:18:58