jquery Print HTML page automatic pagination

Source: Internet
Author: User

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
  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: ', ///self-extended properties to meet perverted needs
  10. 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 ();
    4. Printwindow.focus ();
    5. 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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.