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 work on generating HTML code.

       First Find all the rows in the Div, and when the public header is high enough to reach a page, it will need to be paginated, and here you can save the last line of the page just across multiple pages. , and put it on the next page.

       After each page is built, you will need to add CSS pagination tags to the HTML tag so that the printer is paged.
     
       Explain that a page of the generated preview page is an HTML page, It has a corresponding header with the 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 multiple pages.

ps:  
       below I will pass on my modified JS plugin, because of my project cycle, many parts of the code is 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.