Vue插件之導出EXCEl

本周項目需要實現導出列表數據的功能，在github上找到了一個比較好用的插件~

簡單的整理一下，希望對各位有所幫助。

github地址

使用方法：

1.npm安裝依賴

npm install vue-json-excel

2.項目主文件入口main.js全局引入

import JsonExcel from 'vue-json-excel'

Vue.component('downloadExcel', JsonExcel)

3.直接在項目中使用

 <download-excel :data="exportData" :fields="json_fields" name="filename.xls" >
      <span>導出數據</span>
 </download-excel>

4.組件屬性說明

屬性名	類型	描述
data	Array	需要導出的數據，支持中文
fields	Object	定義需要導出的數據字段
name	string	導出EXCEL的文件名
type	string	導出EXCLE的文件類型，兩種格式xls,csv,默認是xls
fetch	function	回調函數。在下載前通過接口獲取數據。只有在沒有data屬性的情況下該屬性才會生效

下面來舉幾個栗子

<download-excel
    class   = "btn btn-default"
    :data   = "json_data"
    :fields = "json_fields"
    name    = "filename.xls">

    Download Excel (可以自定義自己想要的html)

</download-excel>

const app = new Vue({
    el: '#app',
    data: {
　　　　　//列出自己需要導出的字段
        json_fields: {
            //生成excel的字段：導出數據的字段
            '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': '[phone]'
                }
            },
            {
                'name': 'Thessaloniki',
                'city': 'Athens',
                'country': 'Greece',
                'birthdate': '1987-11-23',
                'phone': {
                    'mobile': '[phone]',
                    'landline': '(2741) 2621-244'
                }
            }
        ]
    }
})

json_fields的回調函數有3種寫法
寫法一：

   json_fields: {
        'Complete name': 'name',
        'City': 'city',
        'Telephone': 'phone.mobile',
        'Telephone 2' : {
            //帶field：從該條數據中選擇一個字段最深處的數據
            field: 'phone.landline',
            //value就是這個字段值代表最深處的數據
            callback: (value) => {
                return `Landline Phone - ${value}`;
            }
        },
    },

   寫法二：

json_fields: {
       'Complete name': 'name',
       'City': 'city',
        'Telephone': 'phone.mobile',
        'Telephone 2' : {
　　　　　　　//帶field：從該條數據中選擇一個字段
　　　　　　　field: 'phone', 
            //value就是這個字段值
　　　　　　　callback: (value) => {
　　　　　　　　 return `Landline Phone - ${value.landline}`;
              } 
　　　　　　}, 
　　　　},     

   寫法三：

 json_fields: {
        'Complete name': 'name',
        'City': 'city',
        'Telephone': 'phone.mobile',
        'Telephone 2' : {
            //沒有field:value代表整條數據
            callback: (value) => {
                return `Landline Phone - ${value.phone.landline}`;
            }
        },
    },