Mvc+easyui-based Web development Framework Experience Summary (16)--Use the cloud print control C-LODOP print the page or set the customs waybill information

In the latest Mvc+easyui Web development Framework, I integrated the online purchase Waybill processing of a module, which integrates the customer guide, waybill merger, arrival scan, close, warehouse, query and other modules of the operation, which involves some of the operation of the waybill set, However, since the introduction of LODOP is not compatible with chrome and other browsers, so have wanted to give up the control of printing, but they launched the "Cloud Print control C-lodop", and the previous interface is almost completely compatible, so in the framework also continue to use this control for related printing processing, including regular printing and waybill information, such as processing.

1, the installation of the control

This cloud control C-lodop (http://www.lodop.net/) is actually after the local installation, the hosting service provides JS service, after the installation of the Boot program interface as shown below.

650) this.width=650; "Src=" Http://images2015.cnblogs.com/blog/8867/201607/8867-20160708092034046-315613678.png " Style= "border:0px;"/>

This way through the server to provide JS service, than plug-in way much better, tested Chrome browser can also print smoothly, the original LODOP plug-in mode of printing is incompatible.

With their own JS initialization code, you can learn that the control is currently in a non-plug-in way to handle printing operations.

Allow other computer browsers to print natively (for example): Var oscript = document.createelement ("script");oscript.src =  "/clodopfuncs.js"; var head = document.head | |  document.getelementsbytagname ("Head") [0] | |  document.documentelement;head.insertbefore (oscript, head.firstchild);//allow native browser to print (more preferred): oscript =  document.createelement ("script");oscript.src =  "http://localhost:8000/CLodopfuncs.js?priority= 1 "; var head = document.head | |  document.getelementsbytagname ("Head") [0] | |  document.documentelement;head.insertbefore (oscript, head.firstchild);//The back-fill port of the native browser 8001 ( This balance may be error-free, ignore it): oscript = document.createelement ("script");oscript.src =  "http://localhost : 8001/clodopfuncs.js?priority=2 "; var head = document.head | |  document.getelementsbytagname ("Head") [0] | |  document.documentelement;head.insertbefore (Oscript, head.firstchild);

The official example provides the Lodopfuncs.js file for building the print control, where the GETLODOP function is defined in the Lodopfuncs.js file to obtain the Print control object.

Check to see if the JS code for the Cloud Print control is installed as shown below.

<script language= "JavaScript"  type= "Text/javascript" >         function checkisinstall ()  {              try{              var  lodop=getlodop ();             if  ( Lodop. VERSION)  {                  if  (Lodop. Cversion)                   alert ("currently has C-LODOP Cloud print available!\N&NBSP;C-LODOP version:" +lodop. Cversion+ "(Contains Lodop" +lodop. version+ ")");                   else                  alert ("This machine has successfully installed the LODOP Control! \n  version number: "+lodop. VERSION);             };          }catch (ERR) {            }     }; </script>

2, the use of cloud print control C-lodop

This control and the use of the original LODOP consistency, without modifying the original code can directly use the latest printing method, very good, about the use of this control, I described a lot of relevant use of the process.

such as the use of Web pages in WinForm, the case of "using nvelocity to generate content in several ways."

650) this.width=650; "src=" Http://images.cnitblog.com/i/8867/201406/271738580082405.png "style=" border:0px; "/>

As well as on the Web page of the processing of the "Web Printing solution of the document set dozen", and "web printing solution of the general report printing", the use of the control of the operation is described in detail.

650) this.width=650; "src=" Http://images.cnblogs.com/cnblogs_com/wuhuacong/webUI/LodopPrinterTaoda.png "width=" 724 "height=" 524 "border=" 0 "style=" border:0px; "/>

650) this.width=650; "src=" Http://images.cnblogs.com/cnblogs_com/wuhuacong/webUI/LodopPrinter.png "width=" 727 " height= "472" border= "0" style= "border:0px;"/>

650) this.width=650; "Src=" Http://images.cnblogs.com/cnblogs_com/wuhuacong/webUI/LodopPrinterStyleTable.png " Width= "905" height= "499" border= "0" style= "border:0px;"/>

This control provides a very detailed variety of cases (http://www.lodop.net/demo.html), which can be referenced by learning to use.

In the previous introduction, I in the framework of the net purchase Waybill processing inside, continue to use this control for the processing of the set dozen, for example, we need to set up a similar interface content.

650) this.width=650; "Src=" Http://images2015.cnblogs.com/blog/8867/201607/8867-20160711112342232-251945302.png " Style= "border:0px;"/>

We designed a set of page content, as shown below.

650) this.width=650; "Src=" Http://images2015.cnblogs.com/blog/8867/201607/8867-20160711112927279-1015839564.png " Style= "border:0px;"/>

Well designed content, we can convert them to the JS code inside the page as shown below.

