How to print a page in Angular 4 with TS

Question

I have an web app while in some pages I need to make a printer to print the page but I have a side bar and the rest ist the page for a component, how it is possible to not print the sidebar only this component, I have used in TS this code.

print() {
window.print();
}

Html code starts from this one.

div class="container">
//Here I have all the HTML source

</div>

Possible duplicate of [How do I hide an element when printing a web page?](https://stackoverflow.com/questions/355313/how-do-i-hide-an-element-when-printing-a-web-page) — baao, May 28 '18 at 13:49
@baao Are you kidding with me, if you think it is duplicate show me here the answer. — TheCoderGuy, May 28 '18 at 13:50

score 27 · Accepted Answer · answered May 28 '18 at 13:50

27

first of all assign an id to that component, then:

const printContent = document.getElementById("componentID");
const WindowPrt = window.open('', '', 'left=0,top=0,width=900,height=900,toolbar=0,scrollbars=0,status=0');
WindowPrt.document.write(printContent.innerHTML);
WindowPrt.document.close();
WindowPrt.focus();
WindowPrt.print();
WindowPrt.close();

answered May 28 '18 at 13:50

Mohd Tabish Baig

442
4
8

This is working but all the style its gone, how it is possible to add the styles and other things ? – TheCoderGuy May 28 '18 at 14:02
include those styles in that component tag,using style attribute – Mohd Tabish Baig May 28 '18 at 14:03
You think in this WindowPrt ? – TheCoderGuy May 28 '18 at 14:04
no in your html, the component that you want to print – Mohd Tabish Baig May 28 '18 at 14:05
I am not understanding this can you show me a little example and I am facing with a problem when I click to print and print or cance then nothing works I need to reload page than to works what can you suggest me for this ? – TheCoderGuy May 28 '18 at 14:08
4

for css you make an external css file, and before `WindowPrt.document.write(printContent.innerHTML);` insert this : `WindowPrt.document.write('');` – Mohd Tabish Baig May 28 '18 at 14:10
1

i implemented it from [this](https://jsfiddle.net/jdavidzapatab/6sctvg2z/) , you can also learn – Mohd Tabish Baig May 28 '18 at 14:12
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/171924/discussion-between-mohd-tabish-baig-and-zhuniqia). – Mohd Tabish Baig May 28 '18 at 14:13
How can I print the data in a single page – Alekya Aug 21 '19 at 12:04
@Mohd Tabish Baig-sir i received WindowPrt null – Kapil Soni Oct 21 '21 at 07:07

score 15 · Answer 2 · answered May 28 '18 at 13:50

15

You can try this solution.

html file

<div class="container" id="component1">
//Here I have all the HTML source

</div>

<div class="container" id="component2">
//Here I have all the HTML source

</div>

<button (click)="printComponent('component1')">Print</button>

ts file

printComponent(cmpName) {
     let printContents = document.getElementById(cmpName).innerHTML;
     let originalContents = document.body.innerHTML;

     document.body.innerHTML = printContents;

     window.print();

     document.body.innerHTML = originalContents;
}

answered May 28 '18 at 13:50

Krishna Rathore

9,389
5
24
48

2

Your code it is working to print, but when I try to print or cancel then the whole page it is not working ? – TheCoderGuy May 28 '18 at 14:11
Yeah, I have the same problem – Alekya Aug 20 '19 at 14:09
1

The print function only works once, when I try to click again the click function is not triggered. – Philip Mutua Oct 16 '19 at 17:48
I have the same problem, and when i console.log it throws this error : core.js:7187 ERROR TypeError: Cannot read property 'postMessage' of null – Emmon Nov 15 '19 at 06:44
2

Not perfect but after this code I call: window.location.reload(); and the page is at least alive again – Kibi Jun 09 '20 at 14:11
Hello, the code creates the page but the text inside the form is empty and also the whole page goes blank, has anyone experience and sort this issues? – Julio Perez Mar 10 '21 at 08:36

score 11 · Answer 3 · answered Jan 01 '20 at 02:43

11

In the side bar component scss file or css file...you can hide it when you are printing using media queries:

@media print {
  :host {
    display: none;
  }
}

answered Jan 01 '20 at 02:43

Ajay Reddy

1,475
1
16
20

score 0 · Answer 4 · answered Aug 21 '22 at 07:41

There is no Direct window print function in typescript We need to create a new function with print() and inside that print function write javascript print function as shown below

<div click("print()")class="container">
</div>

in Ts File

print() {
window.print();
}

How to print a page in Angular 4 with TS

4 Answers4