Web online printing, print viewing, print maintenance, print design

Source: Internet
Author: User

WinForm Printing Scheme is more, the implementation is relatively easy, and the effect is very dazzling, but now more and more systems are web systems, even mobile. Internet also has a very large web printing scheme, but a variety of problems, such as JS compatibility, stability, etc. has been entangled in many programmers, or Web printing requires the browser to install ActiveX components, ActiveX installation is not easy to succeed and so on.

Below we look at a Web online reading, online editing, online printing solutions, Lodop This online printing tool in the version of the browser compatibility performance is good, functional aspects, we commonly used print reading, print design, printer settings, etc. he has provided, and the additional features are many, Enough for us to develop used. He provides another way for the browser to install the ActiveX components, first detect that there is no plug-in, not detect the plug-in, automatically prompt, and give the address of the download plug-in, where the plug-in using the EXE format, so that the browser security settings to avoid the problem, as to how to install here is not to repeat.

  1. preparatory work:

Download Lodop:http://www.lodop.net/uploads/file/lodop6.198.zip, unzip and put into the project, the page introduces the following code:

<script src= "~/scripts/lodop kit/lodopfuncs.js" ></script>

<script type= "Text/javascript" language= "JavaScript" src= ". /lodop/lodopfuncs.js "></script>
<object id= "Lodop" classid= "clsid:2105c259-1e0c-4534-8141-a753534cb4ca" width= "0" height= "0" >
<embed id= "Lodop_em" type= "Application/x-print-lodop" width= "0" height= "0" pluginspage= "... /lodop/install_lodop.exe "></embed>
</object>

Where: <embed id= "Lodop_em" type= "Application/x-print-lodop" width= "0" height= "0" pluginspage= "... /lodop/install_lodop.exe "></embed>

is designed for the FireFox browser code, if you this print control only in the IE application, then the above words can be completely unused.

Just add it to the line:

<script type= "Text/javascript" language= "JavaScript" src= ". /lodop/lodopfuncs.js "></script>
<object id= "Lodop" classid= "clsid:2105c259-1e0c-4534-8141-a753534cb4ca" width= "0" height= "0" >
</object>

After introducing these to the page, the rest is some basic LODOP API calls.

 2. Add a few buttons to call

1<divclass="Toolbar">2@x.button ("Print Preview"). Icon ("Icon-printview"). Click ("Print_preview ()"). ToolTip ("Print Preview")3@x.button ("Direct Printing"). Icon ("Icon-print"). Click ("print ()"). ToolTip ("Direct Printing")4@x.button ("Select Printer"). Icon ("Icon-selectprinter"). Click ("Print_printa ()"). ToolTip ("Select Printer")5@x.button ("Print Maintenance"). Icon ("Icon-printsetup"). Click ("Printsetup ()"). ToolTip ("Print Maintenance")6@x.button ("Print Design"). Icon ("icon-printdesign"). Click ("printdesign ()"). ToolTip ("Print Design")7</div>

  3. The corresponding method of these buttons  

1 varLodop;//declared as a global variable2 //Print Preview3 function Print_preview () {4 createprintpage ();5 Lodop. PREVIEW ();6 };7 //Direct Printing8 function Print () {9 createprintpage ();Ten Lodop. PRINT (); One }; A //Select Printer - function Print_printa () { - createprintpage (); the Lodop. PRINTA (); - }; - //Print Maintenance - function Printsetup () { + createprintpage (); - Lodop. Print_setup (); + }; A //Print Design at function Printdesign () { - createprintpage (); - Lodop. Print_design (); - }; - //Create a printed page - function Createprintpage () { inLodop =Getlodop (); -Lodop. Print_init ("Web Online Printing"); toLodop. Set_print_pagesize (1,0,0,"A4"); +     //Set Print Page properties: 2: For landscape printing, 0: Define paper width, 0 for invalid setting, A4: set paper to A4 -     //Lodop. Add_print_text (50, 231, 260, 39, "Print part of the page"); theLodop. Set_print_style ("FontSize", -); *Lodop. Set_print_style ("Bold",1); $Lodop. Add_print_htm (Ten, -,760,860, $('#CurrentDocumentPage')[0].contentwindow.document.body.innerhtml);Panax Notoginseng}

The specific API does not need to be described in detail, here only to say Add_print_htm (inttop,intleft,intwidth,intheight,strhtml) Add hypertext,

$ (' #CurrentDocumentPage ') [0].contentwindow.document.body.innerhtml, is the content of the IFRAME page, you need to carefully study the LODOP website can be consulted.
1<div id="documentviewersummary"style="Margin:5px;height:auto, Width:auto, Text-align:center">2<iframe id="Currentdocumentpage"style="width:98.5%; height:97%; min-height:480px; text-align:center ;3position:relative;margin:5px;padding-top:5px;padding-left:5px;"></iframe>4 5</div>

$ ("#CurrentDocumentPage"). attr ("src", viewurl);

4. Final effect

  Page content

 Print Reading

The target user for print maintenance is the page operator, and when the developer makes the interface available to the operator based on business needs, it sometimes discovers that its default function permissions do not meet the business requirements (and also less), as follows is the default function permission range, try to change the tick to see how the demo program through set_show_mode function solves this problem.

1:Position movement and width height adjustment
2:Color selection
3:Font name Selection
4:Word Size selection
5:Rotation angle Adjustment
6:Coarse italic function Bar
7:Linetype function Bar

8:Align the feature bar
9:Remove Features
10:Header settings
11:Footer settings
12:Position Lock function
13:property settings
14:Display the Close button (when the interface is inline)

  Printer settings 

  5. Summary:

Finally, let's briefly say Lodop's advantages:

(1), simple operation, easy to understand API, compatibility, mainstream browser support;

(2), plug-in can implement automatic installation reminders, and do not require additional settings;

(3), print maintenance can achieve permissions control, such as without modifying the content of the premise of modifying the printing style, such as adjusting the font, such as adjusting the position and so on

(4), user-designed print page, can be personalized personal settings, system maintenance of the same template can be adapted to different printers.

Web online printing, print viewing, print maintenance, print design

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.