Angular5中responseType='blob'管理及PDF下载转格式问题求助

Hey there! Let's get this sorted so you can download your proper PDF instead of that zip file full of XMLs. Here's what's going on and how to fix it:

What's Causing the Problem? #

It looks like your backend is returning an Office Open XML document (like a .docx file, which is actually a zip archive containing XML files) instead of a true PDF. Alternatively, your frontend might not be handling the binary PDF data correctly, leading it to save the file as a zip by mistake.

Step 1: Ensure Backend Returns a PDF #

First, double-check your backend service (service.... part) to confirm it's generating and sending a valid PDF file. If it's currently outputting a .docx or other document format, you'll need to adjust the backend logic to generate a PDF directly (using tools like Apache POI, iTextSharp, or your framework's native PDF generation library).

Step 2: Fix Frontend Binary Data Handling #

If your backend is supposed to return a PDF, the issue is likely that your frontend isn't specifying the correct response type for binary data. Here's how to update your code:

Updated Component.ts Code

export(id: string) {
  this.ss.download(id, { responseType: 'blob' })
    .subscribe(data => {
      console.log('PDF blob data:', data);
      // Wrap the response in a Blob with the correct PDF MIME type
      const pdfBlob = new Blob([data], { type: 'application/pdf' });
      // Save directly as a PDF file instead of zip
      FileSaver.saveAs(pdfBlob, 'doc.pdf');
    }, 
    error => console.error('Error downloading the file:', error), 
    () => console.log('Completed file download.'));
}

Updated Service Code

Make sure your service's download method supports the responseType parameter and tells the backend to send a PDF:

// Example service method (adjust to match your actual endpoint)
download(id: string, options?: { responseType: 'blob' }) {
  return this.http.get(`/your-api-endpoint/${id}`, {
    ...options,
    headers: new HttpHeaders({
      // Explicitly request PDF format from the backend
      'Accept': 'application/pdf'
    })
  });
}

Why This Works #

• responseType: 'blob' tells Angular to treat the response as binary data (instead of the default JSON/text), which is required for PDF files.
• The Accept: application/pdf header ensures your backend knows you want a PDF, preventing it from sending other document formats.
• Wrapping the data in a Blob with type: 'application/pdf' ensures FileSaver saves it as a valid PDF instead of misclassifying it as a zip.

If Backend Can Only Generate Docx #

If your backend can't output PDF directly, you'll need to convert the docx to PDF. The most reliable way is to do this on the backend, but if you need a frontend solution, you can use libraries like docx-pdf (note: frontend conversion may have formatting limitations).

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