All geek questions in one place

How to create a print view with A4 page size and fix the border on the page


I have a big html gen page from php
and want to create print mode using html and css
I use print.css style to create this page
that is the question:

  • how to create an A4 page
  • how to create a border for all pages and for each page
  • How to create a patch size in any browser?
  • is there a php class to create this?

thank you for your responses:)

+4
source share
2 answers

it can help u out

<div id="printpage"> //blah blah </div> <a href="#" onclick="printdiv()">Print</a> function printdiv() { //your print div data //alert(document.getElementById("printpage").innerHTML); var newstr=document.getElementById("printpage").innerHTML; var header='<header><div align="center"><h3 style="color:#EB5005"> Your HEader </h3></div><br></header><hr><br>' var footer ="Your Footer"; //You can set height width over here var popupWin = window.open('', '_blank', 'width=1100,height=600'); popupWin.document.open(); popupWin.document.write('<html> <body onload="window.print()">'+ newstr + '</html>' + footer); popupWin.document.close(); return false; }
0
source

At the heart of:

in CSS print styles add a media request for printing and use the @page rule

 @media print{ @page { size: auto; /* auto is the initial value */ size: A4 portrait; margin: 0; /* this affects the margin in the printer settings */ border: 1px solid red; /* set a border for all printed pages */ } }

Do you have a php class to create this?

I do not think you really need additional libraries for this. But you might need browser compatibility ... not?

EDIT

To support IE10 +, you can also add this rule:

 /* IE10+ CSS print styles */ @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { /* IE10+ CSS print styles go here */ @page { size: auto; /* auto is the initial value */ size: A4 portrait; margin: 0; /* this affects the margin in the printer settings */ border: 1px solid red; /* set a border for all printed pages */ } }

You should be able to control only CSS in order to print website content.

0
source

Source: https://habr.com/ru/post/1501786/

More articles:


All Articles