在现代Web应用中,数据交互通常需要将数据以文件的形式返回给用户,Excel文件因其便于数据处理和分析,成为了最常见的文件格式之一。本文将介绍如何实现一个后端返回Excel文件,并在前端实现下载功能的完整解决方案。

一、后端实现

假设我们使用的是Java Spring Boot作为后端框架。在Spring Boot中,可以使用Apache POI库来生成Excel文件。以下是一个简单的示例:

  1. 添加依赖

pom.xml中添加Apache POI依赖:

<dependency>
    <groupId>org.apache.poi</groupId>
    <artifactId>poi</artifactId>
    <version>5.2.2</version>
</dependency>
<dependency>
    <groupId>org.apache.poi</groupId>
    <artifactId>poi-ooxml</artifactId>
    <version>5.2.2</version>
</dependency>
  1. 创建Controller

我们一步一步来创建一个接口,该接口生成并返回Excel文件。

import org.apache.poi.ss.usermodel.Row;
import org.apache.poi.ss.usermodel.Sheet;
import org.apache.poi.xssf.usermodel.XSSFWorkbook;
import org.springframework.http.HttpHeaders;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

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

@RestController
public class ExcelController {

    @GetMapping("/export/excel")
    public ResponseEntity<byte[]> exportExcel() {
        try (XSSFWorkbook workbook = new XSSFWorkbook(); ByteArrayOutputStream outputStream = new ByteArrayOutputStream()) {
            // 创建工作表
            Sheet sheet = workbook.createSheet("数据");
            // 创建表头
            Row headerRow = sheet.createRow(0);
            headerRow.createCell(0).setCellValue("姓名");
            headerRow.createCell(1).setCellValue("年龄");

            // 插入数据
            Row row1 = sheet.createRow(1);
            row1.createCell(0).setCellValue("Alice");
            row1.createCell(1).setCellValue(25);

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

            // 将工作簿写入输出流
            workbook.write(outputStream);
            byte[] bytes = outputStream.toByteArray();

            // 设置响应头
            HttpHeaders headers = new HttpHeaders();
            headers.add("Content-Disposition", "attachment; filename=data.xlsx");
            headers.add("Content-Type", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");

            return new ResponseEntity<>(bytes, headers, HttpStatus.OK);
        } catch (IOException e) {
            e.printStackTrace();
            return new ResponseEntity<>(HttpStatus.INTERNAL_SERVER_ERROR);
        }
    }
}

二、前端实现

在前端,我们可以使用JavaScript的Fetch API来请求这个接口,并下载Excel文件。下面是一个基本的HTML页面示例:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>下载Excel示例</title>
</head>
<body>
    <h1>下载Excel文件</h1>
    <button id="downloadBtn">下载Excel</button>

    <script>
        document.getElementById('downloadBtn').addEventListener('click', function() {
            fetch('/export/excel')
                .then(response => {
                    if (!response.ok) {
                        throw new Error('网络响应错误');
                    }
                    return response.blob();
                })
                .then(blob => {
                    const url = window.URL.createObjectURL(blob);
                    const a = document.createElement('a');
                    a.href = url;
                    a.download = 'data.xlsx'; // 设置下载文件名
                    document.body.appendChild(a);
                    a.click();
                    a.remove();
                    window.URL.revokeObjectURL(url);
                })
                .catch(error => {
                    console.error('下载失败:', error);
                });
        });
    </script>
</body>
</html>

三、总结

以上就是通过Spring Boot后端生成并返回Excel文件,并通过HTML和JavaScript实现前端下载功能的完整流程。在实际应用中,您可以根据需求调整数据内容和格式。希望本文对您实现相应功能有所帮助!

点赞(0) 打赏

微信小程序

微信扫一扫体验

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部