Javascript 显示来自API调用的HTML页面的不同方式有哪些？_Javascript_Html_Angular

Javascript 显示来自API调用的HTML页面的不同方式有哪些？

javascript html angular

Javascript 显示来自API调用的HTML页面的不同方式有哪些？,javascript,html,angular,Javascript,Html,Angular,我得到一个html页面作为API调用的响应。我想把它展示给前端。我能做的最好的方式是什么我使用了httpClientrequest来获取数据，并使用iframe来显示数据，它对我来说很好，但我想在整个新的HTML页面中显示数据 @ViewChild("iframe", { static: true }) iframe: ElementRef; //getting the iframe references from the html //From service getDat

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

我使用了

httpClient

request来获取数据，并使用

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页面。点击

数据摘要

不在

iFrame

中，如图所示

感谢您在这里抽出时间。

更改

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

到

在大多数情况下，HTML响应应该具有相同的页眉和页脚，我们只需[innerHTML]它。但是，如果您想将其作为单独的页面打开，则必须使用本机javascript

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

consthtml='Hello'；
const uri=“data:text/html，”+encodeURIComponent（html）；
const newWindow=window.open（uri）；

您可以自定义窗口。根据您的首选项打开

如果你想对这种类型的回答使用不同的布局，那么你可以检查一下

您想在新窗口中打开html页面还是想在同一页面上显示？您可以创建一个新的角度组件，将html页面用作模板。然后可以使用角度路由将API调用路由到新组件。查看此链接：@jitender在新窗口和同一页面上的选项是什么？@NadirLatif-我不明白你的意思。如何将来自api调用的html页面存储到组件模板中？这可能有助于在同一窗口中显示这非常有用。谢谢如果你有其他可能的方法，请分享。

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