CSS pagination Print instance code share

This article mainly introduces the CSS page printing of the sample code of the relevant information, small series feel very good, and now share to everyone, but also for everyone to do a reference. Follow the small series together to see it, hope to help everyone.

Long time no article, and recently did a staff entry project, the system has a bulk printing of personal information functional requirements. Because before also did not touch the print this aspect function, on the internet looked under, found jquery has a printing function API (PrintArea), about this API everyone is interested to see the relevant knowledge, I do not introduce in detail. At that time I took the use of this API to achieve the printing function, when I used this API to implement the function, I found that the browser can actually invoke the printing function, but the printed content is blank, there is no information. Then on the Internet to check the next, went to the jquery official website to view the API, most of which is said to support the printing, and now need to add a code on the source, then a long time did not understand to give up, but I think it should be feasible, but I did not get home, interested in the small partner can go to try , there should be a great harvest. This plan is not going to work, it is only to continue to explore other options.

In this relatively anxious moment, found the Window.print () method, the original can directly use the window method can be used to achieve the printing function. When I was ecstatic, a cloud of clouds had crept into my head, and the moment of my life was grey. While printing can be achieved, the content is tightly lined up when the page is printed in bulk. Well, I thought it would be a perfect solution to the problem, who thought life was always so unsatisfactory. No way, can only continue to study how to achieve the paging function. At the time, the first thought was to add a certain height to each of the last containers to be paged, so that it would fill the A4 paper height, then the next content would be automatically to the next page. Imagination is beautiful, but reality is cruel and unsatisfactory. Later asked a colleague, said that you can try the CSS print property to enforce paging, then looked at the CSS print properties, see the document description of the time has seen the hope of the dawn, when I follow the document description used by the Print property to force pagination when the result is not fulfilled. At that time was very depressed, how can not think why is not, but still do not want to give up, since the official document said can be achieved, the online is a large can be achieved explanation, why I did not achieve it. Not reconciled, until finally found the failure to achieve the problem, I was the case, the outer layer has two P container, the content to be printed is my stitching HTML, and then append the outer container, the CSS print property will not play any role. So when you want to use the CSS print property to enforce paging, be sure to remember that there is only one container in the outer layer of the printed content.

The CSS print properties are as follows:

Pagination Example (here's the online example):

<p><input type= "button" value= "Printing" onclick= "print ()"/></p>  <p id= "Page1" >          < Table width= "100%"  border= "0" cellpadding= "0" cellspacing= "0"  style= "Page-break-after:always" >          <tr><td> first page print content </td></tr>          </table>  </p>  <p id= "Page2" >          <table width= "100%"  border= "0" cellpadding= "0" cellspacing= "0" id= "content" >          <tr><td > second page print content </td></tr>          </table>  </p>  </body>