How to display a html document with external stylesheet in iframe? Angular Html CSS

Question

My application front end uses Angular.

I am trying to display an html document (in my case a preview of a document generated using user input data). I can successfully display the Html and inline CSS within the document to an iframe. But I cannot find a method to include the external style sheet to the same iframe.

Is there any method which I can use in the angular file to integrate the external CSS file with the html I have successfully passed into the iframe.

I am currently using

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

"mypreviw" is the html string which I brought from the backend

I used DOM sanitizer to sanitize the html string as well. I can bring the Styles string in similar method. But Please let me know if there is any method to integrate these 2 strings to the iframe.

Any solution other than or similar to iframe would be also fine. I need a good preview of my doc that's it

Thank You.

piedpiper · Accepted Answer · 2021-05-09 07:30:43Z

0

You can use domsanitizer for external sources.

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);
  }

}

after the dom sanitization you can use that variable in iframe

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

In case you want to show html in iframe you can try this

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

inside that bypassSecurityTrustHtml will help

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

edited May 9, 2021 at 7:30

answered May 8, 2021 at 8:19

piedpiper

5246 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Dhaneja Over a year ago

I am bringing a string to the front end not an URL. I need to combine both Html and CSS strings together. Not display just one. Is there any chance of doing that? Thanks for your comment. @piedpiper

piedpiper Over a year ago

can you share the value of mypreview.then it would be easier tounderstand.

Dhaneja Over a year ago

mypreview contains a string of html code. Something like <!DOCTYPE html><html><body>My document in here</body></html>. Its pretty long that is why I mentioned this sample. It also consists with inline CSS. Now what I want to do is to add an external CSS string(similar to the html string "mypreview") to the iframe or whatever possible method. Thanks for your answer

piedpiper Over a year ago

In that case i have updated the answer. maybe you can try that.

Collectives™ on Stack Overflow

How to display a html document with external stylesheet in iframe? Angular Html CSS

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related