VUE中使用vue-json-excel超级方便导出excel表格数据

Posted 2023-04-05

参考技术A 一、安装vue-json-excel

npm install vue-json-excel -S

二、main.js里面引入并注册使用

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：自主选择要导出的字段，若不指定，默认导出全部数据中心全部字段

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>