search

Home >Web Front-end >JS Tutorial >jQuery prints the specified area of ​​Html page and automatically paginates_jquery

jQuery prints the specified area of ​​Html page and automatically paginates_jquery

WBOY
WBOYOriginal
2016-05-16 16:42:281561browse

In a recent project, you need to print HTML pages. You need to specify an area for printing. Use the jquery.PrintArea.js plug-in

Usage: 

$("div#printmain").printArea();

But the content behind the DIV will still be printed. You can use CSS to control printing paging 

<div style="page-break-after: always;"></div>

Sometimes the page will be printed continuously even though CSS is used to control paging. Here you can use the attribute parameters in the PrintArea plug-in.

PrintArea partial source code: 

var modes = { iframe : "iframe", popup : "popup" }; 
var defaults = { mode : modes.iframe, 
popHt : 800, 
popWd : 800, 
popX : 200, 
popY : 200, 
popTitle : '', 
popClose : false , 
twoDiv : '', //自已扩展的属性，为满足变态需求 
pageTitle: ''};//自已扩展的属性，为满足变态需求

It can be seen that the attribute format defined in the plug-in is JSON. Some attributes are introduced below

modes defines two attributes. When popup is specified, a new window will be opened, which can be regarded as a print preview page. The default is iframe.

@popClose | [boolean] | (false),true Whether to open and close the preview page after printing is completed. The default is false (not closed). 

$("div#printmain").printArea({mode:"popup",popClose:true});

This way you can specify DIV printing.

Let’s talk about the purpose of the two new attributes I added
twoDiv:
The second DIV that needs to be printed will of course be the second page. This page is relatively long and requires automatic paging, and each row in the table is different. Some rows span multiple rows. When printed here, one row may be printed on two piece of paper.

pageTitle:
The second DIV is divided into multiple pages, and the header of each page needs to be the same. This parameter is the common header.

These two parameters correspond to the DIV in the page, such as: 

<div id="pageTitle" style="display: none;">

After the page is defined, let’s see how our page is processed in the plug-in. 

writeDoc.open(); 
writeDoc.write(html); //打找一个窗口关写窗口中的HTML代码 
writeDoc.close(); 

printWindow.focus(); 
printWindow.print();

The following is the code to generate html

html+=docType() + "<html>" + getHead() + getBody(thisPage) + "</html>";

The mutual meaning methods are defined in the plug-in. I have not made any modifications, so I will not paste them here.

Here are my thoughts:

If we need to divide the content in a DIV into multiple pages and ensure that one line does not span multiple pages, we have to work hard on generating html code.

First find all the rows in the DIV. When the height of the common table header reaches one page after adding these rows, paging is needed. Here, the last row in a page happens to span multiple pages and save this row. Come down and put it on the next page.

After each page is generated, you need to add a CSS pagination tag after the HTML tag, so that the printer will paginate obediently.

To explain, the generated preview page is an HTML page, which has corresponding header and DTD information.

Some people may know that there are only 4 pages in the preview, but there will always be one more page when printing. In this case, you need to check whether the pagination mark in the page you generate is before the HTML tag.
The facet tag must be after the HTML tag, which can solve the problem of printing one more page.

PS:
I will upload my modified JS plug-in below. Due to my project cycle, many parts of the code have been written to death, just to solve this printing problem. The code is very messy, I hope you will take a closer look

Colleagues also hope that someone can optimize it and make it universal.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Comparison of character processing performance between Node.js and PHP and Python_node.jsNext article：Comparison of character processing performance between Node.js and PHP and Python_node.js

Related articles

See more