使用 http.get() 调用在 iframe 中显示报告答案

【问题标题】：Show report in iframe with http.get() call使用 http.get() 调用在 iframe 中显示报告
【发布时间】：2023-03-10 10:21:01
【问题描述】：

我正在尝试使用 http.get() 调用加载报告，并使用 angularJS 2.0 在 iframe 中显示它。

我的 HTML 如下所示：

<div class="report-viewer">
    <button (click)="loadReport()">Call API!</button>
    <iframe src="report"></iframe>
</div>

点击按钮调用我的控制器中的一个函数，我用http.get()调用API

我的控制器如下所示：

import { Component, OnInit } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Component({
    selector: 'app-report-viewer',
    templateUrl: './report-viewer.component.html',
    styleUrls: ['./report-viewer.component.scss']
})
export class ReportViewerComponent implements OnInit {

    report: Observable<any>;
    reportUrl: "http://localhost:47503/reports/html";

    constructor(private http: Http) { }

    ngOnInit() {
    }

    loadReport() {
        this.http.get(this.reportUrl).map(repsonse => this.report);
    }
}

我尝试调用 API 并将我的响应放入我的变量 report。之后，在我的 HTML 中的 iframe 上，我尝试显示如下响应：<iframe src="report"></iframe>

我遇到的问题是，当我单击 button 时，我的 API 调用不起作用。控制台没有错误，没有流量。我还在后端设置了一个断点，但它没有通过。它还复制了我的按钮和 iframe（看截图）。当我像这样更改它时，它会在我的iframe:<iframe src="http://localhost:47503/reports/html"></iframe> 中显示我的报告的 HTML。因此，当我将链接直接放在iframe 的src 中时，我得到了一些数据（html、css）以及我在后端工作的断点（看截图）。那么有什么问题或有什么区别？有什么想法吗？

从控制器调用函数：

直接在iframe的src中调用链接：

【问题讨论】：

你是否调用了 loadReport 函数？
也不要使用src，而是使用srcdoc属性来显示文档。其他方法是使用 iframe..document.write(your response) 在 iframe 文档中写入响应
@gusaindpk 我在其中放了一个 console.log() - 它在控制台中显示了正确的输出，因此该功能可以正常工作。
如果您在 js 代码中获得响应，您可以使用 iframe..document.write(your response) 将响应写入 iframe。而不是在 html vai 角度绑定中设置它。如果有帮助，请告诉我
你能看一下例子devdocs.io/angular~2_typescript/api/http/index/http-class。我认为我们必须使用 .subscribe 将响应附加到报告对象。 devdocs.io/angular~2_typescript/api/http/index/http-class

标签： javascript html angularjs iframe

【解决方案1】：

试试这个

import { Component, OnInit } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Component({
    selector: 'app-report-viewer',
    templateUrl: './report-viewer.component.html',
    styleUrls: ['./report-viewer.component.scss']
})
export class ReportViewerComponent implements OnInit {

    report: Observable<any>;
    reportUrl: "http://localhost:47503/reports/html";

    constructor(private http: Http) { }

    ngOnInit() {
    }

    loadReport() {
        this.report = this.http.get(this.reportUrl)
    }
}

【讨论】：