【html添加导出按钮】用EasyExcel 实现导出数据到excel表格

 点餐系统,在订单明细中添加导出按钮,并实现导出订单明细数据到excel表格中 前后端代码实现

 

 前端:

首先在html页面 查询下面添加一个导出的按钮,然后再下面method里面填写相应的方法

  <div class="tableBar">
        <el-input v-model="input" placeholder="请输入订单号" style="width: 250px">
          <i slot="prefix" class="el-input__icon el-icon-search" style="cursor: pointer" @click="init"></i>
        </el-input>
        <el-date-picker v-model="orderTime"
          clearable 
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetimerange"
          placeholder="选择日期"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['00:00:00', '23:59:59']"
          style="width: 400px;margin-left: 20px;"
        ></el-date-picker>

        <el-button type="primary" class="search-btn" @click="init">查询</el-button>
        <el-button type="button" class="gray-button" @click="exportDta">导出</el-button>
        
      </div>

 

 exportDta(){
            axios({
              url: "http://localhost:8080/order/import",
              method: "post",

              contentType: "application/json; charset=utf-8; multipart/form-data",
              dataType: "json",
            }).then((res) => {
              this.$message({
                message: '恭喜你，操作成功！',
                type: 'success'
              });
            });

          },

后端:

先创建一个实体类,实体类里的数据用注解的方式添加到表格中

@Data
@ExcelIgnoreUnannotated
public class Orders implements Serializable {

    private static final long serialVersionUID = 1L;

    private Long id;

    //订单号
    @ExcelProperty(value = "订单号",index = 0)
    @ColumnWidth(25) //行宽
    private String number;

 

日期类的localDateTime类型,生成会报错,需要单独写一个LocalDataTimeConverter类

 //下单时间
    @ExcelProperty(value = "下单时间", index = 4, converter = LocalDateTimeConverter.class)
    @JsonFormat(shape = JsonFormat.Shape.STRING, pattern="yyyy-MM-dd HH:mm:ss")
    @ColumnWidth(25)
    private LocalDateTime orderTime;

package com.itheima.converter;

import com.alibaba.excel.converters.Converter;
import com.alibaba.excel.enums.CellDataTypeEnum;
import com.alibaba.excel.metadata.CellData;
import com.alibaba.excel.metadata.GlobalConfiguration;
import com.alibaba.excel.metadata.property.ExcelContentProperty;

import java.time.LocalDateTime;
import java.time.format.DateTimeFormatter;

/**
 * EasyExcel LocalDateTime转换器
 */
public class LocalDateTimeConverter implements Converter<LocalDateTime> {
    private static final String DEFAULT_PATTERN = "yyyy-MM-dd HH:mm:ss";
    @Override
    public Class<LocalDateTime> supportJavaTypeKey() {
        return LocalDateTime.class;
    }

    @Override
    public CellDataTypeEnum supportExcelTypeKey() {
        return CellDataTypeEnum.STRING;
    }

    @Override
    public LocalDateTime convertToJavaData(CellData cellData, ExcelContentProperty contentProperty,
                                           GlobalConfiguration globalConfiguration) {
        return LocalDateTime.parse(cellData.getStringValue(), DateTimeFormatter.ofPattern(DEFAULT_PATTERN));
    }

    @Override
    public CellData<String> convertToExcelData(LocalDateTime value, ExcelContentProperty contentProperty,
                                               GlobalConfiguration globalConfiguration) {
        return new CellData<>(value.format(DateTimeFormatter.ofPattern(DEFAULT_PATTERN)));
    }

}

运行后会生成表格,文件夹下如果有同名的需要自己修改一下名字,不然生成不了