jquery prints the specified area HTML page and automatically pages _jquery

In recent projects, you need to print HTML pages, you need to specify areas to print, use jquery. Printarea.js Plugin

Usage:

$ ("Div#printmain"). PrintArea ();

But still will print the content behind the Div, here you can use the CSS control print pagination

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

Sometimes using CSS to control pagination, but still will continue to print the page, here you can use the PrintArea plug-in property parameters.

PrintArea part of the 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: ',//self-extended properties, to meet abnormal needs 
pagetitle: '};//Self extended properties, to meet abnormal needs

You can see that the properties defined in the plug-in are formatted as JSON, and here are some of the properties

Modes defines two properties, specifies that when popup opens a new window, it can be considered a print preview page and the default is IFRAME.

@popClose | [Boolean] | (false), true if the preview page is closed when the print is finished, false (not close) by default.

$ ("Div#printmain"). PrintArea ({mode: "Popup", Popclose:true});

This allows you to specify the div print.

Here's what I've added two properties to use
Twodiv:
The second div that needs to be printed, of course, is the second page, which is longer, needs to be automatically paged, and each row in the table is different, and some lines span several lines, where it prints and one line may print on two sheets of paper.

PageTitle:
The second div is divided into pages, and the header of each page needs to be the same, and this parameter is the common table header.

Both of these parameters correspond to the div in the page, such as:

<div id= "PageTitle" style= "Display:none;" >

Once the page is defined, let's look at how our page is handled in the plugin.

Writedoc.open (); 
Writedoc.write (HTML); Find a window to close the HTML code in the window 
writedoc.close (); 

Printwindow.focus (); 
Printwindow.print ();

Here is the code that generates HTML

Html+=doctype () + " 
 

Plug-ins are defined in the Sangyi method, I did not make any changes, here I will not paste.

Here are my thoughts:

To divide the contents of a div into multiple pages, and one line does not span multiple pages, we need to work on generating HTML code.

First, find all the rows in the Div, when the public header plus these lines to a height of one page, you need to pagination, there can be the last line on one page just across multiple pages, save this line, and put it on the next page.

After each page build is completed, you need to add a CSS paging tag behind the HTML tag so that the printer will obediently pagination.

To illustrate, the resulting preview page is an HTML page that has the corresponding header and DTD information.

Someone may have a preview of only 4 pages, and print out always more than one page, then you need to verify that you generated the page of pagination tag is not in the HTML tag.
The faceted mark must be after the HTML tag, which solves the problem of printing more than one page.

Ps:
Below I will pass on my modified JS plugin, due to the reason of my project cycle, many parts of the code are written dead, just to solve the problem of printing this time. In the code is very messy, I hope you will investigate

Colleagues also want to be able to optimize again to make it universal.