• 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': '(541) 754-3010'
                    }
                },
                {
                    'name': 'Thessaloniki',
                    'city': 'Athens',
                    'country': 'Greece',
                    'birthdate': '1987-11-23',
                    'phone': {
                        'mobile': '+1 855 275 5071',
                        '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}`;
                }
            },
        },
     
  • 相关阅读:
    HZOJ 太阳神
    HZOJ Silhouette
    HZOJ Dash Speed
    HZOJ 巨神兵
    值得纪念的cspsAFO总结
    11月FLAG
    模板易错总结
    树 总结
    DP总结(优化等)
    代码低级错误总结
  • 原文地址:https://www.cnblogs.com/yy136/p/10015561.html
Copyright © 2020-2023  润新知