vue springboot利用easypoi实现简单导出

摘要:
VueSpringboot使用easypoi实现简单的导出前言1。easypoi是什么?让我们简单介绍一下easypoi。Easypoi的目标不是取代poi,而是让一个不懂导入和导出的人能够快速使用poi在Excel和Word中完成各种操作,而不是查看许多api来完成这样的工作。

vue springboot利用easypoi实现简单导出


前言

今天玩了一下vue springboot利用easypoi实现excel的导出,以前没玩过导入导出,只不过听说过看别人用过,怎么说呢,想玩就玩一下吧,毕竟结合自己业务场景需要才会考虑是否使用。先简单介绍一下easypoi。


一、easypoi是什么?

1.不太熟悉poi的
2.不想写太多重复太多的
3.只是简单的导入导出的
4.喜欢使用模板的

若poi都不知道的童鞋请自行百度。。。

Easypoi的目标不是替代poi,而是让一个不懂导入导出的快速使用poi完成Excel和word的各种操作,而不是看很多api才可以完成这样工作。

二、使用步骤

1.传送门

因为我也是第一次使用,这里还是先将easypoi的官方文档放这儿吧:

点我查看Easypoi官方文档

2.前端vue

咋先从前端开始吧,总要一步步来嘛,下面看代码(仔细看注释):

<template>
  <div>
    <!-- 这里只演示导出,导入也差不多 -->
    <!-- <el-button class="el-icon-upload" type="success">导入</el-button> -->
    <el-button class="el-icon-download" type="success" @click="exportExcel()">导出</el-button>
  </div>
</template>
<script>
export default {
  name: "importandexport",
  data() {
    return {
      extp: this.exportExceltype,
    };
  },
  props: ["exportExceltype"],//父组件向子传递过来的值,用于判断是那个组件过来的
  methods: {
    exportExcel() {
      const extpurl = ""; //导出请求地址
      //这里就是判断来自哪个父组件,从而发送不同的请求路径
      if (this.extp == "user") {
        this.extpurl = "/exportUser";
      } else if (this.extp == "role") {
        this.extpurl = "/exportRole";
      }

      this.$axios
        .get(this.extpurl, { responseType: "blob" })
        .then((res) => {
          const blob = new Blob([res.data], { //取响应回来的数据
            type: "application/vnd.ms-excel;charset=utf-8",
          });
          const href = window.URL.createObjectURL(blob); // 创建下载的链接
          const downloadElement = document.createElement("a");
          downloadElement.href = href;
          downloadElement.download = decodeURI(res.headers["filename"]);
          document.body.appendChild(downloadElement);
          downloadElement.click(); // 点击下载
          document.body.removeChild(downloadElement); // 下载完成移除元素
          window.URL.revokeObjectURL(href); // 释放掉blob对象
        })
        .catch((fail) => {
          console.error(fail);
        });
    },
  },
};
</script>
<style scoped>
</style>

上面的是公用的子组件,还缺少父组件,看下面代码:

<template>
  <div>
    <el-row style="margin: 18px 0px 0px 18px ">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/admin/dashboard' }"
          >管理中心</el-breadcrumb-item
        >
        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        <el-breadcrumb-item>用户信息</el-breadcrumb-item>
      </el-breadcrumb>
    </el-row>
    <bulk-registration @onSubmit="listUsers()"></bulk-registration>
    <el-card style="margin: 18px 2%; 95%">
      <el-table
        v-loading="loading"
        :data="users.slice((currentPage-1)*pageSize,currentPage*pageSize)"
        stripe
        :default-sort="{ prop: 'id', order: 'ascending' }"
        style=" 100%"
        :max-height="tableHeight"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="id" label="id" sortable width="100">
        </el-table-column>
        <el-table-column prop="username" label="用户名" fit> </el-table-column>
        <el-table-column prop="name" label="真实姓名" fit> </el-table-column>
        <el-table-column prop="phone" label="手机号" fit> </el-table-column>
        <el-table-column prop="email" label="邮箱" show-overflow-tooltip fit>
        </el-table-column>
        <el-table-column label="状态" sortable width="100">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.enabled"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="value => commitStatusChange(value, scope.row)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-button @click="editUser(scope.row)" type="text" size="small">
              编辑
            </el-button>
            <el-button @click="delUser(scope.row)" type="text" size="small">
              移除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
       <el-pagination
          layout="total, prev, pager, next, jumper"
          @current-change="handleCurrentChange"
          :page-size="pageSize"
          :current-page="currentPage"
          :total="total">
        </el-pagination>
    </el-card>
    
    < !--放入组件,如不知道父组件如何向子组件传值的,也可以好好看看
     :exportExceltype 指子组件中的 props: ["exportExceltype"]
     excelobj 则就是当前父组件中的data里面的属性,并指定了固定值-->
     
    <ImportAndExport :exportExceltype="excelobj"></ImportAndExport>
    
  </div>
