ในกรอบการพัฒนาเว็บ MVC4+ EasyUI ล่าสุดฉันได้รวมโมดูลเกี่ยวกับการประมวลผลใบปลิวการช็อปปิ้งออนไลน์ซึ่งรวมการดำเนินงานของโมดูลต่างๆเช่นคู่มือการสั่งซื้อลูกค้า มันเกี่ยวข้องกับชุดใบปลิวบางชุด อย่างไรก็ตามเนื่องจาก Lodop ไม่สามารถใช้งานได้กับ Chrome และเบราว์เซอร์อื่น ๆ มาก่อนฉันเคยต้องการยกเลิกกระบวนการพิมพ์ของการควบคุมนี้ อย่างไรก็ตามพวกเขาเปิดตัว "การควบคุมการพิมพ์คลาวด์ C-Lodop" ในเวลาที่เหมาะสมและเกือบจะเข้ากันได้กับอินเทอร์เฟซก่อนหน้านี้ ดังนั้นการควบคุมนี้ยังคงใช้ในกรอบสำหรับการประมวลผลการพิมพ์ที่เกี่ยวข้องรวมถึงชุดข้อมูลการพิมพ์แบบดั้งเดิมและชุดข้อมูล
1. การติดตั้งตัวควบคุม
การควบคุมคลาวด์นี้ C-Lodop (http://www.lodop.net/) ได้รับการติดตั้งจริงในเครื่องและบริการที่อยู่อาศัยให้บริการ JS อินเทอร์เฟซหลังจากการติดตั้งเริ่มต้นหลังจากโปรแกรมเริ่มต้นดังนี้
วิธีการให้บริการ JS ผ่านเซิร์ฟเวอร์นี้ดีกว่าวิธีการปลั๊กอินมาก หลังจากทดสอบเบราว์เซอร์ Chrome คุณสามารถพิมพ์ได้อย่างราบรื่น วิธีปลั๊กอิน Lodop ดั้งเดิมไม่เข้ากัน
ด้วยรหัสการเริ่มต้น JS ของตนเองเราสามารถเข้าใจได้ว่าการควบคุมในปัจจุบันใช้วิธีการที่ไม่ใช่ plugin เพื่อประมวลผลการดำเนินการพิมพ์
// ให้เบราว์เซอร์คอมพิวเตอร์เครื่องอื่นพิมพ์ผ่าน (ตัวอย่างที่เกี่ยวข้อง): var script = document.createElement ("script"); script.src = "/clodopfuncs.js";var head = document.head || document.getElementByTagname ("head") [0] || document.documentelement; head.insertbefore (สคริปต์, head.firstchild); // ให้พิมพ์เบราว์เซอร์ดั้งเดิม (ต้องการมากขึ้น): script = document.createElement ("script"); script.src = "http: // localhost: 8000/clodopfuncs.js? document.getElementByTagname ("head") [0] || document.documentelement; head.insertbefore (สคริปต์, head.firstchild); // พอร์ตหลังการเติมของเบราว์เซอร์ 8001 (วิธีการนี้อาจทำให้เกิดข้อผิดพลาดและละเว้นมัน): script = document.createElement ("script"); script.src = "http: // localhost: 8001/clodopfuncs. document.getElementByTagname ("head") [0] || document.documentelement; head.insertbefore (สคริปต์, head.firstchild);ตัวอย่างอย่างเป็นทางการจัดเตรียมไฟล์ lodopfuncs.js เพื่อสร้างตัวควบคุมการพิมพ์โดยที่ฟังก์ชั่น getLodop ถูกกำหนดไว้ในไฟล์ lodopfuncs.js เพื่อรับวัตถุควบคุมการพิมพ์
ตรวจสอบว่ามีการติดตั้งตัวควบคุมการพิมพ์คลาวด์หรือไม่ รหัส JS สำหรับการตรวจสอบว่าการติดตั้งตัวควบคุมการพิมพ์คลาวด์นั้นมีดังนี้หรือไม่
<script language = "javascript" type = "text/javaScript"> ฟังก์ชั่น checkisInstall () {ลอง {var lodop = getLoDop (); if (lodop.version) {if (lodop.cversion) การแจ้งเตือน ("ปัจจุบันการพิมพ์เมฆ C-lodop มีให้!/n c-lodop เวอร์ชัน:"+lodop.cversion+"(รวมถึง lodop"+lodop.version+")"); ElseAlert ("Lodop Control ได้รับการติดตั้งเรียบร้อยแล้วในเครื่องนี้!/n หมายเลขเวอร์ชัน:"+lodop.version); };} catch (err) {}}; </script>2. การใช้ตัวควบคุมการพิมพ์คลาวด์ C-Lodop
การควบคุมนี้สอดคล้องกับการใช้ Lodop ดั้งเดิม คุณสามารถใช้วิธีการพิมพ์ล่าสุดโดยตรงโดยไม่ต้องแก้ไขรหัสต้นฉบับ มันดีมาก เกี่ยวกับการใช้การควบคุมนี้ฉันได้แนะนำกระบวนการใช้งานที่เกี่ยวข้องมากมายมาก่อน
ตัวอย่างเช่นใน Winform กรณีของการใช้แพ็คเกจหน้าเว็บเพื่อสร้างเอกสาร "สรุปวิธีการสร้างเนื้อหาหลายวิธีตาม nvelocity"
เช่นเดียวกับ "การใช้งานโซลูชันการพิมพ์เว็บสำหรับการตั้งค่าเอกสาร" บนหน้าเว็บและ "รายงานการพิมพ์รายงานทั่วไปของโซลูชันการพิมพ์เว็บสำหรับการพิมพ์เว็บ" การใช้และการทำงานของการควบคุมได้รับการแนะนำอย่างละเอียด
การควบคุมนี้ให้รายละเอียดที่หลากหลาย (http://www.lodop.net/demo.html) ซึ่งสามารถใช้ในการอ้างอิง
ดังที่ได้กล่าวไว้ก่อนหน้านี้ฉันยังคงใช้การควบคุมนี้เพื่อประมวลผลการประมวลผลการช็อปปิ้งออนไลน์ในกรอบเช่นเราจำเป็นต้องใช้เนื้อหาส่วนต่อประสานเช่นนี้
เราได้ออกแบบเนื้อหาของหน้าดังที่แสดงด้านล่าง
สำหรับเนื้อหาที่ออกแบบเราสามารถแปลงเป็นรหัส JS ภายในหน้าดังแสดงด้านล่าง
<script src = "/content/jQueryTools/lodop/checkactivx.js"> </script> <script type = "text/javascript"> var lodop; // ประกาศเป็นฟังก์ชั่นตัวแปรทั่วโลก () {// พิมพ์พรีวิว lodop = getLodop (); lodop.print_inita (-1, -1, 824, 1129, "Way Bill Set"); createlicensedata (); lodop.set_preview_window (2, 0, 800 0, 0, "a4"); lodop.preview ();}; การตั้งค่าฟังก์ชั่น () {// การบำรุงรักษาพิมพ์ lodop = getLodop (); lodop.print_inita (-1, -1, 824, 1129, "Way Bill Set"); createlicensedata () getLodop (); lodop.print_inita (-1, -1, 824, 1129, "set waybox"); createlicensedata (); lodop.print_design ();}; ฟังก์ชั่น createlicensedata () $ .ajaxsettings.async = false; // ก่อนครั้งแรกผู้ใช้ส่งคำขอแบบอะซิงโครนัสเพื่อใช้วิธีการ $ .getJson ("/billdetail/findById? id =" + printId, ฟังก์ชั่น (ข้อมูล) {lodop.add_print_setup_bkimg template.png '// "); lodop.set_show_mode (" bkimg_in_preview ", true); // ตัวอย่างมีพื้นหลัง lodop.set_show_mode (" bkimg_print ", true); info.fenyundanhao); lodop.add_print_barcode (684, 441, 262, 56, "128c", info.fenyundanhao); lodop.add_print_text (186, 287, 277, 39, info.shou_com); 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_dize); 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); 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. 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 "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, 26, 26, 26, 26, 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.fa.fa_gongsi); 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, 25, 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); 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); 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 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 12);});}} // preview preview var printid; ฟังก์ชั่น printdetail () {var row = $ ("#griddetail"). dataGrid ("getSelected"); ถ้า (แถว) {var index = $ ('#griddetail') {$ .messager.alert ("เคล็ดลับ", "โปรดเลือกบันทึก");}} // ฟังก์ชั่นการพิมพ์แบทช์ batchprint () {// รับ rows idvar = $ ("#griddetail") dataGrid ("getSelections") $ .Messager.Confirm ("การยืนยันการพิมพ์แบบแบตช์", "คุณยืนยันว่าบันทึกที่เลือกนั้นพิมพ์เป็นแบทช์หรือไม่", ฟังก์ชั่น (การกระทำ) {ถ้า (การกระทำ) {สำหรับ (var i = 0; i <rows.length; i ++) {lodop = getLoDop (); lodop.print_ "A4"); printId = rows [i] .id; createlicensedata (); lodop.print ();}}});} else {$ .messager.alert ("พรอมต์", "โปรดเลือกข้อมูลที่คุณต้องการพิมพ์ใน batches"); $ ("#griddetail"). dataGrid ("getSelected"); ถ้า (แถว) {var index = $ ('#griddetail'). dataGrid ('getRowindex', แถว); printId = row.id; setup ();}} </script>ในอินเทอร์เฟซการพิมพ์นี้ยังใช้การดำเนินการพิมพ์รหัส QR ซึ่งสะดวกมากในการอ่านโดยตรงโดยใช้ปืนบาร์โค้ดดังต่อไปนี้:
lodop.add_print_barcode (78, 441, 262, 56, "128c", info.fenyundanhao); lodop.add_print_barcode (684, 441, 262, 56, "128c", info.fenyundanhao);
จากนั้นตั้งค่าปุ่มฟังก์ชั่นการพิมพ์ในหน้าหลักสำหรับการประมวลผล ต่อไปนี้เป็นเอฟเฟกต์อินเตอร์เฟส Web Framework ที่ใช้ EasyUI ของเรา
อินเทอร์เฟซตัวอย่างการพิมพ์แสดงอยู่ด้านล่าง เมื่อพิมพ์จริงเราสามารถตั้งค่าไม่ให้พิมพ์ภาพพื้นหลัง
หากเป็นการพิมพ์ปกติอินเทอร์เฟซของพวกเขาจะอยู่ใกล้กับเนื้อหาของหน้าเว็บที่เราเห็นดังที่แสดงด้านล่าง
รหัสอ้างอิงแสดงด้านล่าง
@*เพิ่มการสนับสนุนสำหรับ Lodop Control*@<script type = "text/javascript"> var lodop; // ประกาศเป็นฟังก์ชั่นตัวแปรส่วนกลาง () {// ต้นฉบับพิมพ์ createlicensedata (); lodop.set_show_mode ("preview_in_browse", 1); lodop.preview ();}; ฟังก์ชั่น printa () {createLicensedata () createlicensedata (); lodop.print_setup ();}; ฟังก์ชั่นการออกแบบ () {// การออกแบบการพิมพ์ต้นฉบับ createlicensedata (); lodop.print_design ();}; ฟังก์ชั่น createlicensedata () {lodop = getLodop (); type = 'text/css' rel = 'stylesheet' href = '/เนื้อหา/ธีม/default/style.css'/> <style> <!-ตาราง {border: 1; พื้นหลัง-สี: #cbcbcc} td {พื้นหลัง-สี: #ffffe; พื้นหลังสี:#F1F1F3; Padding-Left: 5px; Border: 1}-> </style> "; var strformhtml = strbodystyle +" <body> " + document.getElementByid (" printcontent "). innerhtml +" </body> strformhtml); lodop.preview ();} ฟังก์ชั่น saveas () {var id = $ ('#id2'). val (); window.open ('/ข้อมูล/exportwordById? id =' + id);} </script>