Javascript – How to open or download a raw pdf file coming from service

The issue here is that ng2-pdf-viewer and pdfjs-dist expect the file location or a structured data format as a source, not a raw string as you are trying to pass. To parse the raw PDF content you have, you can make use of the Blob object. This object represents immutable raw binary data and can be used to display PDF content. Here’s how you can accomplish this using Angular and ng2-pdf-viewer:

1. Convert the raw PDF data into a Blob object.
2. Create an object URL from the Blob object.
3. Pass the object URL as the source to ng2-pdf-viewer.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <pdf-viewer [src]="pdfUrl" [show-all]="true"></pdf-viewer>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  pdfUrl: string;

  constructor() {
    const pdfString = '%PDF-1.7 ... (your raw pdf content)';
    const pdfBlob = new Blob([this.base64ToUint8Array(this.b64EncodeUnicode(pdfString))], { type: 'application/pdf' });
    this.pdfUrl = URL.createObjectURL(pdfBlob);
  }

  // Helper method to convert base64 encoded string to Uint8Array
  base64ToUint8Array(base64: string) {
    const binaryString = atob(base64);
    const len = binaryString.length;
    const bytes = new Uint8Array(len);
    for (let i = 0; i < len; i++) {
      bytes[i] = binaryString.charCodeAt(i);
    }
    return bytes;
  }

  // Helper method to convert a raw string to base64 encoded string
  b64EncodeUnicode(str: string) {
    return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, (match, p1) => {
      return String.fromCharCode(Number('0x' + p1));
    }));
  }
}

This example takes a raw PDF string, encodes it in Base64, converts it to a Uint8Array, wraps it in a Blob, and then creates an object URL that can be passed as the source to ng2-pdf-viewer. This should allow you to render the PDF in your Angular application.