如何从window.print（）隐藏或修改标题？

Question

I created a view which look like a PDF document. Now I want to print it using window.print() , but when I run this code it generates header and footer.

I change the footer using this code:

let footer = "Nr"+this.contractForm.contract_number+this.datePipe.transform(this.contractForm.date, 'd.MM.yyyy');

window.history.pushState("object or string", "Title", footer.replace("http://", ""));

I want to remove header (it generates date and (I think) title).

I tried to use remove header and footer from window print

And many similar solutions.

Summarizing, I want to remove header from generated file.

Answer 1

You can use CSS rules for this (or SCSS, if you wish).

Here is an example where I hide the .hideme class. You can click the print button to see it in action.

 .hideme { border: 5px solid black; height: 100px; } .showme { border: 5px dotted black; height: 100px; } @media print { .hideme { display: none; } } 

 <div class="hideme"> Will be hidden </div> <div class="showme"> Will be shown </div> <button onclick="print()"> Print </button> 

I've also created an example in StackBlitz using SCSS and Angular if you want to see that in action.