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

15 篇文章 0 订阅
  • 下面开始讲第一种vue-json-excel

  • npm安装依赖包

    npm install vue-json-excel

    项目入口文件引进注册并且使用

    Markup

    import Vue from 'vue'
    import JsonExcel from 'vue-json-excel'
    
    Vue.component('downloadExcel', JsonExcel)

  • 在页面中使用

  • Markup

    <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,注意多个词组组成的属性名要加双引号
    • 如果需要自定义导出的数据,可以定义回调函数。

    JavaScript

    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 "
              }
            ]
          ]
        };
      }
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端劝退师儿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值