Angular - print function does not load css

Question

I'm trying to implement a print funcion in my Angular application. This is what I've done so far:

typescript

print() {

    let printContents, popupWin;
    printContents = document.getElementById('print-section').innerHTML;
    popupWin = window.open();
    popupWin.document.open();
    popupWin.document.write(`
          <html>
            <head>
              <link rel="stylesheet" type="text/css" href="print.component.css">
            </head>
            <body onload="window.print();window.close()">${printContents}</body>
          </html>`
    );
    popupWin.document.close();
  }

html

<div id="print-section" hidden>
  <div class="red">Hello</div>
</div>

css

.red{
    color:red;
}

The print thing works, but it doesn't load the css. If I add a <style> tag inside the write() function it works. Why the css is not loaded? The .css file and the .ts file are in the same folder.

EDIT: thanks to @match suggestion I realized that the browser looks for the css file inside the current path, i.e. www.myurl.it/currentpage/print.component.css. Instead I want the browser looking for the file inside the sources folder, i.e. coponents/myComponent. Is there a way to do that?

What does the network section of your browser debugger show in relation to that file. No access? 404? — match
– match, Commented Feb 19, 2018 at 10:29
You're right, I didn't think to check. It shows 404. The path is wrong... — esseara
– esseara, Commented Feb 19, 2018 at 10:41
Does your component has relative path to its css file?. It should be something like styleUrls: ['./print.component.css']. Assuming that your .ts and .css are in same folder. — Amit Chigadani
– Amit Chigadani, Commented Feb 19, 2018 at 11:55

Rakesh A R · Accepted Answer · 2018-02-19 10:48:01Z

2

Use

@media print {
      .red{
    color:red;
  }
}

answered Feb 19, 2018 at 10:48

Rakesh A R

2061 gold badge3 silver badges17 bronze badges

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

2 Comments

Yvonne Aburrow Over a year ago

yes I was going to say, use Media Queries. ( @Rakesh - it helps if you tell the questioner what your solution is using, so they can google for more information)

esseara Over a year ago

Thanks. If you meant to substitute my actual css with the media query it doesn't work, because the css is not loaded correctly.

Collectives™ on Stack Overflow

Angular - print function does not load css

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related