Web page Printing A4 paper-----The implementation of automatic page-feed printing when spread across pages (go)

In a recent project, you need to print a lot of forms through a Web page, but you don't want each print page to occupy a single page, so you need to survive a lot of different redundant pages, and in order to reduce redundancy, all forms are implemented with jquery tab tabs.

One: The implementation of basic printing:

1:tab tab in the Change event when switching, remember the index of each tab,

2: When clicking the Print button, according to the remembered index, by the tab ID ("tab name +index"), get the current tab to check all the HTML;

3: Will get to print the tab HTML assigned to Document.body.innerHTML, (because the page printing, is to print the current window of all the HTML, so the need to change his content, in order to be able to return to the original page effect, need to remember the original page of HTML, After the print is finished, assign the original content back. )

4: Call page print function window.print ();

Key Code Snippet:

Two: The realization of the automatic page-changing of the table in the cross-page

When printing, if it is a whole table or document format content, you can print directly, regardless of the page table or document is broken. But if on the printed page, there are many groups of tables, and the number of records for each group of tables is not fixed, and requires that each table in the range of not exceeding A4 paper size on a piece of paper, not a table less than A4 paper to print two pages, this time you need to implement the table when the cross-page printing automatically.

Implementation ideas:

1:html structure: In the tab, the table usually has the descriptive text of the table header, with a Div, the height of the div is fixed, the table body is generally table,table the height of each row needs to be fixed, so that a set of table height is fixed, Note that the CSS style of the HTML structure does not appear in the style of padding and margin, otherwise it will affect oh ...

2: Several fixed heights:

A4 Paper Height: The actual height of the A4 paper div (because it will be in a sheet of paper wrapped in a div, or despite the height, seemingly invalid), after several rounds of printing test down, the height of the basic positioning of 955px;

A A4 the height of the content of the paper: if the content is highly defined as the height of the A4 paper, seemingly still a bit of a problem, test down the content of the final height 〈A4 paper, defined as: 890px;

When the added height of each set of tables exceeds the height of the defined content, the HTML of all the preceding groups is placed in a div, and the height of the div is set to the height of A4 paper, then the HTML of the current group is added as the content of the second Div, and the HTML of all the groups is added to print.

Code:

Web page printing is related to page settings, my default settings are:

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

Original: http://www.cnblogs.com/Joans/archive/2013/02/05/2892771.html

Web page Printing A4 paper-----The implementation of automatic page-feed printing when spread across pages (go)