Angular 7下载Blob文件损坏，求技术解决方案

Hey there, let's figure out why your downloaded Excel file is showing up as corrupted. Based on your code and the steps you've already tried, here are targeted fixes and checks to resolve this issue:

1. Fix the Variable Name Typo First (Critical!) #

Looking at your subscribe callback, you've named the parameter reponse (missing an 's'), but then you try to access response inside it. This is a classic typo that would cause you to access an undefined value for the response body, leading to an empty or invalid Blob. Correct that first:

this.downloadFileService.downloadFile(downloadParameters, httpOptions).subscribe(response => { // Fixed variable name
  const blob = new Blob([response.body], { type: 'application/vnd.openxmlformat-officedocument.spreadsheetml.sheet' });
  saveAs(blob, filename);
});

2. Adjust Your HTTP Options #

Your current Content-Type header is set to application/x-www-form-urlencoded, which is incorrect for downloading binary files. Instead, set an Accept header matching your Excel MIME type, and ensure responseType is properly configured:

const httpOptions = { 
  headers: new HttpHeaders({ 'Accept': 'application/vnd.openxmlformat-officedocument.spreadsheetml.sheet' }), 
  responseType: 'blob' as 'json', // The "as 'json'" is a TypeScript workaround for type compatibility
  observe: 'response' 
};

Using responseType: 'blob' lets Angular handle the binary data directly, avoiding potential encoding issues that come with arraybuffer if not handled properly.

3. Skip Redundant Blob Construction (If Using responseType: 'blob') #

If you set responseType: 'blob', the response.body is already a Blob object. You don't need to wrap it in another Blob—just pass it directly to saveAs:

this.downloadFileService.downloadFile(downloadParameters, httpOptions).subscribe(response => {
  saveAs(response.body as Blob, filename);
});

4. Verify the Service's API Call #

Double-check how your downloadFileService.downloadFile method is implemented. Ensure it's correctly sending the file_url to your backend API, and that the API is returning the raw binary Excel data (not a base64 string or a redirect response).

A quick test: copy the file_url you're constructing, paste it into your browser's address bar, and see if the downloaded file opens correctly. If it does, the issue is in your Angular request handling; if it's still corrupted, the problem lies with the backend's file generation or response.

5. Check for Encoding Mismatches #

If your backend returns the file as a base64-encoded string (instead of raw binary), you'll need to decode it before creating the Blob. Here's how to handle that:

const base64Data = response.body as string;
const byteCharacters = atob(base64Data);
const byteNumbers = new Array(byteCharacters.length);
for (let i = 0; i < byteCharacters.length; i++) {
  byteNumbers[i] = byteCharacters.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
const blob = new Blob([byteArray], { type: 'application/vnd.openxmlformat-officedocument.spreadsheetml.sheet' });
saveAs(blob, filename);

Start with the variable typo fix—it's the most likely culprit here. If that doesn't resolve it, work through the other checks one by one.

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