在 Angular2 组件中嵌入 pdf

Question

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

我使用了这个答案中的模态弹出组件，它可以很好地弹出。我的模态测试 html 如下所示：

<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是这样设置的：

public ContentUrl: SafeUrl;
public setContent() {
    this.ContentUrl = this._sanitizer.bypassSecurityTrustResourceUrl("/img/test.pdf");
}

弹出窗口很好地打开，但它没有显示嵌入的 pdf。它甚至不会尝试从服务加载 url。下载链接运行良好，并询问是否应将 pdf 保存到光盘或打开。
我也尝试将 pdf 嵌入弹出窗口之外也无济于事。
我尝试了 Chrome、Edge 和 IE。无显示嵌入的 pdf。

那么如何在角度组件中显示/嵌入 pdf 呢？

Answer 1

我最终创建了object使用innerHtml。

在模板中：

<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 是像我想要的那样嵌入的。