一、基本使用方法

1.安装

标准
npm install vue-json-excel
国内
yarn add vue-json-excel

2、在main.js中引入JsonExcel

import Vue from 'vue'
import JsonExcel from "vue-json-excel"
<--全局组件挂载-->
Vue.component("downloadExcel", JsonExcel)

3.在页面中引用

<template>
  <download-excel class="export-excel-wrapper" :fetch='fetchData' :fields="json_fields" :header="header" :name="excelName">
    <el-button icon="el-icon-download" size="mini" :loading="tableLoading">下载</el-button>
  </download-excel>
</template>
<script>
  data() {
    return {
    json_fields: {
      编号: {
          field: 'no',
          callback: (val) => {
               return "&nbsp;" + val // 防止编号数字过长导致导出时转化为科学计数法。
            }
      },
      姓名: "name",
      性别: {
            field: 'sex',
            callback: (val) => {
            const obj = {
              0:'女'，
              1: '男'
            }
             return obj[val]
            }
          },
      "资产(元)": "amount" //
    }，
    methods(){
    fetchData(){
        return [{
            no: '1234567678987655456674322',
            name:'徐凤年'，
            sex: 1,
            amount: '999999999'
        }]
    }
    }
    }
  }
</script>

二、API参数列表

参数名	参数类型	描述	默认值
data	Array	需要导出的数据
fields	Object	要导出的JSON对象中的字段，如果没有提供，JSON中的所有属性将被导出
export-fields (exportFields)	Object	解决与其他组件的命名冲突问题，用于解决使用变量字段的其他组件（如 vee-validate）的问题。导出字段的工作原来与字段完全相同，
type	string	文件类型 xls或者csv
name	string	导出的文件名称
header	string/Array	表格的标题。可以是字符串（一个标题）或字符串数组（多个标题）。
title(已弃用)	string/Array	与header一样，为了向后兼容，我们也保留了title，但不建议使用它，因为它会与HTML5的title属性冲突。
footer	string/Array	表格的页脚。可以是字符串（一个页脚）或字符串数组（多个页脚）
default-value (defaultValue)	string	如果某一行没有字段值时候起作用，当行没有字段值时用作回退
worksheet	string	工作表选项卡的名称
fetch	Function	在点击下载按钮后，开始下载之前执行的函数。回调以获取数据下载之前，如果它被设置设置了，它将在点击鼠标之后立即执行(这个过程是在开始下载之前的)。重要提示:只有在没有定义数据的情况下才有效。
before-generate	Function	在生成/获取数据之前调用方法，例如:显示加载进度
before-finish	Function	在下载框弹出之前调用方法的回调，例如:隐藏加载进度
stringifyLongNum	Boolean	字符串化长数字和小数（解决数字精度损失的问题）	false
escapeCsv	Boolean	这将转义CSV值，以修复一些excel数字字段的问题。但这会用=" and "包装所有csv数据，以避免你不得不将这个道具设为假。	true

官网地址

github.com/jecovier/vu…

注释*

1.防止编号字段数字过长导致导出时转化为科学计数法，可以在数据前加一个空格。 2.json_fields中如果有空格或者括号，需要用双引号。