JQuery prints Html page automatic Paging

HTML pages need to be printed in recent projects. You need to specify the area for printing and use the jquery. PrintArea. js plug-in.

Usage:

Javascript code

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

However, the content behind the DIV will still be printed. here we can use CSS to control the page printing.

Css code

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

Sometimes CSS is used to control paging, but pages are printed continuously. Here, the property parameters in the PrintArea plug-in can be used.


PrintArea source code:

Javascript code

1. Var modes = {iframe: "iframe", popup: "popup "};
2. Var defaults = {mode: modes. iframe,
3. PopHt: 800,
4. PopWd: 800,
5. PopX: 200,
6. PopY: 200,
7. PopTitle :'',
8. PopClose: false,
9. TwoDiv: '', // attributes extended by yourself to meet abnormal needs
10. PageTitle: ''}; // extended attributes to meet abnormal needs

The property format defined in the plug-in is JSON. The following describes some attributes.

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

@ PopClose | [boolean] | (false). Whether to open or close the preview page after true is printed. The default value is false (not closed ).

Javascript code

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

In this way, you can specify DIV printing.

The following describes the usage of two new attributes.
TwoDiv:
The second DIV to be printed, of course, will be the second page. This page is long and requires automatic paging, and each row in the table is different. Some rows span multiple rows and are printed here, A row may be printed on two sheets of paper.

PageTitle:
The second DIV is divided into multiple pages. The header of each page must be the same. This parameter is a public header.

Both parameters correspond to the DIV in the page, such:

Html code

1. <Div id = "pageTitle" style = "display: none;">

After the page is defined, let's see how the plug-in handles our page.

Javascript code

1. WriteDoc. open ();
2. WriteDoc. write (html); // enter a window to close the HTML code in the window.
3. WriteDoc. close ();
5. PrintWindow. focus ();
6. PrintWindow. print ();

The following is the html generation code.

Javascript code

1. Html + = docType () + "

The method defined in the plug-in is not modified. I will not paste it here.


The following are my ideas:
You need to divide the content of a DIV into multiple pages, and a row does not span multiple pages, so we have to work hard to generate html code.

First, find all rows in the DIV. When these rows are added to the public header and the height reaches one page, the page is displayed. here we can see that the last row on the page is just across multiple pages, save the row to the next page.

After each page is generated, you need to add the CSS pagination tag behind the HTML Tag, so that the printer will perform pagination.

The generated preview page is an HTML page with the corresponding header and DTD information.

Some people may have only four pages for preview, but there will always be one more page for printing. In this case, you need to check whether the pagination tag in your generated page is before the HTML Tag.
The split mark must be placed after the HTML tag, which can solve the problem of printing one more page.

PS:
Next I will upload the modified JS plug-in. Due to the project cycle, many parts of the Code are written to death, just to solve the problem of this printing. The code is messy. I hope you will read it later.

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