Displaying PDF from API in new browser tab using Angular

Other Questions API
1

Hey everyone! I’m stuck on a problem and could use some help.

I’ve got a Node app that fetches a PDF from an external API. It returns the PDF data as plain text. Here’s a snippet of what it looks like:

%PDF-1.5
%������
1 0 obj
<<
/Author (XXXX)
/CreationDate (XXX)
/ModDate (XXXX)
/Creator (EXXXX)
/Title (XXXX)
/Producer (XXXX)
/Subject (XXXX)
>>
endobj

Now, I’m trying to show this PDF in a new tab using Angular. I’ve tried converting the data to a Blob and creating a URL, but I keep getting a “Failed to load PDF document” error.

Here’s what I’ve tried in Angular:

this.dataService.getPdf().subscribe(pdfData => {
  const pdfBlob = new Blob([pdfData], { type: 'application/pdf' });
  const pdfUrl = URL.createObjectURL(pdfBlob);
  window.open(pdfUrl, '_blank');
});

It works fine with a test PDF file, but not with the API data. Any ideas on what I’m doing wrong or how to fix this? I’ve been at it for days and I’m totally stumped. Thanks in advance for any help!

2

It seems like the PDF data you’re receiving is in raw text format rather than base64. In this case, you might need to convert the text to a Uint8Array before creating the Blob. Here’s an approach you could try:

this.dataService.getPdf().subscribe(pdfData => {
  const uint8Array = new TextEncoder().encode(pdfData);
  const pdfBlob = new Blob([uint8Array], { type: 'application/pdf' });
  const pdfUrl = URL.createObjectURL(pdfBlob);
  window.open(pdfUrl, '_blank');
});

This method encodes the text data into a Uint8Array, which should preserve the binary structure of the PDF. If this doesn’t work, you might want to check if the API is sending the correct headers for the PDF content type. Hope this helps!

3

hey, have u tried base64 encoding? sometimes api’s send pdfs as base64 strings, so decoding it first can help:

const decodedData = atob(pdfData);
const pdfBlob = new Blob([decodedData], { type: 'application/pdf' });

might solve ur issue. good luck!

4

I’ve encountered a similar issue before, and it turns out the problem might be with how the API is sending the PDF data. In my experience, some APIs send PDF content as plain text without proper encoding, which can cause issues when trying to display it.

One solution that worked for me was to use a library called ‘pdfjs-dist’. It’s specifically designed to handle PDF rendering in browsers and can work with various data formats.

Here’s a basic implementation that might help:

import * as pdfjsLib from 'pdfjs-dist';

this.dataService.getPdf().subscribe(pdfData => {
  const loadingTask = pdfjsLib.getDocument({data: pdfData});
  loadingTask.promise.then(pdf => {
    const pdfDataUri = `data:application/pdf;base64,${btoa(pdfData)}`;
    window.open(pdfDataUri, '_blank');
  });
});

This approach uses pdfjs to parse the PDF data, then creates a data URI to open in a new tab. It’s been quite reliable in my projects. Remember to install the ‘pdfjs-dist’ package via npm if you decide to try this method.