怎么用elementUI+Springboot实现导出excel功能

发布时间：2022-09-05 11:49:58 作者：iii
来源：亿速云阅读：217

怎么用ElementUI+SpringBoot实现导出Excel功能

在现代Web应用中，导出Excel功能是一个非常常见的需求。无论是数据报表、用户信息导出，还是其他业务数据的导出，Excel格式的文件因其通用性和易用性而广受欢迎。本文将详细介绍如何使用ElementUI和SpringBoot实现导出Excel功能。

1. 技术栈介绍

1.1 ElementUI

ElementUI是一套为开发者、设计师和产品经理准备的基于Vue 2.0的桌面端组件库。它提供了丰富的UI组件，如表格、表单、对话框等，能够帮助开发者快速构建美观且功能强大的前端界面。

1.2 SpringBoot

SpringBoot是Spring框架的一个子项目，旨在简化Spring应用的初始搭建和开发过程。它通过自动配置和约定大于配置的原则，使得开发者能够快速构建独立的、生产级别的Spring应用。

1.3 Apache POI

Apache POI是一个开源的Java库，用于处理Microsoft Office文档。它支持对Excel、Word、PowerPoint等文件的读写操作。在本文中，我们将使用Apache POI来生成Excel文件。

2. 项目结构

在开始之前，我们先来看一下项目的整体结构：

src
├── main
│   ├── java
│   │   └── com
│   │       └── example
│   │           ├── controller
│   │           │   └── ExcelController.java
│   │           ├── service
│   │           │   └── ExcelService.java
│   │           └── Application.java
│   └── resources
│       └── static
│           └── index.html
└── test
    └── java

3. 前端实现

3.1 安装ElementUI

首先，我们需要在Vue项目中安装ElementUI。如果你还没有创建Vue项目，可以使用Vue CLI快速创建一个新项目：

vue create my-project

然后，进入项目目录并安装ElementUI：

cd my-project
npm install element-ui --save

在main.js中引入ElementUI：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

3.2 创建导出按钮

在index.html中，我们创建一个简单的页面，包含一个导出按钮：

<template>
  <div id="app">
    <el-button type="primary" @click="exportExcel">导出Excel</el-button>
  </div>
</template>

<script>
export default {
  methods: {
    exportExcel() {
      // 调用后端接口导出Excel
      window.location.href = '/api/exportExcel';
    }
  }
}
</script>

在这个例子中，我们使用el-button组件创建了一个按钮，并在点击时调用exportExcel方法。该方法通过window.location.href跳转到后端提供的导出接口。

4. 后端实现

4.1 添加依赖

在pom.xml中添加Apache POI的依赖：

<dependency>
    <groupId>org.apache.poi</groupId>
    <artifactId>poi-ooxml</artifactId>
    <version>5.2.3</version>
</dependency>
<dependency>
    <groupId>org.apache.poi</groupId>
    <artifactId>poi-ooxml-schemas</artifactId>
    <version>4.1.2</version>
</dependency>
<dependency>
    <groupId>org.apache.xmlbeans</groupId>
    <artifactId>xmlbeans</artifactId>
    <version>5.1.1</version>
</dependency>

4.2 创建ExcelService

在ExcelService.java中，我们编写生成Excel文件的逻辑：

package com.example.service;

import org.apache.poi.ss.usermodel.*;
import org.apache.poi.xssf.usermodel.XSSFWorkbook;
import org.springframework.stereotype.Service;

import java.io.ByteArrayOutputStream;
import java.io.IOException;

@Service
public class ExcelService {

    public byte[] generateExcel() throws IOException {
        // 创建工作簿
        Workbook workbook = new XSSFWorkbook();
        // 创建工作表
        Sheet sheet = workbook.createSheet("Sheet1");

        // 创建表头
        Row headerRow = sheet.createRow(0);
        headerRow.createCell(0).setCellValue("ID");
        headerRow.createCell(1).setCellValue("Name");
        headerRow.createCell(2).setCellValue("Age");

        // 创建数据行
        Row dataRow1 = sheet.createRow(1);
        dataRow1.createCell(0).setCellValue("1");
        dataRow1.createCell(1).setCellValue("Alice");
        dataRow1.createCell(2).setCellValue("23");

        Row dataRow2 = sheet.createRow(2);
        dataRow2.createCell(0).setCellValue("2");
        dataRow2.createCell(1).setCellValue("Bob");
        dataRow2.createCell(2).setCellValue("30");

        // 调整列宽
        for (int i = 0; i < 3; i++) {
            sheet.autoSizeColumn(i);
        }

        // 将工作簿写入字节数组
        ByteArrayOutputStream outputStream = new ByteArrayOutputStream();
        workbook.write(outputStream);
        workbook.close();

        return outputStream.toByteArray();
    }
}

在这个服务类中，我们使用Apache POI创建了一个简单的Excel文件，并将其写入字节数组中返回。

4.3 创建ExcelController

在ExcelController.java中，我们创建一个控制器来处理前端的导出请求：

package com.example.controller;

import com.example.service.ExcelService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpHeaders;
import org.springframework.http.MediaType;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.io.IOException;

@RestController
@RequestMapping("/api")
public class ExcelController {

    @Autowired
    private ExcelService excelService;

    @GetMapping("/exportExcel")
    public ResponseEntity<byte[]> exportExcel() throws IOException {
        byte[] excelBytes = excelService.generateExcel();

        HttpHeaders headers = new HttpHeaders();
        headers.setContentType(MediaType.APPLICATION_OCTET_STREAM);
        headers.setContentDispositionFormData("attachment", "data.xlsx");

        return ResponseEntity.ok()
                .headers(headers)
                .body(excelBytes);
    }
}

在这个控制器中，我们调用ExcelService生成Excel文件，并将其作为响应返回给前端。通过设置HttpHeaders，我们告诉浏览器这是一个文件下载请求，并指定了文件名。

5. 运行项目

5.1 启动SpringBoot应用

在Application.java中，我们启动SpringBoot应用：

package com.example;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class Application {
    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }
}

运行Application类，SpringBoot应用将会启动。

5.2 访问前端页面

打开浏览器，访问http://localhost:8080，你将看到一个导出按钮。点击按钮后，浏览器将会下载一个名为data.xlsx的Excel文件。

6. 总结

通过本文的介绍，我们学习了如何使用ElementUI和SpringBoot实现导出Excel功能。前端使用ElementUI创建了一个简单的导出按钮，后端使用Apache POI生成Excel文件并通过SpringBoot的控制器返回给前端。整个过程简单明了，适合大多数Web应用的需求。

当然，实际项目中可能会遇到更复杂的需求，如动态生成数据、处理大量数据等。但通过本文的基础知识，你可以轻松扩展和定制自己的导出功能。希望本文对你有所帮助！