How to display pdf in frontend Angular from fetched binary data ( Binary data is one the element of received an object from REST API)?

Question

In MongoDB 'certificate' collection have '_id, studentID, file' fields. Simply I can input for each document where data type for '_id' and 'studentID' are the string, and file data type is Binary (this binary auto-generated by MongoDB during insertion for each user pdf file).

From fetched data, I can display into angular (e.g StudentID, SchoolName) but only I can't display pdf from fetched binary data into angular

In node server: (app.js) // given the core code to avoid too long reading

// This for inserting data into MongoDB

**var fs = require('fs');  
var pdfBinary = fs.readFileSync("./TestingPurpose.pdf"); 
var pdf = new mongodb.Binary(pdfBinary);**
db.collection('Test').insert({                    
                 dateTime: new Date(dateTime),
                 studentName: studentName,
                 Principal: principalName,
                 file: pdf }

• After successfully data importing in MongoDB can see data in MongoDB as below:

  { "_id" : "C1135", "dateTime" : ISODate("2019-01-23T11:45:52.254+01:00"), "studentID" : "stu123", "schoolName" : "XXX Primary School", "file" : BinData(0,"JVBERi0xLjcNCiW1tbW1DQoxIDAgb2Jq... more 101410 bytes - application/pdf") }

---

certificate.model.ts: file

export class Certificate {
  _id: string;
  dateTime: string;
  studentID: string;
  schoolName: string;
  file: any;
}

---

Then in Frontend Angular use (user.service.ts) to receive all infro from Node (app.js)::

import { Certificate } from '../model/certificate.model';
cert: Certificate[];
  // receiving all students info
getCertificates() {
    return this.http.get('http://localhost:5600/aziz/displayAllCertificates');
  }
// to get always get an instant update I use refreshGetCertificates()
  refreshGetCertificates() {
    this.chkSubscrip = this.getCertificates().subscribe((res) => {
      this.cert= res as Certificate[];
    });
  }

---

In Certificate Component: (certificate.component.ts):

export class CertificatesComponent implements OnInit, OnDestroy {
      myPDF: any;
      constructor(
         public userService: UserService,
         private dialog: MatDialog,
  ) { }
ngOnInit() {
    this.userService.refreshGetCertificates();
  }
 pdfView(receiveObj) {

    this.forPDF = !this.forPDF;
    const myUint8 = new Uint8Array(receiveObj);
    this.myPDF= myUint8;
  }
}

---

(certificate.component.html):

<div class="rows">
  <ul class="settings_test headerclass text-center">
    <li style="float: left">ID</li>
    <li>Student-ID</li>
    <li>School</li>
    <li>PDF View</li>
  </ul>
</div>

<div *ngFor="let eachCerts of userService.cert">
  <div class="row">
    <div class="settings_test">
      <li style="width:10%">{{eachCerts._id}}</li>
      <li style="width:10%">{{eachCerts.studentID}}</li>
      <li style="width:10%">{{eachCerts.schoolName}}</li>
      <li style="width:10%"> <button (click) ="pdfView(eachCerts.file)">  View as PDF </button></li>
      <object *ngIf=forPDF data="{{myPDF}}" ></object>
    </div>
  </div>
</div>

In each row will show ID, StudentID, SChool-Name and a button('View as PDF'), when the button will be clicked then a popup or a new window will appear to display the pdf file from the fetched pdf binary data.

Answer 1

As posted in the comments, you can use this answer that should solve your issue, with this modification:

At the beginning, you have to convert your data into a blob. In your case that would be:

public getPDFFromFile(file /* place here the correct type of your class*/): Blob {   
    return new Blob([file.buffer])
}

then you should be able to use the above mentioned answer. As note by MongoDB documentation, you can access the internal binary data via the buffer property which is of type Buffer.