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

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  <div class= "toolbar" >2             @x.button ("Print Preview"). Icon ("Icon-printview"). Click ("Print_preview ()"). ToolTip ("Print Preview") 3             @x.button ("Direct print"). Icon ("Icon-print"). Click ("Print ()"). ToolTip ("Direct print") 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 var Lodop;//declared as global variable 2//Print Preview 3 function Print_preview () {4 createprintpage (); 5 Lodop. PREVIEW (); 6}; 7//Direct print 8 function print () {9 createprintpage (); Lodop. Print (); 11};12//Select Printer function Print_printa () {createprintpage (); Lodop. PRINTA (); 16};17//Print Maintenance function Printsetup () {createprintpage (); Lodop. Print_setup (); 21};22//Print design printdesign () {createprintpage (); Print_design (); 26};27//Create print page Createprintpage () {Getlodop Lodop = Lodop (); Print_init ("Web online Printing"); Lodop. Set_print_pagesize (1, 0, 0, "A4"); 32//Set Print Page properties: 2: For landscape printing, 0: Define paper width, 0 for invalid settings, A4: set paper to A433//lodop. Add_print_text (50, 231, 260, 39, "Print part of the page"); Lodop. Set_print_style ("FontSize"); Lodop. Set_print_style ("Bold", 1); Lodop. Add_print_htm (Ten, 760, 860, $ (' #CurrentDocumentPage ') [0].contentwindow.document.body.innerhtml]; PNS} 

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;3                     position: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 of the 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, see how the demo program through Set_show_ The 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