CODEWITHSUNDEEP
javascriptcssvue.js
Anant Vikram Singh
Anant Vikram Singh

Reputation: 558

how to hide title and date on print screen in javascript

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

enter image description here

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

Upvotes: 0

Views: 1158

Answers (1)

Andrew L
Andrew L

Reputation: 5496

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

Upvotes: 1

Related Questions