vue导出Excel 表格

一   下载

cnpm install vue-json-excel -S

二  main.js 中引入

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

三  在代码中使用

              <template>
              <download-excel
              class="export-excel-wrapper"
              :data="DetailsForm"  
              :fields="json_fields"  
              :header="title"
              name="需要导出的表格名字.xls"
            >
              <!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
              <el-button type="success">导出</el-button>
              </download-excel>
              </template>

后端获取数据的数组字段跟你json_fields中的字段一致时 直接绑定获取数据的数组

四 数据

• DetailsForm：需要导出的数据

• title：表格标题

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

• <script>
  title: "xx公司表格",
   json_fields: {
          "排查日期":'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: "重新更换了灯泡",
          },
         
        ],
  </script>

  五 效果  点击导出按钮  

• 

   

    一些常用参数