Angular4: How to include test.component.css in printing

Question

I've one component with a print button. But, when I'm printing the css from test.component.css is not including. Can anyone please help me with this issue? Note: I've to keep css only in test.component.css. I don't want to use inline styling.

test.component.html:

 <div class='container'>
    <div>
        <button (click)='printContent()' class="btn btn-default">
            <span class="glyphicon glyphicon-print"></span> Print
        </button>
    </div>
    <div id='content'>Hello World</div>
</div>

test.component.ts:

    import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-test',
    templateUrl: './test.component.html',
    styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {

    constructor() { }

    ngOnInit() {
    }

    printContent() {
        let popupWin = window.open('', '_blank', 'width=1080,height=595');
        let printContents = document.getElementById("content").innerHTML;
        popupWin.document
            .write('<html><head>' +
            '<link rel="stylesheet" type="text/css" href="/test.component.css"/>' +
            '</head><body onload="window.print();">'
            + printContents + '</body></html>');

        popupWin.document.close();
    }

}

test.component.css:

#content{
    background-color: cyan;
    font-weight: bold;
}

Here is the output in browser:

Here is the printing output

score 3 · Answer 1 · answered Jan 31 '18 at 07:54

You Can get your current styles from the Head tag and append to your print html tag as below using jquery($('head').clone().html()). Also if you are using external library like bootstrap in you index.html, Add print also as a media as below in your index.html:-

<link rel="stylesheet" type="text/css" media="screen,print" href="assets/css/bootstrap.min.css">

//Code for print

printContent() {
    let popupWin = window.open('', '_blank', 'width=1080,height=595');
    let printContents = document.getElementById("content").innerHTML;
    popupWin.document
        .write(`<html>
         ${$('head').clone().html()}
        <body onload="window.print();">${printContents}</body></html>`);

    popupWin.document.close();
}

Great answer, helped me a lot, but assumes you have jQuery included. I think `${document.querySelector('head').innerHTML}` would be a better way to go. — noamyg, Jan 29 '19 at 14:05

score 0 · Answer 2 · answered Sep 13 '17 at 11:44

0

You're probably using web pack to run your web app? If so, test.component.css doesn't exist at runtime - it's bundled into other files.

Have you considered using a media query in your main CSS file? https://www.w3schools.com/css/css3_mediaqueries.asp

If you like your current approach, you probably need to serve the CSS as as static asset in your project: Whats the default path for static files in Angular2?

answered Sep 13 '17 at 11:44

EvanM

667
1
4
12

**You're probably using web pack to run your web app? If so, test.component.css doesn't exist at runtime - it's bundled into other files.** Yes, I'm using ng serve command using angular-cli. Writing media query doesn't solve my problem. Can't go with placing my css files in assets directory as it'll be duplicate. – Pavan Elthepu Sep 13 '17 at 11:52
Also, you could create a symlink from the asset directory to your CSS source. That'll solve synchronization problems. – EvanM Sep 13 '17 at 11:58
media query doesn't work as it is not identifying test.component.css. Can you please guide me how to use symlink both in component, and in printing? – Pavan Elthepu Sep 13 '17 at 12:29
So the point of the media query would be to set specific CSS for printing. So, for example, you could set all of your other stuff not to render when printing (in your other CSS files), and then you could just call window.print() – EvanM Sep 13 '17 at 13:24
For symlink'ing, if you're using Linux or a Mac, you'd do something like `ln -s src/app/test.component.css assets/test.component.css`, and then there will be a file in `assets/` that is the same file as in `src/app/test.component.css`. – EvanM Sep 13 '17 at 13:26

Angular4: How to include test.component.css in printing

2 Answers2