Web page printing A4 paper -- implement automatic page change printing when a table is displayed across pages

In a recent project, you need to print a lot of forms through the web page, but you do not want each print tab to occupy one page, so you need to survive many different redundant pages, to reduce redundancy, all forms are implemented through the jquery tab.

I. Implementation of basic printing:

1: In the change event during the switch, remember the index of each tab,

2: When you click the print button, based on the remembered index, the ID of the tab ("tab name + index") is used to obtain all HTML on the current tab;

3: Assign the HTML of the obtained tab to document. body. innerhtml, (because Web page printing is to print all the HTML of the current window, you need to change its content. In order to return to the original page effect, you need to remember the HTML of the original page, after printing, assign the original content back .)

4: Call the web page printing function window. Print ();

KeyCodeSection:

 

 

 

 

II. Implementation of automatic page feed when a table is displayed across pages

When printing a table or document, you can print it directly without worrying about whether the table or document on the page is broken. However, if there are many groups of tables on the printed page, and the number of records in each group of tables is not fixed, in addition, each table must be placed on one piece of paper within the range of no more than the A4 size. A table smaller than the A4 size cannot be printed on two pages, in this case, automatic paging printing is required when the table is displayed across pages.

Implementation ideas:

1: HTML structure: In this tab, the table generally contains descriptive text in the header, which is indicated by Div. The height of the DIV is fixed, and the table body is generally table, the height of each row of the table needs to be fixed, so that the height of a group of tables is fixed. Note that styles such as padding and margin cannot appear in the CSS style of the HTML structure, otherwise, it will be affected...

2: several fixed heights:

Height of A4 paper: Actually the height of the DIV in A4 paper (because the table in a sheet of paper is packed in a DIV, otherwise it seems invalid even if the height is set ), after several rounds of printing tests, the height is basically positioned as 955px;

Height of the content in an A4 paper: If the content height is defined as the height of the A4 paper, it seems that there is still a problem. After testing, the content height is defined: 890px;

When the height of each accumulated table group exceeds the defined height, place the HTML of all groups in front of the table in a div and set the height of the DIV to the height of the A4 paper, add the HTML of the current group as the content of the second Div and print the HTML of all groups;

Code:

Webpage printing is related to webpage settings. All my settings are default settings: