vue导出excel表格（详细教程）

在开发的时候，会经常用的导出excel表格功能

一、安装vue-json-excel

npm install vue-json-excel -S

二、main.js中引入

import JsonExcel from 'vue-json-excel'
Vue.component('downloadExcel', JsonExcel)

局部组件注册(面要导出的页面)

import downloadExcel from 'vue-json-excel'

components:{
        downloadExcel //组件注册
},

页面中使用

    <download-excel
      class="export-excel-wrapper"
      :data="DetailsForm"
      :fields="jsonFields"
      type = "xlsx"
      :header="title"
      name="XX统计.xlsx"
    >
      <el-button type="success">导出</el-button>
    </download-excel>

data() {
        return {            
            title: "xx公司表格",
           // 导出的表头及其对应json的key值
            jsonFields: {
                "排查日期":'date',
                "整改隐患内容":'details',
                "整改措施":'measure',
                "整改时限":'timeLimit',
                "应急措施和预案":'plan',
                "整改责任人":'personInCharge',
                "填表人":'preparer',
                "整改资金":'fund',
                "整改完成情况":'complete',
                "备注":'remark',
            },
            DetailsForm: [
                {
                    date: "2022-3-10",
                    details: "卸油区过路灯损坏",
                    measure: "更换灯泡",
                    timeLimit: "2022-3-21",
                    plan: "先使用充电灯代替,贴好安全提醒告示",
                    personInCharge: "王xx",
                    preparer: "王xx",
                    fund: "20元",
                    complete: "已完成整改",
                    remark: "重新更换了灯泡",
                },

            ],
        };
    },

字段说明

• DetailsForm：需要导出的数据

• title：表格标题

• json_fields：里面的属性是excel表每一列的title,用多个词组组成的属性名(中间有空格的)要加双引号; 指定接口的json内某些数据下载,若不指定，默认导出全部数据中心全部字段

1. class：类
2. data：这个data是需要打印的数据
3. fields：打印格式
4. type：导出的类型
5. header：头
6. name：导出的文件名
7. style：样式