css paging printing

This time I will bring you CSS paging printing, what are the precautions for css paging printing, the following is a practical case, let's take a look.

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 the printing function before, I checked online and found that jquery has an API (PrintArea) for the printing function. If you are interested in this API, you can check the relevant knowledge by yourself. I won't go into details about this. 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 and saw the glimmer of hope when I saw Documentation Description. I used it according to the documentation. When the print attribute forces paging, the result fails to meet expectations. 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 the printed content in the outer container. 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 outer container for 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>

I believe you have read the case in this article After mastering the method, please pay attention to other related articles on the php Chinese website for more exciting content!

Recommended reading:

Detailed explanation of the use of CSS3 mixed mode

APP listening return event processing in H5

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