PDF下载功能异常：JSON接口下载代码无法触发下载

Hey there! Let's break down why your download isn't firing. The main issue is that relying on window.open() to trigger a download from a Blob URL isn't always reliable—browsers often won't auto-download content unless specific conditions are met. Also, it looks like your responseType declaration was cut off, which could be causing parsing issues.

Here's how to fix this step by step:

1. Correct the Response Type #

First, make sure you're explicitly setting the responseType to 'blob' so Angular's HTTP client knows to parse the response as a Blob object. Your code was cut off here, so fix that:

public downloadPdf() {
  const url = 'http://161.202.31.51:8185/sgdocsrv/ar/getARList';
  const headers = new Headers();
  headers.append('Authorization', 'JWT ' + localStorage.getItem('id_token'));
  return this.http.get(url, { 
    headers: headers, 
    responseType: 'blob' // Complete this with the correct type
  });
}

2. Use an Anchor Tag for Reliable Downloads #

window.open() depends on the browser's behavior for Blob URLs, which can be inconsistent. Instead, create a hidden <a> tag programmatically and simulate a click—this is the most reliable way to trigger a download:

openDownloadWindow() {
  this.downloadPdf().subscribe(pdfBlob => {
    const url = window.URL.createObjectURL(pdfBlob);
    const downloadLink = document.createElement('a');
    
    downloadLink.href = url;
    // Set a filename (you can adjust this, or omit it if your backend sends the right header)
    downloadLink.download = 'AR_List.pdf';
    
    // Add the link to the DOM temporarily, trigger the download, then clean up
    document.body.appendChild(downloadLink);
    downloadLink.click();
    
    window.URL.revokeObjectURL(url);
    document.body.removeChild(downloadLink);
  });
}

3. Check Backend Response Headers #

For the browser to automatically pick up the correct filename, your backend should send the Content-Disposition header in its response. It should look something like this:

Content-Disposition: attachment; filename="AR_List.pdf"

If your backend includes this, you can even skip setting the download attribute on the anchor tag—the browser will handle the filename automatically.

4. Troubleshoot CORS & Authorization #

• Cross-Origin Issues: If your frontend is hosted on a different domain/port than http://161.202.31.51:8185, make sure the backend has CORS configured to allow your frontend's origin.
• Token Validity: Double-check that localStorage.getItem('id_token') is returning a valid JWT. If the token is expired or invalid, the backend might return a 4xx error instead of the Blob content, which would prevent the download from triggering.

Pro Tip: Open your browser's DevTools > Network tab, find the getARList request, and check the status code and response content. This will tell you if the request is succeeding and if you're actually getting a Blob back.

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