css paging printing example code sharing

This article mainly introduces the relevant information about the sample code for css paging printing. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

I haven’t written an article for a long time. I recently worked on an employee onboarding project. The system has a functional requirement for batch printing of personal information. Because I have never been exposed to printing functions before, I checked online and found that jquery has an API for printing functions (PrintArea). If you are interested in this API, you can check the relevant knowledge by yourself. I will not introduce it in detail here. . At that time, I decided to use this API to implement the printing function. When I used this API to implement the function, I found that I could indeed call the browser's printing function, but the printed content was blank without any information. Then I checked online and went to the jquery official website to check out the API. Most of them said that it supported printing before, but now I need to add a code to the source code. I gave up after working on it for a long time without understanding it, but I think It should be feasible, but I'm not very good at it. Friends who are interested can give it a try, and they should gain a lot. If this plan doesn't work, we can only continue to explore other options.

At this anxious moment, I discovered the window.print() method. It turns out that you can directly use the window method to realize the printing function. Just when I was ecstatic, a dark cloud quietly came over my head, and my life suddenly turned gloomy. Although the printing function can be implemented, when the web page is printed in batches, the content will be tightly packed together. Hey, when I thought this problem could be solved perfectly, who would have thought that life would always be so unsatisfactory. There is no other way but to continue to study how to implement the paging printing function. The first thing that came to mind at that time was to add a certain height to the last container to be paged, so that it fills the height of the A4 paper, and then the next content will automatically go to the next page. The imagination is beautiful, but the reality is cruel and unsatisfactory. Later, I asked a colleague and said that I could try the css print attribute to implement forced paging. I checked the css print attribute at that time. When I saw the document description, I saw the dawn of hope. When I used the print attribute according to the document description to force paging. But it didn't work out as expected. I was already very depressed at the time, and I couldn’t figure out why it didn’t work, but I still didn’t want to give up. Since the official documents said it could be achieved, and there were a lot of online explanations of how it could be achieved, why couldn’t I achieve it? Unwilling to give in, I finally discovered the problem that failed to be implemented. My situation at the time was like this. There were two p containers in the outer layer. The content to be printed was the html that I spliced, and then appended to the outer container to print. At this time, the css print attribute has no effect. Therefore, when you want to use the css print attribute to implement the forced paging function in the future, you must remember that there is only one container outside the printed content.

css print attributes are as follows:

Paging example (borrowed from online examples here):

<p><input type="button" value="打印" onclick="Print()" /></p>  
<p id="page1">  
        <table width="100%"  border="0" cellpadding="0" cellspacing="0"  style="page-break-after:always" >  
        <tr><td>第一页打印内容</td></tr>  
        </table>  
</p>  
<p id="page2">  
        <table width="100%"  border="0" cellpadding="0" cellspacing="0" id="content" >  
        <tr><td>第二页打印内容</td></tr>  
        </table>  
</p>  
</body>  
</html>

Related recommendations:

Detailed explanation of page-break-before and page-break-after in css to realize paging printing

Utilization Detailed explanation of examples of implementing paging printing function in html

js control paging printing, print paging example_javascript skills

The above is the detailed content of css paging printing example code sharing. For more information, please follow other related articles on the PHP Chinese website!