zoukankan      html  css  js  c++  java
  • vue中纯前端实现导出简单Excel表格的功能

    在许多的后台系统中少不了导出Excel表格的功能,下面就是我在实际的项目中纯前端使用vue-json-excel插件来实现简单Excel表格的导出功能;如有描述不当,欢迎指正,补充。2020-10-22 17:32:14

    1、安装依赖

    npm install vue-json-excel
    

    2、在项目的入口文件(main.js)中引入

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

    3、在模板中使用

    <download-excel
        :data   = "json_data"
        :fields = "json_fields"
        name = "用户统计列表">
       导出Excel
    </download-excel>
    

    3.1、模板中标签属性的说明

      name=“用户统计列表” --------------导出Excel文件的文件名
      :fields = “json_fields” ----------------Excel中表头的名称
      :data = “json_data” -------------------导出的数据

    4、Excel表格表头的设置

    export default{
       data(){
           return{
              json_fields: {  //导出Excel表格的表头设置
                '序号': 'type',
                '姓名': 'userName',
                '年龄': 'age',
                '手机号': 'phone',
                '注册时间': 'createTime',
              },
           }
        }
     }
    

    5、Excel表格中的数据

    export default{
       data(){
           return{
              json_data:[
                {"userName":"张三","age":18,"gender":"phone":15612345612,"createTime":"2019-10-22"},
                {"userName":"李四","age":17,"gender":"phone":15612345613,"createTime":"2019-10-23"},
                {"userName":"王五","age":19,"gender":"phone":15612345615,"createTime":"2019-10-25"},
                {"userName":"赵六","age":18,"gender":"phone":15612345618,"createTime":"2019-10-15"},     
              ]
           }
       }
    }
  • 相关阅读:
    CentOS 配置epel源
    phpstudy + dvws
    被动信息收集
    Mysql 通过information_schema爆库,爆表,爆字段
    油猴百度云
    浏览器如何弹出下载框
    Ubuntu更新源
    关于cookie
    monitor
    分享一个自制的计算子网划分的小工具
  • 原文地址:https://www.cnblogs.com/chailuG/p/13859574.html
Copyright © 2011-2022 走看看