vue使用vue-json-excel导出excel

安装依赖包

npm install vue-json-excel

在main.js种引入

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

在项目中

<template>
  <div id="app">
    <download-excel class="export-excel-wrapper"   name="excelName"  :data="json_data" :fields="json_fields" name="点击下载">
    </download-excel>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        json_fields: {
          "Complete name": "name", //常规字段
          Telephone: "phone.mobile", //支持嵌套属性
          "Telephone 2": {
            field: "phone.landline",
            //自定义回调函数
            callback: value => {
              return `Landline Phone - ${value}`;
            }
          }
        },
        json_data: [{
            name: "Tony Peña",
            city: "New York",
            country: "United States",
            birthdate: "1978-03-15",
            phone: {
              mobile: "1-541-754-3010",
              landline: "(541) 754-3010"
            }
          },
          {
            name: "Thessaloniki",
            city: "Athens",
            country: "Greece",
            birthdate: "1987-11-23",
            phone: {
              mobile: "+1 855 275 5071",
              landline: "(2741) 2621-244"
            }
          }
        ],
        json_meta: [
          [{
            " key ": " charset ",
            " value ": " utf- 8 "
          }]
        ]
      };
    }
  }
</script>

支持回调函数

 json_fields: {
                日期: {
                    field: "c_time",
                    //自定义回调函数
                    callback: value => {
                        return `${fromTime(value)}`;
                    }
                },
                用户名: "username", //支持嵌套属性
                数量: "number" //支持嵌套属性
            },
            json_meta: [
                [
                    {
                        " key ": " charset ",
                        " value ": " utf- 8 "
                    }
                ]
            ],