vue+Java 实现前后端Excel导出

vue+Java 实现前后端Excel导出

1. 按钮设置

在这里插入图片描述使用avue的导出功能可以查看官网
https://www.avuejs.com/default/export.html
avue自带按钮设置
自定义按钮设置
我这里使用的是自定义的按钮,并且自己实现了Excel的导出

2、Java后端代码

(1)定义Excel工具类

这个工具类是根据ExcelWriter 这个类进行创建的

public class ExcelExportUtils {
   
    public static void exportExcelByResponse(ExcelWriter excelWriter, HttpServletResponse response, String fileName, HttpServletRequest request) throws IOException {
   
        String userAgent = request.getHeader("USER-AGENT");
        response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8");
        if (StringUtils.contains(userAgent, "MSIE") || StringUtils.contains(userAgent, "Trident") || StringUtils.contains(userAgent, "Edge")) {
   //IE 浏览器
            fileName = URLEncoder.encode(fileName, "UTF8");
        } else {
   //火狐,google等其他浏览器
            fileName = new String(fileName.getBytes("UTF-8"), "ISO-8859-1");
        }
        response.setHeader("Content-Disposition", "attachment; filename=" + fileName);
        //客户端不缓存
        response.setCharacterEncoding("UTF-8");
        response.addHeader("Pargam", "no-cache");
        response.addHeader("Cache-Control", "no-cache");
        Workbook workbook = excelWriter.getWorkbook();
        ServletOutputStream outputStream = response.getOutputStream();
        workbook.write(outputStream);
        //关闭缓存
        workbook.close();
        outputStream.close();
    }
}

(2)创建枚举类来指定Excel表格中头标题的别名

/**
 * Excel表格别名定义
 * @author fanxiaoxuan
 * @version 1.0
 * @since 2021/12/15 10:42
 */
public enum SplitExportEnum {
   

    PLAT_NO("platNo","平台编号"),
    BIZ_ORDER_NO("bizOrderNo","业务单号"),
    ORDER_NO("orderNo","支付单号"),
    BUSINESS_TYPE("businessType","业务类型"),
    BIZ_SPLIT_NO("bizSplitNo","业务分账单号"),
    SPLIT_NO("splitNo","支付分账单号"),
    TRANS_TIME("transTime","分账时间"),
    MEMBER_NO("memberNo","会员号"),
    MEMBER_NAME("memberName","会员名称"),
    SPLIT_TYPE("splitType","分账类型"),
    ORDER_AMT("orderAmt","订单金额"),
    SPLIT_AMT("splitAmt","分账金额"),
    CLEAR_TIME("clearTime","清算时间"),
    SETTLE_TIME("settleTime","结算时间"),
    CHANNEL_FLOW_NO("channelFlowNo","渠道流水号"
  • 2
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,关于您的问题,以下是前后详细的步骤和代码: 前代码:使用Vue和ElementUI实现 1. 首先在Vue组件中定义你的表格,要注意的是要使用el-table-column组件定义每一列的数据和显示方式,其中prop属性表示对应的数据字段,label属性表示列名,使用v-model绑定selection数组来记录选中的行: ```html <el-table :data="tableData" v-loading="tableLoading" @selection-change="handleSelectionChange" @sort-change="handleSortChange" style="width: 100%"> <el-table-column type="selection" width="55"></el-table-column> <el-table-column :prop="'id'" label="ID" sortable="custom" width="80"></el-table-column> <el-table-column :prop="'name'" label="姓名" sortable="custom" width="100"></el-table-column> <el-table-column :prop="'age'" label="年龄" sortable="custom" width="80"></el-table-column> <el-table-column :prop="'gender'" label="性别" sortable="custom" width="80"> <template slot-scope="scope"> <span>{{scope.row.gender == 1 ? '男' : '女'}}</span> </template> </el-table-column> <el-table-column :prop="'address'" label="地址"></el-table-column> </el-table> ``` 2. 在模板中添加一个按钮,点击后调用导出方法: ```html <el-button type="primary" @click="handleExport">导出</el-button> ``` 3. 在Vue实例中定义导出方法,首先获取选中行的id数组(selection),然后使用axios发送POST请求到后,传递ids参数作为选中行id数组,以及fields参数作为要导出的字段数组。注意在请求头中设置Content-Type为application/json,以及Response-Type为arraybuffer,以便正常接收Excel文件流: ```javascript handleExport() { var ids = this.selection.map(item => item.id) var fields = ['id', 'name', 'age', 'gender', 'address'] axios({ method: 'post', url: '/export', data: { ids: ids, fields: fields }, responseType: 'arraybuffer', headers: { 'Content-Type': 'application/json' } }).then(response => { const blob = new Blob([response.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' }) const fileName = 'export.xlsx' FileSaver.saveAs(blob, fileName) }).catch(e => { this.$message.error('导出失败') }) } ``` 后代码:使用Spring Boot和Mybatis-Plus实现 1. 首先创建一个实体类,表示数据库中的一行记录,使用Mybatis-Plus的@TableField注解表示对应的字段,以及@TableId注解表示主键: ```java import com.baomidou.mybatisplus.annotation.IdType; import com.baomidou.mybatisplus.annotation.TableField; import com.baomidou.mybatisplus.annotation.TableId; import lombok.AllArgsConstructor; import lombok.Data; import lombok.NoArgsConstructor; @Data @NoArgsConstructor @AllArgsConstructor public class User { @TableId(value = "id", type = IdType.AUTO) private Integer id; @TableField("name") private String name; @TableField("age") private Integer age; @TableField("gender") private Integer gender; @TableField("address") private String address; } ``` 2. 创建一个Mapper接口,继承Mybatis-Plus的BaseMapper接口,用于对User表进行操作,其中的selectExportList方法返回要导出的数据列表,使用@Param注解传递ids和fields参数: ```java import org.apache.ibatis.annotations.Param; import java.util.List; public interface UserMapper extends BaseMapper<User> { List<User> selectExportList(@Param("ids") List<Integer> ids, @Param("fields") List<String> fields); } ``` 3. 创建一个Controller类,用于处理导出请求,使用@RequestBody接收前传递过来的ids和fields参数,然后调用UserMapper的selectExportList方法获取要导出的数据列表,最后使用EasyPoi进行Excel导出: ```java import cn.afterturn.easypoi.excel.ExcelExportUtil; import cn.afterturn.easypoi.excel.entity.ExportParams; import cn.afterturn.easypoi.excel.entity.enmus.ExcelType; import cn.afterturn.easypoi.excel.export.styler.IExcelExportStyler; import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper; import org.apache.poi.ss.usermodel.Workbook; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import javax.servlet.http.HttpServletResponse; import java.io.IOException; import java.net.URLEncoder; import java.util.ArrayList; import java.util.List; @RestController public class ExportController { @Autowired private UserMapper userMapper; @RequestMapping("/export") public void export(@RequestBody ExportRequest request, HttpServletResponse response) throws IOException { List<User> userList = userMapper.selectExportList(request.getIds(), request.getFields()); ExportParams params = new ExportParams(null, "用户信息", ExcelType.XSSF); Workbook workbook = ExcelExportUtil.exportExcel(params, User.class, userList); String fileName = "export.xlsx"; response.setContentType("application/octet-stream"); response.setHeader("Content-Disposition", "attachment; filename=" + URLEncoder.encode(fileName, "UTF-8")); workbook.write(response.getOutputStream()); workbook.close(); } } class ExportRequest { private List<Integer> ids; private List<String> fields; // getter, setter, toString省略 } ``` 至此,您可以开始使用以上代码实现您的需求了,希望能对您有所帮助。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值