In the latest MVC4+ EasyUI web development framework, I have integrated a module on online shopping waybill processing, which integrates the operations of various modules such as customer order guide, waybill merger, arrival scanning, deduction, warehouse out, and query. It involves some waybill sets. However, since LODOP was not compatible with Chrome and other browsers before, I once wanted to give up the printing process of this control. However, they launched the "cloud printing control C-Lodop" in a timely manner, and it is almost completely compatible with the previous interface. Therefore, this control continues to be used in the framework for related printing processing, including conventional printing and waybill information sets.
1. Installation of controls
This cloud control C-Lodop (http://www.lodop.net/) is actually installed locally and the resident service provides JS services. The interface after installation is started after the program is started as follows.
This way of providing JS services through the server is much better than plug-in methods. After testing the Chrome browser, you can print smoothly. The original LODOP plug-in method is incompatible.
Through their own JS initialization code, we can understand that the control currently uses a non-plugin method to process printing operations.
//Let other computer browsers print through local (applicable example): var script = document.createElement("script");script.src = "/CLodopfuncs.js";var head = document.head || document.getElementsByTagName("head")[0] || document.documentElement;head.insertBefore(script, head.firstChild);//Let the native browser print (more preferred):script = document.createElement("script");script.src = "http://localhost:8000/CLodopfuncs.js?priority=1";var head = document.head || document.getElementsByTagName("head")[0] || document.documentElement;head.insertBefore(script, head.firstChild);//Native browser's post-complement port 8001 (this approach may cause errors and ignore it): script = document.createElement("script");script.src = "http://localhost:8001/CLodopfuncs.js?priority=2";var head = document.head || document.getElementsByTagName("head")[0] || document.documentElement;head.insertBefore(script, head.firstChild);The official example provides the 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 if the cloud print control is installed. The JS code for checking whether the cloud print control is installed is as follows.
<script language="javascript" type="text/javascript"> function CheckIsInstall() { try{ var LODOP=getLodop(); if (LODOP.VERSION) {if (LODOP.CVERSION)alert("Currently C-Lodop cloud printing is available!/n C-Lodop version:"+LODOP.CVERSION+"(includes Lodop"+LODOP.VERSION+")"); elsealert("Lodop control has been successfully installed in this machine!/n Version number:"+LODOP.VERSION); };}catch(err){ } }; </script>2. Use of cloud printing control C-Lodop
This control is consistent with the use of the original LODOP. You can use the latest printing method directly without modifying the original code. It is very good. Regarding the use of this control, I have introduced a lot of related usage processes before.
For example, in Winform, a case of using web page packages to make documents, "Summary of several content generation methods based on NVelocity".
As well as the "Implementation of Web Printing Solutions for Document Settings" on the web page, and "Ordinary Report Printing of Web Printing Solutions for Web Printing", the use and operation of controls is introduced in a very detailed manner.
This control provides a variety of detailed cases (http://www.lodop.net/demo.html), which can be used in reference.
As mentioned earlier, I continued to use this control to process the online shopping bill processing in the framework, for example, we need to apply interface content like this.
We have designed the content of the page as shown below.
For designed content, we can convert them into JS code inside the page as shown below.
<script src="/Content/JQueryTools/LODOP/CheckActivX.js"></script><script type="text/javascript">var LODOP; //Declare as global variable function Preview() {//Print preview LODOP = getLodop();LODOP.PRINT_INITA(-1, -1, 824, 1129, "Way bill set");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, "Way bill set");CreateLicenseData();LODOP.PRINT_SETUP();};function Design() {//Print design LODOP = getLodop();LODOP.PRINT_INITA(-1, -1, 824, 1129, "Waybox Set");CreateLicenseData();LODOP.PRINT_DESIGN();};function CreateLicenseData() { if (printID != undefined && printID != '') {//Use synchronization method to make the linked control display normally $.ajaxSettings.async = false;//First first the user sends an asynchronous request to implement the method $.getJSON("/BillDetail/FindByID?id=" + printID, function (info) {LODOP.ADD_PRINT_SETUP_BKIMG("<img src='/Content/Template/Blank Set Template.png'//");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(78, 441, 262, 56, "128C", info.FenyunDanhao);LODOP.ADD_PRINT_BARCODE(684, 441, 262, 56, "128C", info.FenyunDanhao);LODOP.ADD_PRINT_TEXT(186, 287, 277, 39, info.Shou_Com);LODOP.SET_PRINT_STYLEA(0, "FontSize", 12);LODOP.ADD_PRINT_TEXT(236, 378, 186, 28, info.Shou_Name);LODOP.SET_PRINT_STYLEA(0, "FontSize", 12);LODOP.ADD_PRINT_TEXT(276, 283, 284, 67, info.Shou_Dizhi);LODOP.SET_PRINT_STYLEA(0, "FontSize", 12);LODOP.ADD_PRINT_TEXT(362, 306, 254, 30, info.Shou_Phone);LODOP.SET_PRINT_STYLEA(0, "FontSize", 12);LODOP.ADD_PRINT_TEXT(404, 319, 51, 30, info.Jianshu);LODOP.SET_PRINT_STYLEA(0, "FontSize", 12);LODOP.ADD_PRINT_TEXT(404, 319, 51, 30, info.Jianshu);LODOP.SET_PRINT_STYLEA(0, "FontSize", 12);LODOP.ADD_PRINT_TEXT(400, 476, 95, 31, info.Zhongliang);LODOP.SET_PRINT_STYLEA(0, "FontSize", 12);LODOP.ADD_PRINT_TEXT(187, 33, 227, 39, info.Fa_Gongsi);LODOP.SET_PRINT_STYLEA(0, "FontSize", 12);LODOP.ADD_PRINT_TEXT(277, 33, 230, 65, info.Fa_Dizhi);LODOP.SET_PRINT_STYLEA(0, "FontSize", 12);LODOP.ADD_PRINT_TEXT(364, 37, 227, 25, info.Fa_Phone);LODOP.SET_PRINT_STYLEA(0, "FontSize", 12);LODOP.ADD_PRINT_TEXT(410, 37, 226, 26, info.Pinming);LODOP.SET_PRINT_STYLEA(0, "FontSize", 12);LODOP.ADD_PRINT_TEXT(410, 37, 226, 26, info.Pinming);LODOP.SET_PRINT_STYLEA(0, "FontSize", 12);LODOP.ADD_PRINT_TEXT(803, 34, 234, 39, info.Fa_Gongsi);LODOP.SET_PRINT_STYLEA(0, "FontSize", 12);LODOP.ADD_PRINT_TEXT(895, 32, 238, 66, info.Fa_Dizhi);LODOP.SET_PRINT_STYLEA(0, "FontSize", 12);LODOP.ADD_PRINT_TEXT(979, 33, 234, 25, info.Fa_Phone);LODOP.SET_PRINT_STYLEA(0, "FontSize", 12);LODOP.ADD_PRINT_TEXT(1024, 35, 228, 25, info.Pinming);LODOP.SET_PRINT_STYLEA(0, "FontSize", 12);LODOP.ADD_PRINT_TEXT(802, 285, 287, 39, info.Shou_Com);LODOP.SET_PRINT_STYLEA(0, "FontSize", 12);LODOP.ADD_PRINT_TEXT(802, 285, 287, 39, info.Shou_Com);LODOP.SET_PRINT_STYLEA(0, "FontSize", 12);LODOP.ADD_PRINT_TEXT(849, 373, 198, 28, info.Shou_Name);LODOP.SET_PRINT_STYLEA(0, "FontSize", 12);LODOP.ADD_PRINT_TEXT(894, 285, 287, 67, info.Shou_Dizhi);LODOP.SET_PRINT_STYLEA(0, "FontSize", 12);LODOP.ADD_PRINT_TEXT(980, 287, 281, 26, info.Shou_Phone);LODOP.SET_PRINT_STYLEA(0, "FontSize", 12);LODOP.ADD_PRINT_TEXT(1021, 317, 59, 29, info.Jianshu);LODOP.SET_PRINT_STYLEA(0, "FontSize", 12);LODOP.ADD_PRINT_TEXT(1017, 477, 95, 30, 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').datagrid('getRowIndex', row);printID = row.ID;Preview();}else {$.messager.alert("Tip", "Please select a record");}}//Batch Print function BatchPrint() {//Get IDvar rows = $("#gridDetail").datagrid("getSelections");if (rows.length >= 1) {//Then confirm that the information of sending the asynchronous request is sent to the background to delete the data $.messager.confirm("Batch Print Confirm", "Do you confirm that the selected record is printed in batches?", 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 batches");}}//Print maintenance function PrintSetup() {var row = $("#gridDetail").datagrid("getSelected");if (row) {var index = $('#gridDetail').datagrid('getRowIndex', row);printID = row.ID;Setup();}}</script>In this printing interface, the QR code printing operation is also used, which is very convenient to directly read using the barcode gun, as follows:
LODOP.ADD_PRINT_BARCODE(78, 441, 262, 56, "128C", info.FenyunDanhao);LODOP.ADD_PRINT_BARCODE(684, 441, 262, 56, "128C", info.FenyunDanhao);
Then set the printing operation function button in the main page for processing. The following is our EasyUI-based web framework interface effect.
The print preview interface is shown below. When actually printing, we can set not to print the background image.
If it is regular printing, then their interface is very close to the content of the page we see, as shown below.
The reference code is shown below.
@*Add support for LODOP control*@<script type="text/javascript">var LODOP; //Declare 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 printing maintenance CreateLicenseData();LODOP.PRINT_SETUP();};function Design() {//Original printing 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:#FFFFE;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(20, 40, 610, 900, strFormHtml);LODOP.PREVIEW();}function SaveAs() {var id = $('#ID2').val();window.open('/Information/ExportWordById?id=' + id );}</script>