前后端实现导出导入功能

文章详细介绍了如何使用Java后端结合Hutool和ApachePOI库来实现Excel文件的导出和导入功能。在导出部分,涉及了依赖配置、自定义实体类、查询方法以及导出接口的编写。在导入部分,讲解了如何处理MultipartFile,读取Excel内容并批量插入数据库。前端部分则展示了如何触发导出和导入操作。
摘要由CSDN通过智能技术生成

目录

导出

1.后端代码

(1)相关依赖

(2)自定义实体类

(3)写一个查询方法list

(4)写导出接口

2.前端代码

3.效果示例

 导入

1.后端代码

(1)写导入接口

2.前端代码

3.效果示例


导出

1.后端代码

(1)相关依赖
        <!--hutool:工具类用不起的注意升级jar包版本或者降低版本,一般都是升高-->
        <dependency>
            <groupId>cn.hutool</groupId>
            <artifactId>hutool-all</artifactId>
            <version>5.8.0</version>
        </dependency>
        <!--poi:是Office文档的Java处理包,也得装上才能用-->
        <dependency>
            <groupId>org.apache.poi</groupId>
            <artifactId>poi-ooxml</artifactId>
            <version>5.2.2</version>
        </dependency>
(2)自定义实体类
@Data
@AllArgsConstructor
@NoArgsConstructor
@TableName("person")
public class Person {

    @TableId(type = IdType.AUTO)
    @Column(name = "id")
    private Long Id;
    @Alias("用户名")
    private String name;
    @Alias("性别")
    private String gender;
    @Alias("年龄")
    private Integer age;
    @TableField(exist = false)
    private List<Long> ids;

    public Person(List<Long> ids) {
        this.ids = ids;
    }

}

注意:这里要加@Alias注解,是因为当我们要进行导入操作时,会因为xls中表名和字段是中文而无法导入数据库,因此这时需要作别名设置        

(3)写一个查询方法list

这里有很多方式,因为本章是聚焦在导入导出功能上,所以查询可以用通用Mapper或者MyBatis-plus提供好的方法都可以,我这里是自己写的,这里就不解释了

@Mapper
public interface PersonMapper extends BaseMapper<Person>{

    List<Person> selectPersonList(Person person);

}
(4)写导出接口
    @GetMapping("/export")
    public void export(HttpServletResponse response) throws IOException {
        //先从数据库查出所有的数据
        List<Person> list = personService.selectPersonList2();
        //我们创建Hutool给我们写好的ExcelWrite
        ExcelWriter wirter = ExcelUtil.getWriter(true);
        wirter.write(list, true);
        //我们将输出的excel文件写出到客户端直接下载
        //response为HttpServletResponse对象
        response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8");
        //test.xls是弹出下载对话框的文件名,不能为中文,中文请自行编码
//        response.setHeader("Content-Disposition","attachment;filename=test.xls");
        String fileName = URLEncoder.encode("用户相关信息", "UTF-8");
        response.setHeader("Content-Disposition", "attachment;filename=" + fileName + ".xlsx");
        ServletOutputStream out = response.getOutputStream();
        wirter.flush(out, true);
        //关闭wirter,释放内存
        wirter.close();
        //关机输出servlet流
        IoUtil.close(out);

    }

2.前端代码

<template>
    <div>
        c
        <el-button type="success" @click="exp">导出</el-button>
    </div>
</template>

<script>

export default {

    methods: {

        exp() {

            window.open("http://localhost:8081/export")

        },

    }

}


</script>

3.效果示例

 

 导入

1.后端代码

(1)写导入接口
    @PostMapping("/import")
    public boolean imp(MultipartFile file) throws IOException {
        //获取来自浏览器发送的文件内容
        InputStream inputStream = file.getInputStream();
        //这里我们不用磁盘路径这种写死的,我们使用输入流动态进行读取
//        ExcelReader reader = ExcelUtil.getReader("读取文件来源");
        ExcelReader reader = ExcelUtil.getReader(inputStream);
        List<Person> all = reader.readAll(Person.class);
        //我们再使用MP的批量插入插入到数据库中即可
        personService.saveBatch(all);
        return true;
    }

2.前端代码

<template>
    <div>
        <el-upload action="http://localhost:8081/import" :show-file-list="false" accept=".xls,.xlsx"
            :on-success="handleExcelImportSuccess" style="display: inline-block;">
        </el-upload>
        <el-button type="success" @click="exp">导出</el-button>
    </div>
</template>

<script>

export default {

    methods: {

        handleUploadSuccess(response, file) {
            this.$message.success('导入成功');
        },

        exp() {

            window.open("http://localhost:8081/export")

        },

    }

}


</script>

3.效果示例

 假设将下列表导入

 看后台数据库

 

可以看到数据库被添加了进来,而且主键因为设置了自增属性,不会被xls表中的id号所影响 

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
要在Vue中实现在线文档编辑,并支持导入导出Office文件,可以使用以下技术方案: 1. 富文本编辑器:选择一个适合的富文本编辑器来实现在线编辑功能。一些常见的选择包括Quill、TinyMCE和CKEditor等。这些编辑器提供了丰富的功能和API,使你能够自定义编辑器的外观和行为。 2. 文件导入功能:为了支持Office文件的导入,可以使用一些库或插件,如`xlsx`(用于Excel文件)和`docxtemplater`(用于Word文件)。这些库可以将Office文件解析为可操作的数据结构,并将其显示在富文本编辑器中。 3. 文件导出功能:为了支持Office文件的导出,你可以使用相应的库或插件,如`xlsx`和`docxtemplater`。这些库可以将编辑后的文档数据转换为相应的Office文件格式。 4. 后端支持:为了处理文件的导入导出,在后端服务器上添加相应的API路由来处理文件上传和下载。你可以使用Node.js或其他后端技术来实现这些API。 5. 前后端通信:使用HTTP请求或WebSocket等方式,将前端的编辑内容发送到后端进行处理,并将处理后的结果返回给前端。这样可以实现后端的数据交互和文件操作。 综合运用上述技术方案,你可以实现一个基于Vue的在线文档编辑器,支持导入导出Office文件。具体实现过程中,需要根据具体需求进行配置和开发,同时注意处理Office文件的格式转换和数据解析等细节。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

蜗牛变涡流

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值