Question

在angular 4.3中我想打开一个模态弹出窗口并显示一个嵌入的pdf文件，如下所示：https://pdfobject.com/static.html

我使用了弹出的modal popup component from this answer。我对模态的测试html如下所示：

query = {'ID': fetchdata.ID, 'ChannelID': fetchdata.ChannelID, 'TimeStamp': fetchdata.TimeStamp, 'RMSVoltage': fetchdata.RMSVoltage}

在我的组件中，我设置<a class="btn btn-default" (click)="setContent();modal.show()">Show</a> <app-modal #modal> <div class="app-modal-header"> Testing pdf embedding </div> <div class="app-modal-body"> <div class="embed-responsive" *ngIf="ContentUrl"> <object [attr.data]="ContentUrl" type="application/pdf" class="embed-responsive-item"> <embed [attr.src]="ContentUrl" type="application/pdf" /> </object> </div> <p><a [href]="ContentUrl">PDF Download</a></p> </div> <div class="app-modal-footer"> <button type="button" class="btn btn-default" (click)="modal.hide()">Close</button> </div> </app-modal>，如下所示：

ContentUrl

弹出窗口打开很好，但它没有显示嵌入的pdf。它甚至没有尝试从服务加载URL。下载链接很好地工作，并询问pdf是应该保存到光盘还是打开我试图在弹出窗口之外嵌入pdf也无济于事我试过Chrome，Edge和IE。无显示嵌入的pdf。

那么如何在角度分量中显示/嵌入pdf？

Answer 1

我最终使用innerHtml创建了object。

在模板中：

<div *ngIf="innerHtml"
  [innerHTML]="innerHtml">
</div>

在背后的代码中：

public innerHtml: SafeHtml;
public setInnerHtml(pdfurl: string) {
    this.innerHtml = this._sanitizer.bypassSecurityTrustHtml(
        "<object data='" + pdfurl + "' type='application/pdf' class='embed-responsive-item'>" +
        "Object " + pdfurl + " failed" +
        "</object>");
}

这样，对象在创建时就已经设置了数据属性。至少现在PDF是按照我想要的方式嵌入的。

Answer 2

尝试使用模块在应用内打开PDF，例如。 https://www.npmjs.com/package/ng2-pdf-viewer

检查这个答案： Angular 2 how to display .pdf file

Answer 3

此代码在 angular 9 中对我有用

crossover =  crossover(basis, 50)

image

在Angular2组件中嵌入pdf

3 个答案: