使用 Typescript 从 Angular 6 的在线链接中显示 Pdf

Posted 2023-03-12

【中文标题】使用 Typescript 从 Angular 6 的在线链接中显示 Pdf

【英文标题】：Show Pdf from online link in angular 6 with Typescript

【发布时间】：2020-01-16 17:48:50

【问题描述】：

当我使用 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​​strong> 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 'Ô¡oBO 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 上读取响应

感谢您的任何建议和帮助，祝您编码愉快

【参考方案1】：

您可以像这样在 s3 bucket Amazon Web Service 中显示 Pdf，然后您需要将响应存储在变量上并将该变量放入 Blob

还有一件事你的 pdf 没有显示，因为某些链接是安全的，这就是他们不访问链接数据 pdf 的原因

并将所有数据存储到fileURL变量中，并将fileUrl变量放入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 生存期与创建它的窗口中的文档相关联。新对象 URL 表示指定的 File 对象或 Blob 对象。

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