Angular+Spring Boot文件下载异常求助：无报错但无法下载

我来帮你排查这个下载问题！你的代码已经走通了请求链路，但在服务端响应头设置和客户端Blob处理逻辑上有两个关键问题，导致无法触发正常下载：

问题1：服务端Content-Type设置错误 #

你当前把响应的Content-Type设为了text/json，这会让浏览器把返回的二进制文件识别成JSON内容，无法正确触发下载行为。另外，中文文件名还可能出现乱码问题。

修改后的服务端代码 #

@GetMapping(value = "/projects/file/download/{filename}/{projectId}") 
public ResponseEntity<byte[]> getResource(@PathVariable String filename, @PathVariable Long projectId,HttpServletResponse response) throws ResourceNotFoundException, IOException { 
    String fileLocation=//自定义文件路径，省略逻辑简化代码
    File downloadFile= new File(fileLocation); 
    byte[] isr = Files.readAllBytes(downloadFile.toPath()); 
    String fileName = filename; 
    HttpHeaders respHeaders = new HttpHeaders(); 
    respHeaders.setContentLength(isr.length); 
    // 改用通用二进制流类型，让浏览器识别为可下载文件
    respHeaders.setContentType(MediaType.APPLICATION_OCTET_STREAM); 
    respHeaders.setCacheControl("must-revalidate, post-check=0, pre-check=0"); 
    // 编码文件名，解决中文乱码问题（可选但强烈推荐）
    String encodedFileName = URLEncoder.encode(fileName, "UTF-8").replace("+", "%20");
    respHeaders.set(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=\"" + encodedFileName + "\""); 
    return new ResponseEntity<byte[]>(isr, respHeaders, HttpStatus.OK); 
}

问题2：客户端Blob处理逻辑错误 #

你的组件里用window.open(response.url, '_blank')，但这里的response是Blob对象，它并没有url属性，所以会打开空白标签页。正确的做法是创建临时URL指向Blob，通过a标签触发下载。

修改后的Angular组件代码 #

downloadFile(fl: FileModel) { 
    this.projectSerivce.downloadFile(fl.fileName, this.id).subscribe(blob => { 
        // 为Blob创建临时访问URL
        const fileUrl = window.URL.createObjectURL(blob);
        // 创建隐藏的a标签
        const downloadLink = document.createElement('a');
        downloadLink.href = fileUrl;
        // 设置下载的文件名
        downloadLink.download = fl.fileName;
        // 将a标签添加到DOM并触发点击
        document.body.appendChild(downloadLink);
        downloadLink.click();
        // 清理临时资源，避免内存泄漏
        window.URL.revokeObjectURL(fileUrl);
        document.body.removeChild(downloadLink);
    }, error => {
        // 增加错误处理，提升用户体验
        console.error('文件下载失败:', error);
        alert('文件下载失败，请检查后重试');
    }); 
}

说明 #

• Angular服务层的代码无需修改，responseType: 'blob'的设置是正确的，确保了响应被解析为Blob对象。
• 服务端的APPLICATION_OCTET_STREAM是通用的二进制文件类型，如果你知道文件的具体类型（比如PDF、图片等），也可以设置对应的MediaType（如MediaType.APPLICATION_PDF），效果会更好。

内容的提问来源于stack exchange，提问作者Andrei Mîndru