how to hide title and date on print screen in javascript

Question

i am using window.print method to print given below screen. Now i want to hide date(top left of image and title(not big heading) which i have blurred for a reason).

I have read articles where it says @pages { margin: 0 } but i am not sure how to apply that to window.print();

I have tried using setAttribute() but its not helping or maybe i did some mistake

      const element = document.getElementById("qr-code").innerHTML;
      var printWindow = window.open('', '', 'height=800,width=800');
      printWindow.document.write(element);
      printWindow.document.close();
      const title = printWindow.document.title = "some title here";
      const heading = printWindow.document.createElement('h1');
      const text = printWindow.document.createTextNode(title);
      heading.appendChild(text);
      heading.setAttribute('style', 'order: -1; margin-bottom: 50px;');
      printWindow.document.body.appendChild(heading);
      printWindow.document.body.setAttribute('style', 'display: grid; width: 100%; justify-items: center; margin: 0;');
      printWindow.print();

can you show the code that's relevant here? We won't able able to really help unless we see that. You can change any info you don't us to see before posting it. — Andrew Lohr, Oct 21 '19 at 15:06

score 1 · Accepted Answer · answered Oct 21 '19 at 15:29

Taking the info from https://stackoverflow.com/a/2573612/1309377 you can add this css

@page { size: auto;  margin: 0mm; }

to the window, which will hide the date and title (since they are in the margin). To add this css you can create a style element and append it to the window, just like you already do with the heading.

const element = document.getElementById("qr-code").innerHTML;
var printWindow = window.open('', '', 'height=800,width=800');
printWindow.document.write(element);
printWindow.document.close();
const title = printWindow.document.title = "some title here";
const heading = printWindow.document.createElement('h1');
const text = printWindow.document.createTextNode(title);
heading.appendChild(text);

// Here is the style you can add to hide the date and title in the print screen.
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '@page { size: auto;  margin: 0mm; }';

heading.setAttribute('style', 'order: -1; margin-bottom: 50px;');
printWindow.document.body.appendChild(heading);

// Append the style to the window's body
printWindow.document.body.appendChild(style);

printWindow.document.body.setAttribute('style', 'display: grid; width: 100%; justify-items: center; margin: 0;');
printWindow.print();

thanks buddy it worked fine, i have searched for many articles and finally you helped me — Anant Vikram Singh, Oct 22 '19 at 04:24

how to hide title and date on print screen in javascript

1 Answers1