</template>

<script>
//导入导出excel
import ImportAndExport from '@/components/common/ImportAndExport'
export default {
  name: "UserProfile",
  components: { ImportAndExport },
  data() {
    return {
      excelobj:'user',//指定当前组件导入导出的标识,传入子组件即导入导出组件中判断
    };
  },
 
};
</script>

<style scoped></style>

这里我只保留了需要的代码,其他代码无关紧要,详细看注释,很简单的东西我也写得很详细了。。。
至此,前端部分已经完成,现在我讲一下导出思路:由前端通过判断不同页面需要导出的请求路径,然后通过设置请求方式、参数。像后端发起请求,后端通过easypoi的工具方法、注解。生成需要的excel或者word文档,然后给前端响应返回。前端再进行接收处理,并进行下载。
如果是,实现导入的话,思路也一样,只不过后端处理稍微变化了。(实质上也就是将数据库的数据组成list或者map然后交给easypoi处理)。

3.后端springboot

首先引入easypoi所需依赖:

       <!--easypoi导入导出-->
		<dependency>
			<groupId>cn.afterturn</groupId>
			<artifactId>easypoi-base</artifactId>
			<version>4.1.3</version>
		</dependency>
		<dependency>
			<groupId>cn.afterturn</groupId>
			<artifactId>easypoi-web</artifactId>
			<version>4.1.3</version>
		</dependency>
		<dependency>
			<groupId>cn.afterturn</groupId>
			<artifactId>easypoi-annotation</artifactId>
			<version>4.1.3</version>
		</dependency>

或者使用这个:

<dependency>
    <groupId>cn.afterturn</groupId>
    <artifactId>easypoi-spring-boot-starter</artifactId>
    <version>4.0.0</version>
</dependency>

3.1编写实体类(我这里是dto,也一样)

package top.wangxingjun.separate.dto;

import cn.afterturn.easypoi.excel.annotation.Excel;
import top.wangxingjun.separate.dto.base.OutputConverter;
import top.wangxingjun.separate.entity.AdminRole;
import top.wangxingjun.separate.entity.User;
import lombok.Data;
import lombok.ToString;

import java.util.List;

/**
 * @author wxj
 * @Date 2020/8/10
 */
@Data
@ToString
public class UserDTO implements OutputConverter<UserDTO, User> {

    @Excel(name = "编号")
    private int id;

    @Excel(name = "账号")
    private String username;

    @Excel(name = "真实姓名")
    private String name;

    @Excel(name = "手机号")
    private String phone;

    @Excel(name = "邮箱")
    private String email;

    @Excel(name = "状态",replace = {"启用_true","禁用_false"})
    private boolean enabled;

}

这里使用了 @Excel 是关键注解,必不可少,name表示指定生成的excel的对应列明,replace 则表示用来做转换的,如:数据库表的性别字段,数据库字段值使用0或1表示,而前台需要显示男或女,导出的话,格式是 replace = {“前台显示值_数据库字段值”,“前台显示值_数据库字段值”} 用 _ 隔开。如果是导出,把前台显示值与数据库字段值调换下位置就可以了~更多用法请求官方文档查看或者百度使用。

3.2控制层

直接看代码:

    /**
     * 用户信息导出
     */
    @GetMapping("api/exportUser")
    public void exportUser(HttpServletResponse response) throws Exception {
        List<UserDTO> list = userService.list();
        ExcelUtil.exportExcel(list, null, "sheet1", UserDTO.class, "用户信息", response);
    }

没错,就这么几行代码,当然了,还要有个工具类,是我封装好的,网上也有很多的咯。下面看工具类:

 package top.wangxingjun.separate.util;

import cn.afterturn.easypoi.excel.ExcelExportUtil;
import cn.afterturn.easypoi.excel.ExcelImportUtil;
import cn.afterturn.easypoi.excel.entity.ExportParams;
import cn.afterturn.easypoi.excel.entity.ImportParams;
import cn.afterturn.easypoi.excel.entity.enmus.ExcelType;
import lombok.extern.log4j.Log4j2;
import lombok.extern.slf4j.Slf4j;
import org.apache.commons.collections4.CollectionUtils;
import org.apache.commons.lang3.ObjectUtils;
import org.apache.commons.lang3.StringUtils;
import org.apache.poi.ss.usermodel.Workbook;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.net.URLEncoder;
import java.util.List;
import java.util.Map;
import java.util.NoSuchElementException;

