How to hide or modify header from 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.

Which of those solutions have you tried? The CSS should work — user184994, Aug 31 '18 at 07:05
I treid: media print { page { margin: 0; } body { margin: 1.6cm; } } But I have .scss in project. This is important? — Iggsy, Aug 31 '18 at 07:08
I believe that should be a browser setting. You need to disable it from there. JS cannot modify the configuration generically. — wannadream, Aug 31 '18 at 07:12
No, SCSS should be fine. Bear in mind it should be `@media print` — user184994, Aug 31 '18 at 07:13
@wannadream I found this options, but i can't use it. I need footer and remove header. The option is to hide both. — Iggsy, Aug 31 '18 at 07:19

score 0 · Answer 1 · answered Aug 31 '18 at 07:20

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.

How to hide or modify header from window.print()?

1 Answers1