Angular前端+Spring后端ODT文件下载失败/损坏问题排查

核心问题分析 #

你遇到的文件损坏/为空问题，核心原因大概率是后端响应头配置错误或前端Blob对象创建逻辑错误，导致二进制数据在传输或处理过程中被篡改。以下是具体排查步骤和修复方案：

一、排查思路 #

1. 验证后端原始数据正确性
   在后端代码中新增测试逻辑，直接将从数据库获取的byte[]写入本地文件，确认文件能正常用LibreOffice打开：

   // 后端测试代码（可临时添加）
   FileOutputStream fos = new FileOutputStream("test_local.odt");
   fos.write(fileData);
   fos.close();
   

   如果本地文件损坏，说明问题出在数据库读取环节，需检查存储时的二进制数据是否完整。

2. 用工具验证后端接口响应
   使用Postman或curl请求后端/downloadRequest接口，检查：

   • 响应头Content-Length是否与实际文件大小一致
   • 下载的文件能否正常打开
     如果工具下载的文件正常，问题出在前端处理逻辑；如果工具下载的文件也损坏，问题出在后端响应配置。

3. 检查前端Blob创建逻辑
   确保前端拿到的response.body是纯二进制Blob类型，而非被序列化的JSON对象。

二、代码修复方案 #

1. 后端Controller修复 #

原代码存在两个关键问题：

• InputStreamResource.getFilename()默认返回null，导致Content-Disposition头的文件名无效
• 异常时返回null会导致前端收到空响应或500错误

修复后的代码：

@RequestMapping(value = "/downloadRequest", method = RequestMethod.GET)
public ResponseEntity<byte[]> downloadRequest(@RequestParam(value="id") int id) {
    try {
        byte[] fileData = getDocumentRestService().downloadRequest(id);
        // 从数据库或业务逻辑中获取真实文件名，此处为示例
        String fileName = "document_" + id + ".odt"; 

        HttpHeaders headers = new HttpHeaders();
        headers.setContentLength(fileData.length);
        headers.set(HttpHeaders.CONTENT_TYPE, "application/vnd.oasis.opendocument.text");
        headers.set(HttpHeaders.CONTENT_DISPOSITION, "attachment;filename=\"" + fileName + "\"");

        // 直接返回byte[]更简洁，Spring会自动处理二进制响应
        return ResponseEntity.ok().headers(headers).body(fileData);
    } catch (Exception e) {
        e.printStackTrace();
        // 返回明确的错误状态码
        return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).build();
    }
}

2. 前端组件修复 #

原代码错误地将整个HttpResponse对象传入Blob构造函数，而非response.body（真正的Blob数据），同时缺少URL资源释放逻辑。

修复后的代码：

download() {
    const id: number = this.documentDetailFormGroup.controls['id'].value;

    if (id > 0) {
        this.documentDatasource.downloadFormData(id).subscribe({
            next: (response) => {
                const downloadLink = document.createElement('a');
                // 直接使用响应体的Blob数据创建URL
                const blobUrl = window.URL.createObjectURL(
                    new Blob([response.body], { type: 'application/vnd.oasis.opendocument.text' })
                );
                downloadLink.href = blobUrl;

                // 从响应头中解析后端返回的文件名（可选，更灵活）
                const contentDisposition = response.headers.get('Content-Disposition');
                let fileName = "Test.odt";
                if (contentDisposition) {
                    const match = contentDisposition.match(/filename="?([^"]+)"?/);
                    fileName = match ? match[1] : fileName;
                }
                downloadLink.download = fileName;

                document.body.appendChild(downloadLink);
                downloadLink.click();
                // 释放URL资源，避免内存泄漏
                window.URL.revokeObjectURL(blobUrl);
                document.body.removeChild(downloadLink);
            },
            error: (err) => {
                console.error('下载失败:', err);
                // 可添加用户友好的错误提示
            }
        });
    }
}

三、额外注意事项 #

• 跨域配置：如果前后端存在跨域，后端需配置CORS，允许Content-Disposition响应头被前端读取，否则无法解析文件名。
• Spring版本兼容：如果使用Spring 4.x版本，返回byte[]比InputStreamResource更稳定，避免流处理异常。
• 前端响应类型：确保sendDownloadRequestWithParams方法中responseType: 'blob'配置正确，不要改为json或其他类型。

内容的提问来源于stack exchange，提问作者KurtJ