jquery Print HTML page automatic pagination

You need to print HTML pages in recent projects, you need to specify a region to print, and you use jquery. Printarea.js Plug-in

Usage:

JavaScript code

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

However, the content behind the div will be printed, and you can use CSS controls to print the pagination

CSS Code

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

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


PrintArea Part Source:

JavaScript code

2. var modes = {iframe: "iframe", Popup: "Popup"};
4. var defaults = {Mode:modes.iframe,
6. popht:800,
8. popwd:800,
10. POPX:200,
12. POPY:200,
14. Poptitle: ",
16. Popclose: false,
18. Twodiv: ', ///self-extended properties to meet perverted needs
20. PageTitle: '}; //Self-extended properties to meet perverted needs

You can see that the attribute format defined in the plugin is JSON, and some of the properties are described below

Modes defines two properties, specifying that a new window opens when the popup is opened and can be treated as a print preview page, which defaults to an IFRAME.

@popClose | [Boolean] | (false), true whether to open and close the preview page after printing is complete, false (not closed) by default.

JavaScript code

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

This allows you to specify the div to print.

Let's talk about the purpose of my new two properties
Twodiv:
The second div that needs to be printed is, of course, the second page, which is longer, requires automatic paging, and each row in the table is different, and some lines span multiple lines, and one line may print on two sheets of paper.

PageTitle:
The second div is divided into multiple 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:

HTML code

1. <div id= "pagetitle" style="Display:none;" >

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

JavaScript code

1. Writedoc.open ();
2. Writedoc.write (HTML); //Find a window to close the HTML code in the window
3. Writedoc.close ();
5. Printwindow.focus ();
6. Printwindow.print ();

Here's the code that generates the HTML

JavaScript code

1. Html+=doctype () + ""

The Sangyi method is defined in the

plug-in, and I haven't made any changes, so I won't paste it here.  


Here's my idea:  
       to divide the contents of a div into multiple pages, and one line does not span multiple pages, we have to generate HTML Work on the code.  

       First Find all the rows in the Div, and when the public headers are high enough to reach a page after the rows, they need to be paged, and here you can have the last line in a page just across multiple pages. Save this line and put it on the next page.  

       after each page is generated, the HTML tag is followed by a CSS paging tag, so the printer will be paged.  
      
       explain that one page of the generated preview page is an HTML page , it has the corresponding header and DTD information.  

       Someone may have a preview of only 4 pages, and print out a page, then you need to check if the page mark you generated is not before the HTML tag.  
       facet tags Be sure to follow the HTML tag, which solves the problem of printing more than one page. &NBSP

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 this printing. Where the code is very messy, I hope you will look at  
       
       Colleagues also want to be able to optimize and make it common.