0

我的应用程序前端使用 Angular。

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

有没有什么方法可以在角度文件中使用，将外部 CSS 文件与我已成功传递到 iframe 的 html 集成。

我目前正在使用

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

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

我也使用 DOM sanitizer 来清理 html 字符串。我可以用类似的方法带上 Styles 字符串。但是请让我知道是否有任何方法可以将这两个字符串集成到 iframe 中。

iframe 以外或类似的任何解决方案也可以。我需要一个很好的文档预览

谢谢你。

4

1 回答 1

0

您可以domsanitizer用于外部资源。

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>

如果你想展示html你iframe可以试试这个

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

里面bypassSecurityTrustHtml会有帮助

this.mypreview= this.sanitizer.bypassSecurityTrustHtml(
      '<iframe width="100%" height="800" src="https://primefaces.org/primeng/#/"></iframe>',
    );
于 2021-05-08T08:19:42.000 回答