VUE中使用vue-json-excel 将后台返回的json以excel表格形式导出

参考：VUE中使用vue-json-excel 将后台返回的json以excel表格形式导出
使用vue-json-excel生成并导出excel

一、安装vue-json-excel

npm install vue-json-excel -S

二、main.js中引入

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

三、简单使用固定数据

代码

<download-excel
     class = "export-excel-wrapper"
     :data = "json_data"
     :fields = "json_fields"
      header="这是个excel的头部"
      name = "导出的表格名称.xls">
      <el-button type="primary" size="small">导出EXCEL</el-button>
</download-excel>

数据 (例子中,json_data写死的)

• json_data：需要导出的数据

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

     json_fields: {
        姓名: "name",   
        城市: "city",
        国家: "country",
        生日:"birthdate",
        "电话 测试": "phone"    //如果命名的标题有空格,需要用双引号
      },
      json_data: [
        {
          name: "张三",
          city: "北京",
          country: "中国",
          birthdate: "1998-03-15",
          phone:"15645689652"
        },
        {
          name: "李四",
          city: "上海",
          country: "中国",
          birthdate: "1988-03-15",
          phone:"15645689652"
        }
      ]

点击按钮导出EXCEL

四、使用回调获取数据及详细参数

属性名	类型	描述	默认值
data	数组	要输出的数据
fields	Object	声明要导出的JSON对象中的字段。就像是在制作表头 默认将导出JSON中的所有属性。
export-fields	Object	用于解决其他组件使用可变fields的问题,exportFields的工作原理与fields完全相同
type	字符串	表格类型	[xls, csv]
name 字符串	文件名	data.xls
header	标题	表格的标题
footer	字符串	页脚
default-value	字符串	用于填充空置单元格	‘’
worksheet	字符串	表单名称	‘Sheet1’
fetch	函数	进行回调，以便在下载之前获取数据（如果已设置），则在按下鼠标后以及下载过程之前会立即运行。重要信息：仅在未定义数据属性的情况下有效，即不使用data参数
before-generate	函数	回调以在生成/获取数据之前立即调用方法，例如：显示加载进度
before-finish	函数	在下载框弹出之前进行回调以调用方法，例如：隐藏加载进度
stringifyLongNum	布尔	字符串化长整数和十进制（解决数字精度丢失的问题），默认值：false
escapeCsv	布尔	可以转义CSV值，以解决数字字段中的一些问题。

按需获取数据

<template>
  <div id="app">
 
    <hr>
    <h2>Fetch Example</h2>
    <downloadexcel
      class            = "btn"
      :fetch           = "fetchData"
      :fields          = "json_fields"
      :before-generate = "startDownload"
      :before-finish   = "finishDownload">
      Download Excel
    </downloadexcel>
  </div>
</template>
 
<script>
import downloadexcel from "vue-json-excel";
import axios from 'axios';
 
export default {
  name: "App",
  components: {
    downloadexcel,
  },
  data(){
    return {
      json_fields: {
        'Complete name': 'name',
        'Date': 'date',
      },
    }
  }, //data
  methods:{
    async fetchData(){
      const response = await axios.get('https://holidayapi.com/v1/holidays?key=a4b2083b-1577-4acd-9408-6e529996b129&country=US&year=2017&month=09');
      console.log(response);
      return response.data.holidays;
    },
    startDownload(){
        alert('show loading');
    },
    finishDownload(){
        alert('hide loading');
    }
  }
};
</script>