vue java 生成excel并下载

原创

mob64ca12f5c08e 2024-10-28 07:03:05 ©著作权

©著作权归作者所有：来自51CTO博客作者mob64ca12f5c08e的原创作品，请联系作者获取转载授权，否则将追究法律责任

使用 Vue 和 Java 生成并下载 Excel 文件的步骤

为了实现用 Vue 前端与 Java 后端共同生成并下载 Excel 文件的功能，我们可以分为以下几个步骤：

步骤	描述
1	在 Vue 前端创建一个表单或按钮触发下载请求
2	Vue 发送 HTTP 请求到 Java 后端
3	Java 后端接收请求并处理数据
4	使用 Apache POI 或其他库生成 Excel
5	将生成的 Excel 文件返回给前端
6	前端接收并下载 Excel 文件

下面我们依次详细讲解每个步骤。

1. 创建下载按钮

首先，在 Vue 项目中，我们需要一个按钮来触发下载请求。代码示例如下：

<template>
  <div>
    <button @click="downloadExcel">下载 Excel</button>
  </div>
</template>

<script>
export default {
  methods: {
    downloadExcel() {
      // 触发下载请求
      this.$http.get('http://localhost:8080/api/downloadExcel', {
        responseType: 'blob'  // 指定响应类型为 blob
      }).then(response => {
        // 创建一个链接并下载文件
        const url = window.URL.createObjectURL(new Blob([response.data]));
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', 'data.xlsx'); // 指定下载文件名
        document.body.appendChild(link);
        link.click(); // 执行下载
        document.body.removeChild(link); // 移除链接
      })
    }
  }
}
</script>

以上代码实现了一个下载按钮，通过 HTTP 请求来下载 Excel 文件。

2. Vue 发送请求

在downloadExcel方法中，我们使用了axios库发送 GET 请求到 Java 后端的 API 接口。

3. Java 后端处理请求

在 Java 后端，我们需要创建一个 RESTful API 来接收请求。可以使用 Spring Boot 框架来实现。

import org.apache.poi.ss.usermodel.*;
import org.apache.poi.xssf.usermodel.XSSFWorkbook;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

import java.io.ByteArrayOutputStream;

@RestController
public class ExcelController {

    @GetMapping("/api/downloadExcel")
    public ResponseEntity<byte[]> downloadExcel() {
        // 创建 Excel 工作簿
        Workbook workbook = new XSSFWorkbook();
        Sheet sheet = workbook.createSheet("数据");
        Row row = sheet.createRow(0); // 创建首行
        Cell cell = row.createCell(0);
        cell.setCellValue("Hello, Excel"); // 填入示例数据

        // 将工作簿写入输出流
        ByteArrayOutputStream out = new ByteArrayOutputStream();
        try {
            workbook.write(out);
            workbook.close();
        } catch (Exception e) {
            e.printStackTrace();
        }

        // 返回 Excel 文件数据
        return ResponseEntity.ok()
                .header("Content-Disposition", "attachment; filename=data.xlsx")
                .body(out.toByteArray());
    }
}

上述代码实现了一个生成 Excel 文件的后端接口，使用 Apache POI 库来生成 Excel 文件，并能够将其作为下载内容返回。

4. 生成 Excel 文件

在 Java 后端中，我们使用了 Apache POI 库来生成 Excel 文件。首先，创建一个工作簿（Workbook）并向其添加数据。

5. 返回文件到前端

通过设置响应头，我们可以通过 ResponseEntity 将文件返回给前端，并设置为附件下载。

6. 前端接收和下载

回到 Vue 中，通过 window.URL.createObjectURL 和临时创建的下载链接，用户就可以便捷地下载生成的 Excel 文件。

序列图

sequenceDiagram
  participant User
  participant Vue
  participant Java Backend

  User->>Vue: 点击下载按钮
  Vue->>Java Backend: 发送 GET 请求
  Java Backend->>Java Backend: 生成 Excel 数据
  Java Backend->>Vue: 返回 Excel 文件
  Vue->>User: 触发下载