Как отобразить pdf во внешнем интерфейсе Angular из извлеченных двоичных данных (двоичные данные являются одним из элементов полученного объекта из REST API)?

Question

В коллекции сертификатов MongoDB есть поля '_id, studentID, file'.Просто я могу ввести для каждого документа, где тип данных для '_id' и 'studentID' является строкой, а тип данных файла - Binary (этот двоичный файл автоматически генерируется MongoDB во время вставки для каждого пользовательского файла PDF).

Из извлеченных данных я могу отображать в угловых (например, StudentID, SchoolName), но только я не могу отобразить pdf из извлеченных двоичных данных в угловых

На сервере узла: (app.js) // с учетом ядракод, чтобы избежать слишком длинного чтения

// Это для вставки данных в 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 }

• После успешного импорта данных в MongoDB можно увидеть данные в MongoDB, как показано ниже:

  {"_id": "C1135", "dateTime": ISODate ("2019-01-23T11: 45: 52.254 + 01: 00"), "studentID": "stu123", "schoolName": "Начальная школа XXX ", " файл ": BinData (0," JVBERi0xLjcNCiW1tbW1DQoxIDAgb2Jq ... больше 101410 байт - приложение / pdf ")}

---

Certificate.model.ts : файл

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

---

Затем в Frontend Angular использовать ( использоватьr.service.ts ) для получения всей информации от узла ( 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[];
    });
  }

---

в компоненте сертификата: (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>

В каждой строке будут отображаться идентификатор, StudentID, имя школы и кнопка («Просмотреть как»).PDF '), когда кнопка будет нажата, появится всплывающее окно или новое окно для отображения файла PDF из извлеченных двоичных данных PDF.

Answer 1

Как указано в комментариях, вы можете использовать этот ответ , который должен решить вашу проблему, с этой модификацией:

Вначале вы должны преобразовать свои данные в большой двоичный объект.В вашем случае это будет:

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

, тогда вы сможете использовать вышеупомянутый ответ.Как отмечено в документации MongoDB, вы можете получить доступ к внутренним двоичным данным через свойство buffer, которое имеет тип Buffer.