使用 VUE 把你的数据导出成 Excel 表格

一、安装 vue-json-excel 依赖

cnpm install vue-json-excel --save

二、初始化 vue-json-excel

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

Vue.component('downloadExcel', JsonExcel)

三、准备数据
在这里，我们需要准备两个数据：

表头名称：json_fields
表格数据：json_data
1、表头数据

json_fields: {
            'Complete name': 'name',
            'City': 'city',
            'Telephone': 'phone.mobile',
            'Telephone 2' : {
                field: 'phone.landline',
                callback: (value) => {
                    return `Landline Phone - ${value}`;
                }
            },
        }

表头数据由一个 JSON OBJECT 组成，其中：

key：表头名称
value：对应数据名称（看不明白？不要急，继续往下看）

2、表格数据

json_fields: {
            'Complete name': 'name',
            'City': 'city',
            '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 ARRAY 组成，其每一个 ITEM 又由一个 JSON OBJECT 组成，其中：

key：对应数据名称（看明白对应关系了吧）
value：数据
好了，现在我们可以先去准备下我们的数据，为稍后我们即将要做的导出作准备

四、准备导出

    Download Excel (you can customize this with html code!)

运行项目，点击后即可导出一个 .csv 文件