Vue實現在前端導出Excel 方法2

也可以去看下我的方法1：https://www.cnblogs.com/yingyigongzi/p/10915382.html

-------------------------------------------------------

vue-json-excel：https://github.com/jecovier/vue-json-excel

參考：https://www.cnblogs.com/zengjielin/p/9667476.html

npm安裝依賴包

cnpm install --save vue-json-excel

 項目入口文件引進注冊並且使用

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

Vue.component('downloadExcel', JsonExcel)

 在頁面中使用

<download-excel
    class = "export-excel-wrapper"
    :data = "json_data"
    :fields = "json_fields"
    name = "filename.xls">
    <!-- 上面可以自定義自己的樣式，還可以引用其他組件button -->
    <!-- <el-button type="primary" size="small">導出EXCEL</el-button> -->
</download-excel>

簡單說明一下組件屬性

• json_data: 需要導出的數據
• json_fields: 自主選擇要導出的字段，指定嵌套數據並將標簽分配給鍵是標簽的字段，值是JSON字段。這將“按原樣”導出字段數據。如果需要自定義導出的數據，可以定義回調函數。

屬性名	類型	描述
data	Array	需要導出的數據，支持中文
fields	Object	定義需要導出的數據
name	string	導出EXCEL的文件名
type	string	導出EXCLE的文件類型，兩種格式xls,csv,默認是xls

可能上面描述不是很明白，下面給個實例，

注意一下幾點

• json_fields里面的屬性是excel表每一列的title,注意多個詞組組成的屬性名要加雙引號
• 如果需要自定義導出的數據，可以定義回調函數。

<template>
    <div>
       <download-excel
            class = "export-excel-wrapper"
            :data = "json_data"
            :fields = "json_fields"
            name = "filename.xls">
            <!-- 上面可以自定義自己的樣式，還可以引用其他組件button -->
            <!-- <el-button type="primary" size="small">導出EXCEL</el-button> -->
        </download-excel>
    </div>
</template>
<script>
// 參考：https://www.cnblogs.com/zengjielin/p/9667476.html
// cnpm install --save vue-json-excel
export default {
    name:'',
    data () {
        return {
           json_fields: {
                "Complete name": "name",    //常規字段
                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_meta: [
                [
                    {
                        " key ": " charset ",
                        " value ": " utf- 8 "
                    }
                ]
            ]
            
        }
    }

}
</script>
<style scoped>

</style>