Vue插件之导出EXCEl

Posted yy136

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue插件之导出EXCEl相关的知识,希望对你有一定的参考价值。

本周项目需要实现导出列表数据的功能,在githup上找到了一个比较好用的插件~

简单的整理一下,希望对各位有所帮助。

githup地址

使用方法:

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}`;
            }
        },
    },

 

 

 




以上是关于Vue插件之导出EXCEl的主要内容,如果未能解决你的问题,请参考以下文章

VUE导出数据为excel,xlsx

Vue小模块之功能全面的表格表格数据的Excel导出

Vue项目实现导入导出Excel表格功能

13.记录Vue项目导出excel出现的问题

vue3导出表格excel(支持多sheet页),并自定义导出样式

记录--Vue中如何导出excel表格