vue-json-excel 使用方法 导出excel 详解 以及实际操作 ，通俗易懂

vue-json-excel 的具体使用方法

1安装

npm install vue-json-excel -S

2在main.js中注册使用

import JsonExcel from ‘vue-json-excel’
Vue.component(‘downloadExcel’, JsonExcel);

3在页面中使用

<download-excel
    class = "export-excel-wrapper"
    :data = "dataList"
    :fields = "fieldsList"
    name = "filename.xls">
    <!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
    <!-- <el-button type="primary" size="small">导出EXCEL</el-button> -->
</download-excel>

具体api的使用
1.data 类型：Array 需要导出的数据，支持中文
2.fields 类型：object 定义需要导出数据的字段
3.name 类型：Sting 导出文件的名字
4.type 类型：String 导出文件的类型 默认xsl
5 export-fields (exportFields) ：object 用于解决使用可变字段的其他组件（例如vee-validate）的问题。exportFields的工作原理类似于字段
6.header 表头 可以传对个值 类型 String 或者 list
7 footer 页脚 可以传多个值 数据的页脚。可以是一个字符串（一个页脚）或一个字符串数组（多个页脚）。
8 default-value (defaultValue) 类型 String 当字段没有值的时候，付给默认值
9.worksheet 类型String 工作表选项卡的名称 默认 sheet1
10.fetch 进行回调，以在下载之前获取数据
11.before-generate 在生成/获取数据之前回调以调用方法
12.before-finish 在下载框弹出之前进行回调以调用方法，例如：隐藏加载进度
13.stringifyLongNum 字符串化长整数和十进制（解决数字精度丢失的问题），默认值：false

实际使用

<download-excel
        class = "export-excel-wrapper"
        :data = "reportList"
        :fields = "json_fields"
        :title="titleList"
        :footer="excelFooter"
        :default-value="defaultValue"
        name = "嘉易达监管场所库存情况报表.xls">
        <!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
        <el-button type="primary" size="mini" @click="importExcel">导出EXCEL</el-button>

  // 导出Excel 字段
      json_fields: {
        "寄仓客户": "column1",    //常规字段
        "合同号": "column2", //支持嵌套属性
        "提煤单号":"column3",
        "提煤单重量":"column4",
        "已分配未完成车辆":"column5",
        "已分配未提离重量":"column6",
        "已完成车辆":"column7",
        "已提离重量":"column8",
        "剩余重量":"column9",

      },

 // 导出格式
      json_meta: [
        [
          {
            " key ": " charset ",
            " value ": " utf- 8 "
          }
        ]
      ],

// 导出标题集合
      titleList:[
      ],

// Excel 页脚
      excelFooter:'',