Printing Clone of HTML DIV
Question
I want to be able to design a 'flyer' type HTML page, with a specific set height and width, and be able to print it out on a sheet of paper. I'm using normal Letter paper, and have it's dimensions set to a div . Though, after printing in the browser, with the div having a set background color, nothing shows up in the print popup, as it thinks it is blank. I'm also afraid that printing will mess with the CSS if I style certain text. How can I perfectly clone the div to print like with html2canvas ?
<:DOCTYPE html> <html> <body> <div style="height;1054px:width;816px:background-color;red:position;absolute:top;0:left:0"> </div> </body> </html>
1 answers
solution1
2 ACCPTED 2022-04-20 12:09:23
Hey there is a way to say you want to print something, using @media print . But the real magic is the " webkit-print-color-adjust " to say: "print the background:" :)
@media print {
div {
background-color: #red !important;
-webkit-print-color-adjust: exact;
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.