Print Webpage as it appears using HTML

Ranjit T 0
Viewed 39

I would like to create a button using only HTML, to print the web page just as the way it appears on the browser.

But this basic code prints even the hidden blocks.

<a class="print-page" href="javascript:window.print()"><i class="fas fa-print"></i> Print This Page</a>

Could someone help me please!

Here The button generates this pdf with above code.

enter image description here

but the problem, it takes the whole body of the page, which has blocks hidden for computers but visible for mobile phones. It is printing all the body including hidden blocks. like in this below screen shot, this are normally hidden blocks for computer browsers. enter image description here

wordpress css html
1 Answers

I solve this problem by including some @media print rules in a stylesheet.

.print-only{
 display: none;
}
.screen-only{
 display:block;
}
@media print {
 .print-only{
  display: block;
 }
 .screen-only{
  display:none;
 }

 .something1,
 .something2 {
  display:none;
 }
}
James Valeii0
Related