vue 前端excel文档导出

1、包安装及使用

npm i -s  vue-json-excel

在vue main.js 中，或者在nuxt 框架plugins 文件夹下新建

import Vue from 'vue'
import JsonExcel from 'vue-json-excel'

Vue.component('downloadExcel', JsonExcel)

2、在页面中使用

<download-excel
      :fields="exports.fields"
      :name="exports.name"
      default-value="暂无"
      :fetch="fetchData"
    >
      下载
    </download-excel>






 export default {
    data() {
        return {
            exports: {
        name: '订单汇总',
        fields: {
          订单号: {
            field: 'id',
            callback: value => {
              return value + '\n'
            }
          },
          设备IMEI号: {
            field: 'imei',
            callback: value => {
              return value + '\n'
            }
          },
          货道: 'channel',
          商品名称: 'name',
          交易金额: {
            field: 'amount',
            callback: value => {
              return value / 100
            }
          },
          进货价格: {
            field: 'realPrice',
            callback: value => {
              return value / 100
            }
          },
          运营商: 'companyName',
          交易状态: {
            field: 'status',
            callback: value => {
              let str = '待支付'
              switch (value) {
                case '2':
                  str = '支付完成'
                  break
                case '3':
                  str = '交易完成'
                  break
                case '4':
                  str = '交易失败'
                  break
                case '5':
                  str = '已退款'
                  break
              }
              return str
            }
          },
          备注: 'detail',
          收款人: {
            field: 'merName',
            callback: value => {
              return value + '\n'
            }
          },
          消费者: {
            field: 'buyerUsername',
            callback: value => {
              return value + '\n'
            }
          },
          支付方式: {
            field: 'targetSys',
            callback: value => {
                return value
            }
          },
          创建时间: {
            field: 'createdAt',
            callback: value => {
              return this.dateFormat(value)
            }
          }
        }
      }
        }
    }
}

fetchData 函数直接返回json 数组数据 ， 值是数字的列换行