如何在iframe中显示带有外部样式表的html文档？角度Html CSS

我的应用程序前端使用Angular

我试图显示一个html文档（在我的例子中是使用用户输入数据生成的文档的预览）。我可以成功地将文档中的Html和内联CSS显示到iframe中。但是我找不到将外部样式表包含到同一iframe的方法

在angular文件中是否有任何方法可用于将外部CSS文件与我已成功传递到iframe中的html集成

我目前正在使用

<iframe [srcdoc] = "mypreview" ></iframe>

“mypreviw”是我从后端带来的html字符串

我还使用DOM sanitizer来清理html字符串。我可以用类似的方法来创建样式字符串。但是，请告诉我是否有任何方法将这两个字符串集成到iframe

除iframe之外或类似于iframe的任何解决方案也可以。我需要好好预览一下我的文件就这样

---

谢谢。

您可以使用

DOMSanizer

作为外部来源

import { Component, OnInit, Input } from '@angular/core';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';

@Component({
  selector: 'yourapp',
  templateUrl: './yourapp.component.html',
  styleUrls: ['./yourapp.component.scss']
})

export class YourApp implements OnInit {
  @Input()
  url: string = "https://www.example.com";
  mypreview: SafeResourceUrl;

  constructor(public sanitizer: DomSanitizer) { }

  ngOnInit() {
    this.mypreview= this.sanitizer.bypassSecurityTrustResourceUrl(this.url);
  }

}

在dom清理之后，您可以在

iframe

<iframe width="100%" height="100%" frameBorder="0" [src]="mypreview"></iframe>

在这里面，

绕过securitytrusthtml

会有所帮助

this.mypreview=this.sanitizer.bypassSecurityTrustHtml(
'',
);

我将字符串带到前端，而不是URL。我需要将Html和CSS字符串组合在一起。不是只显示一个。有可能这样做吗？谢谢你的评论@PiedPiper您可以共享

mypreview

的值。这样会更容易理解。mypreview包含一个html代码字符串。这里有我的文件。它相当长，这就是为什么我提到这个样本。它还包含内联CSS。现在我想做的是向iframe或任何可能的方法添加一个外部CSS字符串（类似于html字符串“mypreview”）。谢谢你的回答。既然如此，我已经更新了答案。也许你可以试试。

<div [innerHTML]="mypreview"></div>

this.mypreview= this.sanitizer.bypassSecurityTrustHtml(
      '<iframe width="100%" height="800" src="https://primefaces.org/primeng/#/"></iframe>',
    );