[Vuejs]-How to hide title and date on print screen in javascript

by

1👍

✅

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();
👤Andrew Lohr

Leave a comment