【vue-json-excel】vue导出excel插件

  • 下面开始讲第一种vue-json-excel

  • npm安装依赖包

    npm install 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,注意多个词组组成的属性名要加双引号
    • 如果需要自定义导出的数据,可以定义回调函数。
    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: "(541) 754-3010"
              }
            },
            {
              name: "Thessaloniki",
              city: "Athens",
              country: "Greece",
              birthdate: "1987-11-23",
              phone: {
                mobile: "+1 855 275 5071",
                landline: "(2741) 2621-244"
              }
            }
          ],
          json_meta: [
            [
              {
                " key ": " charset ",
                " value ": " utf- 8 "
              }
            ]
          ]
        };
      }
    ​
联系作者
作者QQ:1538888858 有事请联系作者

Article tags:

作者头像
前端劝退师创始人

分享前端开发资源和前端开发技术资讯等,主攻前后端分离技术;分享个人经历。

Prev【belatedPNG】IE6下图片透明插件(JS)
Next【Puzzle】基于 Vue 和 Webpack4 的可插拔式微前端架构

发表评论

评论列表

暂无评论