/**
 * @ProjectName: separate
 * @Package: top.wangxingjun.separate.util
 * @ClassName: ExcelUtil
 * @Author: wxj
 * @Description: Excel导入导出工具类
 * @Date: 2020/8/25 10:07
 * @Version: 1.0
 */
@Log4j2
public class ExcelUtil {
    /**
     * Map集合导出
     *
     * @param list     需要导出的数据
     * @param fileName 导出的文件名
     * @param response HttpServletResponse对象
     */
    public static void exportExcel(List<Map<String, Object>> list, String fileName, HttpServletResponse response) throws Exception{
        defaultExport(list, fileName, response);
    }

    /**
     * 复杂导出Excel,包括文件名以及表名(不创建表头)
     *
     * @param list      需要导出的数据
     * @param title     表格首行标题(不需要就传null)
     * @param sheetName 工作表名称
     * @param pojoClass 映射的实体类
     * @param fileName  导出的文件名(如果为null,则默认文件名为当前时间戳)
     * @param response  HttpServletResponse对象
     */
    public static void exportExcel(List<?> list, String title, String sheetName, Class<?> pojoClass, String fileName,
                                   HttpServletResponse response) throws Exception{
        defaultExport(list, pojoClass, fileName, response, new ExportParams(title, sheetName));
    }

    /**
     * 复杂导出Excel,包括文件名以及表名(创建表头)
     *
     * @param list           需要导出的数据
     * @param title          表格首行标题(不需要就传null)
     * @param sheetName      工作表名称
     * @param pojoClass      映射的实体类
     * @param fileName       导出的文件名
     * @param isCreateHeader 是否创建表头
     * @param response       HttpServletResponse对象
     */
    public static void exportExcel(List<?> list, String title, String sheetName, Class<?> pojoClass, String fileName,
                                   boolean isCreateHeader, HttpServletResponse response) throws Exception{
        ExportParams exportParams = new ExportParams(title, sheetName);
        exportParams.setCreateHeadRows(isCreateHeader);
        defaultExport(list, pojoClass, fileName, response, exportParams);
    }

    /**
     * 默认导出方法
     *
     * @param list         需要导出的数据
     * @param pojoClass    对应的实体类
     * @param fileName     导出的文件名
     * @param response     HttpServletResponse对象
     * @param exportParams 导出参数实体
     */
    private static void defaultExport(List<?> list, Class<?> pojoClass, String fileName, HttpServletResponse response,
                                      ExportParams exportParams) throws Exception{
        Workbook workbook = ExcelExportUtil.exportExcel(exportParams, pojoClass, list);
        downloadExcel(fileName, workbook, response);
    }

    /**
     * 默认导出方法
     *
     * @param list     Map集合
     * @param fileName 导出的文件名
     * @param response HttpServletResponse对象
     */
    private static void defaultExport(List<Map<String, Object>> list, String fileName, HttpServletResponse response)throws Exception {
        Workbook workbook = ExcelExportUtil.exportExcel(list, ExcelType.HSSF);
        if (null != workbook) {
            downloadExcel(fileName, workbook, response);
        }
    }

    /**
     * Excel导出
     *
     * @param fileName Excel导出
     * @param workbook Excel对象
     * @param response HttpServletResponse对象
     */
    public static void downloadExcel(String fileName, Workbook workbook, HttpServletResponse response) throws Exception{
        try {
            if (StringUtils.isEmpty(fileName)) {
                throw new RuntimeException("导出文件名不能为空");
            }
            String encodeFileName = URLEncoder.encode(fileName, "UTF-8");
            response.setHeader("content-Type", "application/vnd.ms-excel; charset=utf-8");
            response.setHeader("Content-Disposition", "attachment;filename=" + encodeFileName);
            response.setHeader("FileName", encodeFileName);
            response.setHeader("Access-Control-Expose-Headers", "FileName");
            workbook.write(response.getOutputStream());
        } catch (Exception e) {
            log.error(e.getMessage(), e);
        }
    }

    /**
     * 根据文件路径来导入Excel
     *
     * @param filePath   文件路径
     * @param titleRows  表标题的行数
     * @param headerRows 表头行数
     * @param pojoClass  映射的实体类
     * @return
     */
    public static <T> List<T> importExcel(String filePath, Integer titleRows, Integer headerRows, Class<T> pojoClass) throws Exception{
        //判断文件是否存在
        if (StringUtils.isBlank(filePath)) {
            return null;
        }
        ImportParams params = new ImportParams();
        params.setTitleRows(titleRows);
        params.setHeadRows(headerRows);
        List<T> list = null;
        try {
            list = ExcelImportUtil.importExcel(new File(filePath), pojoClass, params);
        } catch (NoSuchElementException e) {
            log.error("模板不能为空", e);
        } catch (Exception e) {
            log.error(e.getMessage(), e);
        }
        return list;
    }