<script src= "/content/jquerytools/lodop/checkactivx.js" ></script><script type= "text/ JavaScript ">var lodop; //declared as global variable  function preview ()  {//print preview lodop =  Getlodop (); Lodop. Print_inita ( -1, -1, 824, 1129,  "waybill set Dozen"); Createlicensedata (); Lodop. Set_preview_window (2, 0, 0, 800, 600,  ""); Lodop. Set_print_pagesize (1, 0, 0,  "A4"); Lodop. PREVIEW ();}; Function setup ()  {//Print Maintenance Lodop = getlodop (); Lodop. Print_inita ( -1, -1, 824, 1129,  "waybill set Dozen"); Createlicensedata (); Lodop. Print_setup ();}; Function design ()  {//print design Lodop = getlodop (); Lodop. Print_inita ( -1, -1, 824, 1129,  "waybill set Dozen"); Createlicensedata (); Lodop. Print_design ();}; Function createlicensedata ()  {             if  (printid != undefined && printid !=  ')   {//using synchronous mode, so that the linkage of the control normal display $.ajaxsettings.async = false;//first the user sends an asynchronous request to the background implementation method $.getjson ("/billdetail/ Findbyid?id= " + printID, function  (info)  {lodop. Add_print_setup_bkimg ("= 1)  {//then confirms the sending of the asynchronous request information to the background to delete the data $.messager.confirm (" Batch print acknowledgement ", " Are you sure you want to print the selected records in bulk? , function  (Action)  {if  (action)  {for  (var i = 0; i  < rows.length; i++)  {lodop = getlodop (); Lodop. Print_init (""); Lodop. Set_print_pagesize (1, 0, 0,  "A4");p rintid = rows[i].id; Createlicensedata (); Lodop. PRINT ();}});} Else {$.messagEr.alert ("Hint",  "Please select the data you want to print in bulk");}} Print Maintenance Function printsetup ()  {var row = $ ("#gridDetail"). DataGrid ("getselected");   (Row)  {var index = $ (' #gridDetail '). DataGrid (' Getrowindex ',  row);p rintid =  row.ID; Setup ();}} </script>

One of the printing interface, also used in the two-dimensional code printing processing operations, so it is convenient to directly use barcode gun directly read, the following code:

Lodop. Add_print_barcode (441, 262, "128C", info. Fenyundanhao); Lodop. Add_print_barcode (684, 441, 262, "128C", info. Fenyundanhao);

Then in the main page set the Print Operation function button to handle, the following is our Easyui based Web framework interface effect.

650) this.width=650; "Src=" Http://images2015.cnblogs.com/blog/8867/201607/8867-20160711112427701-1808888901.png " Style= "border:0px;"/>

The print preview screen looks like this, and when actually printing, we can set the background image not to print.

650) this.width=650; "Src=" Http://images2015.cnblogs.com/blog/8867/201607/8867-20160711112948998-826146597.png " Style= "border:0px;"/>

If it is regular printing, then their interface is very close to what we see in the page, as shown below.

650) this.width=650; "Src=" Http://images2015.cnblogs.com/blog/8867/201607/8867-20160708100129921-1045041982.png " Style= "border:0px;"/>

The reference code is shown below.

@* adding support for Lodop controls *@<script type= "Text/javascript" >var lodop; //declared as global variables  function  Preview ()  {//original print createlicensedata (); Lodop. Set_show_mode ("Preview_in_browse",  1); Lodop. PREVIEW ();}; Function printa ()  {createlicensedata (); Lodop. PRINTA ();}; Function setup ()  {//Original print maintenance Createlicensedata (); Lodop. Print_setup ();}; Function design ()  {//original print design Createlicensedata (); Lodop. Print_design ();}; Function createlicensedata ()  {lodop = getlodop (); Lodop. Print_init ("Policies and Regulations");var strbodystyle =  "<link type= ' text/css '  rel= ' stylesheet '  href= '/content/themes/default/style.css '  /><style><!--table { border:1; background-color:  #CBCBCC  } td {background-color: #FFFFFE; border: 1; } th  { background-color: #F1F1F3;p adding-left:5px;border:1}--></style> "; var strformhtml  = strBodyStyle +  "<body>" &NBSP;+&NBsp;document.getelementbyid ("printcontent") .innerhtml +  "</body>"; Lodop. Add_print_htm (20, 40, 610, 900, strformhtml); Lodop. PREVIEW ();} Function saveas ()  {var id = $ (' #ID2 '). Val (); window.open ('/information/exportwordbyid? Id= '  + id );} </script>

The above is based on the new version of the Cloud print control C-lodop the use of effects and code, we hope to help.

This article is from the "Wu Huacong blog" blog, make sure to keep this source http://wuhuacong.blog.51cto.com/1779896/1829096

Mvc+easyui-based Web development Framework Experience Summary (16)--Use the cloud print control C-LODOP print the page or set the customs waybill information