您可以通过哪些不同方式显示来自 API 调用的 HTML 页面？答案

【问题标题】：What are the different ways you can show HTML page coming from an API call?您可以通过哪些不同方式显示来自 API 调用的 HTML 页面？
【发布时间】：2019-10-16 03:57:15
【问题描述】：

我收到一个 html 页面作为 API 调用的响应。我想把它展示给前端。我能做的最好的方法是什么？

我使用httpClient 请求获取数据并使用iframe 显示它，它对我来说很好，但我想在全新的 HTML 页面中显示数据。

  @ViewChild("iframe", { static: true }) iframe: ElementRef;
  //getting the iframe references from the html

  //From service
  getDataSummary() {
  return this._http.get(this.dataSummaryUrl, { responseType: "text" });
  }



  //Component ts file code
  onClickDataSummary() {
  this.fileUploadService.getDataSummary().subscribe(
    data => {
      let doc =
        this.iframe.nativeElement.contentDocument ||
        this.iframe.nativeElement.contentWindow;
      doc.open();
      doc.write(data);
      doc.close();
      this.dataSummaryLoading = false;
      this.dataSummaryDiv = true;
      this.showLoader = false;
    },
    error => {
      alert(` ${error.statusText} occurred!! Please check server side`);
      this.dataSummaryLoading = false;
      this.dataSummaryDiv = true;
      this.showLoader = false;
    }
  );
}
}

HTML 代码应该是这样的 -

 <mat-tab label="Data Summary">
  <mat-toolbar color="">
    <span>Data Summary</span>
    <span class="example-fill-remaining-space"></span>
    <span
      ><button
        mat-raised-button
        class=" mb-2"
        color="primary"
        (click)="onClickDataSummary()"
        *ngIf="!dataSummaryLoading"
      >
        Data Summary
      </button></span
    >
    <button
      class=" mb-2"
      mat-raised-button
      color="primary"
      *ngIf="dataSummaryLoading"
    >
      <span class="spinner-border spinner-border-sm "></span>
      Loading
    </button>
  </mat-toolbar>
  <div
    class="example-container mat-elevation-z8"
    [class.hide]="!dataSummaryDiv"
  >
    <iframe width="100%" height="100%" #iframe></iframe>
  </div>
  <div class="text-center m-5" [class.hide]="!showLoader">
    <app-loader></app-loader>
  </div>
</mat-tab>

预期的输出是单击按钮时获取 html 页面。喜欢这里点击Data Summary 而不是iFrame。

提前感谢您在这里的时间。

【问题讨论】：

是在新窗口打开html页面还是在同一页面显示
你可以创建一个新的 Angular 组件，使用 html 页面作为模板。然后，您可以使用 Angular 路由将 API 调用路由到新组件。见此链接：angular.io/guide/router
@jitender 在新窗口和同一页面上都有哪些选项？
@NadirLatif - 我没有明白你的意思。如何存储来自 api 调用的 html 页面并存储到组件模板中？
这可能有助于stackoverflow.com/a/46660076/5621827 在同一窗口中显示

标签： javascript html angular

【解决方案1】：

改变

let doc =
    this.iframe.nativeElement.contentDocument ||
    this.iframe.nativeElement.contentWindow;

到

let newWindow = window.open();

let doc = newWindow.document;

【讨论】：

这很有帮助。谢谢。如果您有任何其他可能的方式，请分享其他可能的方式。

【解决方案2】：

在大多数情况下，HTML 响应应该具有相同的页眉和页脚，我们只需 [innerHTML] 即可。但是如果你想将它作为一个单独的页面打开，那么你必须使用原生 javascript。

const html = '<html><head></head><body>Hello</body></html>';
const uri = "data:text/html," + encodeURIComponent(html);
const newWindow = window.open(uri);

您可以根据自己的喜好自定义 window.open。

如果您想对此类响应使用不同的布局，那么您可以检查一下。

multiple layouts for different pages

【讨论】：