    /**
     * 根据接收的Excel文件来导入Excel,并封装成实体类
     *
     * @param file       上传的文件
     * @param titleRows  表标题的行数
     * @param headerRows 表头行数
     * @param pojoClass  映射的实体类
     * @return
     */
    public static <T> List<T> importExcel(MultipartFile file, Integer titleRows, Integer headerRows, Class<T> pojoClass) throws Exception{
        if (file == null) {
            return null;
        }
        ImportParams params = new ImportParams();
        params.setTitleRows(titleRows);
        params.setHeadRows(headerRows);
        List<T> list = null;
        try {
            list = ExcelImportUtil.importExcel(file.getInputStream(), pojoClass, params);
        } catch (NoSuchElementException e) {
            log.error("excel文件不能为空", e);
        } catch (Exception e) {
            log.error(e.getMessage(), e);
        }
        return list;
    }

    /**
     * 文件转List
     *
     * @param file
     * @param pojoClass
     * @param <T>
     * @return
     */
    public static <T> List<T> fileToList(MultipartFile file, Class<T> pojoClass) throws Exception{
        if (file.isEmpty()) {
            throw new RuntimeException("文件为空");
        }
        List<T> list = ExcelUtil.importExcel(file, 1, 1, pojoClass);
        if (CollectionUtils.isEmpty(list)) {
            throw new RuntimeException("未解析到表格数据");
        }
        return list;
    }
}

excel导出所需要的都准备好了,下面来看一下我的效果:

这不就很完美了嘛

结尾

好了今天的分享就到这里了,结束~~

免责声明:文章转载自《vue springboot利用easypoi实现简单导出》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇C#调用Axis2发布的带SoapHeader用户验证的WebServicedocker-compose之跳板机jumpserver部署下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

JavaWeb response对象常用操作

  JavaWeb response对象常用操作 CreationTime--2018年7月18日10点42分 Author:Marydon 1.设置响应内容类型   方式一 response.setContentType(contentType);   方式二 response.setHeader("Content-Type", contentTy...

Java 集合源代码——ArrayList

(1)可以查看大佬们的 详细源码解析 : 连接地址为 : https://blog.csdn.net/zhumingyuan111/article/details/78884746 (2) ArrayList实现了List接口,继承了AbstractList,底层是数组实现的,一般我们把它认为是可以自增扩容的数组。它是非线程安全的,一般多用于单线程环境下(与...

HttpServletrequest 注册和登录、request域对象、web动态shop

 summarize httpServletResponse跟 Request一个是响应一个是请求,获得客户端请求方式 用getMethod 得到的是String类型, response:属于重定向请求、地址栏URL会发生改变、想服务器发送两次请求 response解决中文乱码:response.setContentType("text/html;char...

HTTP 499状态码 nginx下499错误详解-乾颐堂

  日志记录中HTTP状态码出现499错误有多种情况,我遇到的一种情况是nginx反代到一个永远打不开的后端,就这样了,日志状态记录是499、发送字节数是0。   老是有用户反映网站系统时好时坏,因为线上的产品很长时间没有修改,所以前端程序的问题基本上可以排除,于是就想着是Get方式调用的接口不稳定,问了相关人员,说没有问题,为了拿到确切证据,于是我问相关...

【译】在Asp.Net中操作PDF – iTextSharp列表

在前文中,我们已经知道了如何利用iTextSharp创建PDF文档,设置字体样式和风格.本文开始讲述iTextSharp中的有序列表和无需列表.如果你还没阅读我前面的文章,那么地址是: 在ASP.NET中创建PDF-iTextSharp起步 在Asp.Net中操作PDF - iTextSharp - 使用字体 在Asp.Net中操作PDF – iTextS...

HttpClient 教程 (A)

前言 超文本传输协议(HTTP)也许是当今互联网上使用的最重要的协议了。Web服务,有网络功能的设备和网络计算的发展,都持续扩展了HTTP协议的角色,超越了用户使用的Web浏览器范畴,同时,也增加了需要HTTP协议支持的应用程序的数量。 尽管java.net包提供了基本通过HTTP访问资源的功能,但它没有提供全面的灵活性和其它很多应用程序需要的功能。Ht...