Web development framework based on Mvc+easyui the use of cloud print control C-LODOP print a page or a set of customs waybill information _jquery

In the latest mvc4+easyui of the Web development Framework, I integrated the online purchase of the waybill processing a module, which integrates the Customer Guide list, waybill merge, arrival scan, Buckle warehouse, out of the warehouse, inquiries and other modules of the operation, which involves some of the operation of the air waybill set, However, because previously introduced LODOP is not compatible with browsers such as Chrome, so once wanted to discard the control of the printing process, but they launched the "Cloud Printing control C-lodop", and the previous interface is almost completely compatible, so in the framework also continue to use the control for related printing process, including regular printing and waybill information, such as the handling of the package.

1, the control installation

This cloud control C-lodop (http://www.lodop.net/) is actually installed after the local service to provide JS service, after the installation of the startup program after the interface shown below.

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

With their own JS initialization code, you can understand that the control is currently a non-plug-in mode for processing printing operations.

Let other computers ' browsers print via native (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);
Let native browsers print (more first):
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 local browser's post-complement port 8001 (this balancing act may be an error-free):
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 a lodopfuncs.js file to build a 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 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 original LODOP of the use of consistency, do not change the original code can be used to directly use the latest printing methods, very good, about the use of this control, I introduced a lot of related use of the process before.

such as in the WinForm use of the case of Web page sets of documents "based on the nvelocity of several content generation method summary."

As well as in the Web page to deal with the "Web printing solution of the concept of the implementation of the idea", as well as the "Web Printing solution of the Common report printing", inside the control of the use of the operation did a very detailed introduction.

The control provides a very detailed variety of cases (http://www.lodop.net/demo.html) that can be referenced for learning to use.
In front of the introduction, I in the framework of the net purchase Waybill processing inside, continue to use this control to deal with the set, for example, we need to set a similar interface to play the content.

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

Design good content, we can convert them to the page inside the JS code 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, "the air Waybill sets 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, "the air Waybill sets dozen");
Createlicensedata (); Lodop.
Print_setup ();
};
function design () {//print designs LODOP = Getlodop (); Lodop.
Print_inita (-1,-1, 824, 1129, "the air Waybill sets dozen");
Createlicensedata (); Lodop.
Print_design ();
}; function Createlicensedata () {if (Printid!= undefined && printid!= ') {//Use sync method to make the control of the linkage display normally $.AJAXSETTINGS.A
Sync = 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 (" '); Lodop. Set_show_mode ("Bkimg_in_preview", true);//preview contains background LoDoP.set_show_mode ("Bkimg_print", true);//print content contains background Lodop. Add_print_barcode (441, 262, "128C", info.
Fenyundanhao); Lodop. Add_print_barcode (684, 441, 262, "128C", info.
Fenyundanhao); Lodop. Add_print_text (186, 287, 277, JIU, info.)
shou_com); Lodop.
Set_print_stylea (0, "FontSize", 12); Lodop. Add_print_text (236, 378, 186, info.
Shou_name); Lodop.
Set_print_stylea (0, "FontSize", 12); Lodop. Add_print_text (276, 283, 284, and info.
Shou_dizhi); Lodop.
Set_print_stylea (0, "FontSize", 12); Lodop. Add_print_text (362, 306, 254, info.)
Shou_phone); Lodop.
Set_print_stylea (0, "FontSize", 12); Lodop. Add_print_text (404, 319, Wuyi, info.)
Jianshu); Lodop.
Set_print_stylea (0, "FontSize", 12); Lodop. Add_print_text (476, KM,), info.
Zhongliang); Lodop.
Set_print_stylea (0, "FontSize", 12); Lodop. Add_print_text (187, MB, $, info.)
FA_GONGSI); Lodop.
Set_print_stylea (0, "FontSize", 12); Lodop. Add_print_text (277, 230,), info.
Fa_dizhi); Lodop.
Set_print_stylea (0, "FontSize", 12); Lodop. Add_print_TEXT (364, Panax Notoginseng, MB, m, info.)
Fa_phone); Lodop.
Set_print_stylea (0, "FontSize", 12); Lodop. Add_print_text (410, Panax Notoginseng, Radix, num, info.)
pinming); Lodop.
Set_print_stylea (0, "FontSize", 12); Lodop. Add_print_text (803, 234, JIU, info.)
FA_GONGSI); Lodop.
Set_print_stylea (0, "FontSize", 12); Lodop. Add_print_text (895, 238, the), info.
Fa_dizhi); Lodop.
Set_print_stylea (0, "FontSize", 12); Lodop. Add_print_text (979, 234, and info.)
Fa_phone); Lodop.
Set_print_stylea (0, "FontSize", 12); Lodop. Add_print_text (1024, 228, info.
pinming); Lodop.
Set_print_stylea (0, "FontSize", 12); Lodop. Add_print_text (285, 287, JIU, info.)
shou_com); Lodop.
Set_print_stylea (0, "FontSize", 12); Lodop. Add_print_text (849, 373, 198, info.
Shou_name); Lodop.
Set_print_stylea (0, "FontSize", 12); Lodop. Add_print_text (894, 285, 287, and info.
Shou_dizhi); Lodop.
Set_print_stylea (0, "FontSize", 12); Lodop. Add_print_text (980, 287, 281, num, info.)
Shou_phone); Lodop.
Set_print_stylea (0, "FontSize", 12); Lodop. Add_print_text (1021,317, Don, info.
Jianshu); Lodop.
Set_print_stylea (0, "FontSize", 12); Lodop. Add_print_text (1017, 477, KM, info.)
Zhongliang); Lodop.
Set_print_stylea (0, "FontSize", 12);
});
}//Print preview Var Printid; function Printdetail () {var row = $ ("#gridDetail"). DataGrid ("getselected"); if (row) {var index = $ (' #gridDetail '). Datag
RID (' getrowindex ', row);
Printid = row.id;
Preview ();
else {$.messager.alert ("prompt", "Please select a record");} Bulk Print function Batchprint () {//Get the user's selected Data id var rows = $ ("#gridDetail"). DataGrid ("Getselections"); if (Rows.length > = 1) {//Then confirm sending the information of the asynchronous request to the background to delete the data $.messager.confirm ("Bulk Print Confirmation", "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");
Printid = rows[i].id;
Createlicensedata (); Lodop.
PRINT ();
}
}
});
else {$.messager.alert ("prompt", "Please select the data you want to print in bulk");} Print Maintenance function Printsetup () {var row = $ ("#gridDetail"). DataGrid ("getselected"); if (row) {var iNdex = $ (' #gridDetail '). DataGrid (' Getrowindex ', row);
Printid = row.id;
Setup (); }} </script>

In this print interface, but also use two-dimensional code print processing operations, so very convenient directly using the bar code 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 to set the Print Operation function button to handle, below is our Easyui based Web framework interface effect.

The print preview interface looks like this, and when you actually print it, we can set the background image to not print.

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

The reference code is shown below.

@* add support for LODOP controls *@ <script type= "Text/javascript" > var Lodop;
Declared as global variable 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 designs Createlicensedata (); Lodop.
Print_design ();
};
function Createlicensedata () {Lodop = Getlodop (); Lodop.
Print_init ("Policy and Statute"); var strbodystyle = ' <link type= ' text/css ' rel= ' stylesheet ' href= '/content/themes/default/style.css ' ><!--Table {border:1;background-color: #CBCBCC} td {Background-color: #FFFFFE; border:1} th {background-color:#
F1f1f3;padding-left:5px;border:1}--></style> ";
var strformhtml = Strbodystyle + "<body>" + document.getElementById ("Printcontent"). InnerHTML + "</body>"; Lodop.
Add_print_htm (610, 900, strformhtml); Lodop.
PREVIEW (); function SaveAs () {var id = $ (' #ID2 '). VAL ();
window.open ('/information/exportwordbyid?id= ' + ID); } </script>