zoukankan      html  css  js  c++  java
  • vue elementui 导出excel

    1、命令执行

    npm install vue-json-excel

    2、ts 引用

    import JsonExcel from "vue-json-excel";
    @Component({
      name: 'tc-actual-production',
      template: require('./productionActual.template.html'),
      components: {pagination,
        'download-excel':JsonExcel
      }
    })

    3、html 

            <download-excel
              class = "export-excel-wrapper"
              :data = "json_data"
              :fields = "json_fields"
              header="生产实绩统计"
              name = "生产实绩统计.xls">
              <el-button type="primary" size="small">导出EXCEL</el-button>
            </download-excel>

    如果放在 其他按钮后面,需要和其他按钮一排,只需要设置   display:inline  就可以了

    4、ts  

    设置两个变量的值:

    json_fields:列名
    json_data:数据
     json_fields:any={
        '列名1': "col1",
        '列名2': "col2",
        '列名3': "col3"  
    }
    json_data:any[]= [{
      'col1': "内容1",
        'col2': "内容2",
        'col3': "内容3"  
    }]

    效果:

     组件文档:

    NameTypeDescriptionDefault
    data Array Data to be exported.  
    fields Object Fields inside the JSON Object that you want to export. If none provided, all properties in the JSON will be exported.  
    export-fields (exportFields) Object Used to fix the problem with other components that use the variable fields, like vee-validate. exportFields works exactly like fields  
    type string Mime type [xls, csv] xls
    name string File name to export. data.xls
    header string/Array Title(s) for the data. Can be a string (one title) or an array of strings (multiple titles).  
    title(deprecated) string/Array same as header, title is maintained for retro-compatibility purposes but its use is not recommended due to the conflict with the HTML5 title attribute.  
    footer string/Array Footer(s) for the data. Can be a string (one footer) or an array of strings (multiple footers).  
    default-value (defaultValue) string Use as fallback when the row has no field values. ''
    worksheet string Name of the worksheet tab. 'Sheet1'
    fetch Function Callback to fetch data before download, if it's set it runs immediately after mouse pressed and before download process.
    IMPORTANT: only works if no data prop is defined.
     
    before-generate Function Callback to call a method right before the generate / fetch data, eg:show loading progress  
    before-finish Function Callback to call a method right before the download box pops out, eg:hide loading progress  
    stringifyLongNum Boolean stringify long number and decimal(solve the problem of loss of digital accuracy), default: false  
    escapeCsv Boolean This escapes CSV values in order to fix some excel problems with number fields. But this will wrap every csv data with =" and ", to avoid that you have to set this prop to false. default: True

  • 相关阅读:
    在Java中,final修饰的类有什么特点
    基于 枚举值 输出 枚举描述的 jackson 自定义注解方法
    基于 r2dbc jpa java reactor流式编程的查询合并
    分组后 排除存在某种情况的 的查询
    基于Mysql 根据输入值 为基础的 环形排序
    时间范围内的按时间统计的每日数据填充
    记一次vue发版,在nginx下不乱码,在IIS下乱码的奇葩经历
    处理webflux 项目 增加 content-path
    java stream 不执行转换 不执行 管道中的操作
    增加一个spring mvc 的枚举转换器
  • 原文地址:https://www.cnblogs.com/luo1240465012/p/15165036.html
Copyright © 2011-2022 走看看