使用 Typescript 在 angular 6 中显示来自在线 link 的 Pdf

Question

我想在使用 pdf 地址 Click Here to See Sample Pdf From internet 在浏览器中打开 pdf 时实现，现在我想将此 pdf 显示到我的项目中

我写了一些代码但没有用我忘记写的其他代码。

在此之前，我在此处安装 ng2-pdf-viewer 形式的依赖项 from here

这是我的代码

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);
    });
  }
}

您可以预览Code here

我只想要建议

我的前端在 angular 6 上，后端在 Django 上，当我在 primeng p-fileupload 的帮助下上传我的 pdf 文件后到 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

在需要存储对变量的响应并将该变量放入 Blob[=19 之前，您可以像这样从 s3 存储桶 Amazon Web Service 中显示 Pdf =]

还有一件事你的 pdf 没有显示，因为一些 links 是安全的，这就是为什么他们不访问 link 数据 pdf

并将所有数据存储到fileURL变量中并将fileUrl Varibale放入pdf-viewer 像这样

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() 静态方法创建一个 DOMString 包含一个 URL 表示参数中给定的对象。 URL 生命周期与创建它的 window 中的文档相关联。新对象 URL 表示指定的 File 对象或 Blob 对象。

在你 pdf 之后看起来像 pdf 格式任何帮助请问和快乐编码

使用 Typescript 在 angular 6 中显示来自在线 link 的 Pdf

Show Pdf from online link in angular 6 with Typescript

pdf

response

amazon-s3

typescript

angular