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

crystalthinker · Accepted Answer · 2018-01-31 07:54:36Z

3

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

answered Jan 31, 2018 at 7:54

crystalthinker

1,19216 silver badges32 bronze badges

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

1 Comment

noamyg Over a year ago

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.

EvanM · Accepted Answer · 2017-09-13 11:44:29Z

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, 2017 at 11:44

EvanM

6871 gold badge4 silver badges12 bronze badges

5 Comments

Pavan Elthepu Over a year ago

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.

EvanM Over a year ago

Also, you could create a symlink from the asset directory to your CSS source. That'll solve synchronization problems.

Pavan Elthepu Over a year ago

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?

EvanM Over a year ago

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 Over a year ago

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.

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related