Показать PDF из онлайн-ссылки в angular 6 с Typescript

Question

Я хочу реализовать, когда я открою PDF в браузере с адресом PDF Нажмите здесь, чтобы увидеть образец PDF от inte rnet Теперь я хочу показать этот PDF в мой проект

Я пишу некоторый код, но не работал что-то еще, я забыл написать.

и перед этим я устанавливаю зависимость ng2-pdf-viewer здесь отсюда

Вот мой код

HTML

<pdf-viewer [src]="httpData" [render-text]="true" style="display: block;"></pdf-viewer>

TS

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

import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  pdfSrc = "http://www.africau.edu/images/default/sample.pdf"; // This is my online pdf link suppose this link come from my s3 bucket Amazon Web Service and when i open it into browser i want to show my pdf.

  httpData: any;

  constructor(private http: HttpClient){
  }

  ngOnInit() {
    this.http.get<any>(this.pdfSrc).subscribe(data => {
      this.httpData=data;
      var file = new Blob([data], { type: 'application/pdf' });
        var fileURL = URL.createObjectURL(file);
         console.log("data => " , this.httpData);
      console.log(" file url => ", fileURL);
    });
  }
}

Предварительный просмотр Код здесь

Я хочу только предложение

Мой frontEnd включен angular 6, а backEnd включен Django, и когда я загружаю свой pdf с помощью primeng p-fileupload после того, как этот файл загружен в s3 корзину Amazon Web Service , теперь я пишу API для получения конкретного пользователя PDF, но в моем ответе, когда я вижу этот ответ в консоли, он отображается как

%PDF-1.3
%Äåòåë§ó ÐÄÆ
6 0 obj
<< /Length 7 0 R /Filter /FlateDecode >>
stream
xVAsâ:¾çWhzx3Û4Ic[è;Ýv·dÃÛwÁ_CBPÚ¿l'ÐnÛép°dÇÒ'YúÄý¤òðOý¡O¥¤åtvY J+ú°Jéì+6V¯>¯ÁÐ
)êwèz¡ëaznØØXR@{þ¸§/±µË©µ6½üè6#²þAð}S/¾¾5ÞÐYXÔ¡.ÅÿÓ8>ÎGo]"7CAÑP@¦þ¥ÎÑMn®né
=êÄãiLWëqþ£øõÃ[H 'Ô¡oB}O 1>}Ó{d§Rn?ÒBß?Ò3$ÃsLb`<HDú±ìÞkÍã1ÏfàpÝyOüÀcdq6VF·³ëÛóÑäæ+q8è)Aç4_ÐÅÝíl:¾;J¶NuãÀ@ÈGOAlïß
Dؼµ÷u  uT¾( á}ö

Итак, как прочитать этот ответ на внешнем интерфейсе, т. Е. На angular 6 с машинописью

Любое предложение и помощь признателен спасибо и счастливого кодирования

Answer 1

Вы можете показать Pdf из s3 корзины Amazon Web Service , например, до того, как вам нужно будет сохранить ответ на переменную и эту переменную поместить в Blob

И еще одну вещь, которую вы pdf не отображается, потому что некоторые ссылки безопасны, поэтому они не имеют доступа к данным ссылки *HTML

<pdf-viewer [src]="fileURL" [original-size]="false"></pdf-viewer>

TS

filepath: any;
fileURL: any;

this.http.get('Apiname').subscribe(response => {
          this.filepath = response;
          var file = new Blob([this.filepath]);
          this.fileURL = URL.createObjectURL(file);
 });

Метод URL.createObjectURL() stati c создает DOMString, содержащий URL-адрес, представляющий объект, указанный в параметре. Срок действия URL привязан к документу в окне, в котором он был создан. URL нового объекта представляет указанный Файл объект или Blob объект.

После того, как вы pdf Выглядите как формат pdf, любая помощь, которую спрашивает plz и Happy Coding