Of Stack

JQuery prints and automatically paginates Html pages in the specified area

  • 2020-03-30 03:30:29
  • OfStack

In the most recent project, you need to print an HTML page, and you need to specify a region to print, using the jquery.printarea.js plug-in

Usage: 


$("div#printmain").printArea();

But it will still print the content after the DIV, and you can use CSS to control the printing page 


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

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

PrintArea part of the source code: 


var modes = { iframe : "iframe", popup : "popup" }; 
var defaults = { mode : modes.iframe, 
popHt : 800, 
popWd : 800, 
popX : 200, 
popY : 200, 
popTitle : '', 
popClose : false , 
twoDiv : '', //From the extended attributes, to meet the abnormal needs
pageTitle: ''};// From the extended attributes, to meet the abnormal needs

As you can see, the properties defined in the plug-in are in JSON format, some of which are described below

Modes defines two properties that open a new window when popup is specified and can be viewed as a printed preview page, which defaults to an iframe.

PopClose | [Boolean] | (false), whether to open or close the preview page after printing is finished, false is the default (not closed). 


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

This lets you specify DIV to print.

Here's what I did with the two new attributes
TwoDiv:
The second DIV that needs to be printed, of course, is going to be the second page, and it's going to be long and it's going to be automatically paginated, and it's going to be different for every row in the table, and some of the rows are going to be multiple lines, so if you print it out here, one line might be printed on two pieces of paper.

PageTitle:
The second DIV is divided into multiple pages, each page needs the same header, and this parameter is the common header.

These two parameters correspond to divs in the page, such as: 


<div id="pageTitle" style="display: none;">

With the page defined, let's look at how our page is handled in the plug-in. 


writeDoc.open(); 
writeDoc.write(html); //Type in a window to close the window and write the HTML code
writeDoc.close(); 

printWindow.focus(); 
printWindow.print();

Here is the code that generates the HTML 


html+=docType() + "<html>" + getHead() + getBody(thisPage) + "</html>";

I haven't made any changes, so I won't paste it here.

Here are my thoughts:

Since we need to divide the content in a DIV into multiple pages, and the line does not span multiple pages, we have to work on generating HTML code.

First, find all the lines in the DIV. When the common header is added with these lines to reach the height of a page, you need to page, so you can have the last line on a page that spans just a few pages. Save that line and put it on the next page.

After each page is generated, the HTML tag needs to be followed by a CSS pagination tag, so the printer will page obediently.

To illustrate, a page of the generated preview page is an HTML page with the corresponding header and DTD information.

Someone might preview four pages and print out one more, so you need to check that the pagination tags in the page you're generating come before the HTML tags.
Faceted markup should always follow the HTML tag to solve the problem of printing an extra page.

Related articles: