vue下载java生成的excel中有不可读取内容

原创

mob64ca12dba5b0 2024-09-06 04:25:07 ©著作权

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

Vue + Java 实现下载 Excel

在现代 Web 开发中，用户通常需要从后台下载生成的文件，例如 Excel 格式的报表。这里，我们将使用 Vue 作为前端框架，Java 作为后端服务，讲解如何实现下载一个包含“不可读取内容”的 Excel 文件。整个实现流程可以概括为以下步骤：

流程概览

flowchart TD
    A[前端Vue请求下载Excel] --> B[后端Java生成Excel]
    B --> C[提供Excel文件下载]
    C --> D[用户下载文件]

步骤	描述
A	前端 Vue 应用发起请求下载 Excel
B	后端 Java 生成 Excel 文件
C	将生成的文件返回给前端，供用户下载
D	用户获取到 Excel 文件

第一步：前端 Vue 发送请求

在 Vue 中，我们需要创建一个方法来发送请求，并下载生成的 Excel 文件。下面是一个简单的实现：

// 方法发送下载请求
downloadExcel() {
    // 发送 GET 请求到后端生成Excel的 API
    axios({
        url: "http://localhost:8080/download/excel", // 后端 API 地址
        method: 'GET',
        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', 'report.xlsx'); // 设置下载文件名
        document.body.appendChild(link);
        link.click(); // 自动点击链接进行下载
        link.remove(); // 下载后移除链接
    }).catch((error) => {
        console.error("下载失败:", error);
    });
}

代码说明：

axios 用于发送 HTTP 请求，确保不需要刷新页面。
responseType 设置为 blob 以处理二进制数据。
createObjectURL 创建一个 URL 对象用于下载。
<a> 标签用于模拟点击下载。

第二步：后端 Java 生成 Excel

接下来，我们在 Java 后端使用 Apache POI 库来生成 Excel 文件：

import org.apache.poi.ss.usermodel.*;
import org.apache.poi.xssf.usermodel.XSSFWorkbook;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@RestController
public class ExcelController {

    @GetMapping("/download/excel")
    public void downloadExcel(HttpServletResponse response) throws IOException {
        Workbook workbook = new XSSFWorkbook(); // 创建 Excel 工作簿
        Sheet sheet = workbook.createSheet("Data"); // 创建 sheet

        // 在单元格中输入一些不可读取内容
        Row row = sheet.createRow(0);
        Cell cell = row.createCell(0);
        cell.setCellValue("Some hidden content");

        // 配置响应
        response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");
        response.setHeader("Content-Disposition", "attachment; filename=report.xlsx");
        workbook.write(response.getOutputStream()); // 将 Excel 写入输出流
        workbook.close(); // 关闭工作簿
    }
}

代码说明：

创建 XSSFWorkbook 实例用于生成 .xlsx 格式的 Excel。
利用 HttpServletResponse 设置响应头，以便浏览器正确处理下载。
write 方法将工作簿数据写入响应的输出流。

第三步：用户下载文件

当用户点击下载按钮或触发方法时，将会自动下载 Excel 文件，这一步在前端已经实现。

关系图

erDiagram
    Frontend ||--o{ Request: sends
    Request ||--o| Backend: handled by
    Backend ||--|{ ExcelFile: generates
    ExcelFile ||--|{ User: downloads

在这个关系图中，我们可以看到前端通过请求与后端交互，后端生成 Excel 文件并提供给用户下载。