Dalam kerangka pengembangan web MVC4+ Easyui terbaru, saya telah mengintegrasikan modul pada pemrosesan waybill belanja online, yang mengintegrasikan operasi berbagai modul seperti Panduan Pesanan Pelanggan, Penggabungan Waybill, Pemindaian Kedatangan, Pengurangan, Gudang, dan Permintaan. Ini melibatkan beberapa set waybill. Namun, karena Lodop tidak kompatibel dengan Chrome dan browser lainnya sebelumnya, saya pernah ingin menyerahkan proses pencetakan kontrol ini. Namun, mereka meluncurkan "Cloud Printing Control C-Lodop" tepat waktu, dan hampir sepenuhnya kompatibel dengan antarmuka sebelumnya. Oleh karena itu, kontrol ini terus digunakan dalam kerangka kerja untuk pemrosesan pencetakan terkait, termasuk pencetakan konvensional dan set informasi waybill.
1. Pemasangan kontrol
Cloud Control C-Lodop ini (http://www.lodop.net/) sebenarnya diinstal secara lokal dan layanan residen menyediakan layanan JS. Antarmuka setelah instalasi dimulai setelah program dimulai sebagai berikut.
Cara ini menyediakan layanan JS melalui server jauh lebih baik daripada metode plug-in. Setelah menguji browser chrome, Anda dapat mencetak dengan lancar. Metode plug-in lodop asli tidak kompatibel.
Melalui kode inisialisasi JS mereka sendiri, kami dapat memahami bahwa kontrol saat ini menggunakan metode non-plugin untuk memproses operasi pencetakan.
// Biarkan browser komputer lain mencetak melalui lokal (contoh yang berlaku): var script = document.createelement ("script"); script.src = "/clodopfuncs.js";var head = document.head || document.getElementsbyTagname ("head") [0] || Document.DocumentElement; head.insertBefore (skrip, head.firstchild); // Biarkan browser asli mencetak (lebih disukai): script = document.createElement ("Script"); skrip.src = "http: // localhost: 8000/clodopfuncs.js? prioritas = 1"; var head = document = document = 8000/clodopfuncs.js? prioritas = 1 "; document = document = document = document = document | document.getElementsbyTagname ("head") [0] || Document.documentElement; head.insertbefore (skrip, head.firstchild); // port pasca pelengkap browser asli 8001 (pendekatan ini dapat menyebabkan kesalahan dan mengabaikannya): script = document.createElement ("script"); script.src = "http: // localhost: 8001/clodopePfor = 2; http: // localhost: 8001/clodopePfor = 2; http://localhost: 8001/clodopePfor = 2; document = 2; localHost: 8001/clodOpePfor = 2; http://localhost: 8001/clodopePf. document.getElementsbyTagname ("head") [0] || Document.DocumentElement; head.insertbefore (skrip, head.firstchild);Contoh resmi menyediakan file LODOPFUNCS.JS untuk membangun kontrol cetak, di mana fungsi GetLODOP didefinisikan dalam file lodopfuncs.js untuk mendapatkan objek kontrol cetak.
Periksa apakah kontrol cloud cetak diinstal. Kode JS untuk memeriksa apakah kontrol cloud cetak diinstal adalah sebagai berikut.
<script language = "javascript" type = "text/javascript"> function checkisInstall () {coba {var lodop = getLodop (); if (lodop.version) {if (lodop.cversion) peringatan ("Saat ini cloud cloud cloud tersedia!/n C-Lodop versi:"+lodop.cversion+"(termasuk lodop"+lodop.version+")"); Elsealert ("Kontrol Lodop telah berhasil diinstal di mesin ini!/N Versi Nomor:"+Lodop.Version); };} catch (err) {}}; </script>2. Penggunaan kontrol cloud cloud C-Lodop
Kontrol ini konsisten dengan penggunaan lodop asli. Anda dapat menggunakan metode pencetakan terbaru secara langsung tanpa memodifikasi kode asli. Itu sangat bagus. Mengenai penggunaan kontrol ini, saya telah memperkenalkan banyak proses penggunaan terkait sebelumnya.
Misalnya, di WinForm, kasus menggunakan paket halaman web untuk membuat dokumen, "Ringkasan beberapa metode pembuatan konten berdasarkan nvelocity".
Serta "implementasi solusi pencetakan web untuk pengaturan dokumen" di halaman web, dan "pencetakan laporan biasa dari solusi pencetakan web untuk pencetakan web", penggunaan dan pengoperasian kontrol diperkenalkan dengan cara yang sangat rinci.
Kontrol ini menyediakan berbagai kasus terperinci (http://www.lodop.net/demo.html), yang dapat digunakan dalam referensi.
Seperti yang disebutkan sebelumnya, saya terus menggunakan kontrol ini untuk memproses pemrosesan tagihan belanja online dalam kerangka kerja, misalnya, kita perlu menerapkan konten antarmuka seperti ini.
Kami telah merancang konten halaman seperti yang ditunjukkan di bawah ini.
Untuk konten yang dirancang, kami dapat mengubahnya menjadi kode JS di dalam halaman seperti yang ditunjukkan di bawah ini.
<skrip src = "/content/jQueryTools/lodop/checkActivx.js"> </script> <script type = "text/javascript"> var lodop; // Deklarasikan sebagai Fungsi Variabel Global Pratinjau () {// Cetak Pratinjau Lodop = getLoDop (); lodop.print_inita (-1, -1, 824, 1129, "set tagihan"); createLicensedata (); lodop.set_preview_window (2, 0, 800, 800); lodop.set.set_preview_window (2, 0, 0, 800, "" ""; 0, 0, "a4"); lodop.preview ();}; function setup () {// cetak pemeliharaan lodop = getLodop (); lodop.print_inita (-1, -1, 824, 1129, "Way Bill set"); createLicensEdata (); lodop.print_print_cet () (); function;); function;) (); function {); function {); function (); function {); lodop. getLoDop (); lodop.print_inita (-1, -1, 824, 1129, "set waybox"); createLicensedata (); lodop.print_design ();}; function createLicensedata () {if (printid! = tidak didefinisikan && printid! = '' $ .AjaxSettings.async = false; // Pertama pertama pengguna mengirimkan permintaan asinkron untuk mengimplementasikan metode $ .getjson ("/billdetail/findbyid? id =" + printid, function (info) {lodop.add_print_setup_bkimg ("<img src = '/content/content/contain/content/plintup_bkimg (" <img src ='/content/content/content/content/content/content/content/contain/content/contain/content/contain/templat/templprint_bkimg ("<img src = ' Template.png '// "); lodop.set_show_mode (" bkimg_in_preview ", true); // preview berisi latar belakang lodop.set_show_mode (" bkimg_print ", true); // konten cetak berisi latar belakang lodop.add_print_barcode (78," 262, 28, 28, 28, 28, 28, 28, "28," 28, "28," 28, "28," 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. 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.sou_dizhlize_dizhlize_text (276, 283, 284, 67, info.sou_dizhlize_dizhlize_text (276, 283, 284, 67, info.sou_dizhlize_dizhliz "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.jianshians. "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, 31, Info.ZHoAaa. "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, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 65, 230, 65, 65, 65, 65, 65, 65, 65, 65 yang ” 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.set_print_stylea (0, "fontSize", 12); 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_stlea (0, "fontsize", fontsize ", lodop.set_print_stlea (0," fontsize ", fontsize", 12) 234, 25, info.fa_phone); lodop.set_print_stylea (0, "fontsize", 12); lodop.add_print_text (1024, 35, 228, 25, info.pinming); lodop.set_stylea (0, "fontsize", 12); lodop.set_stylea (0, "fontize", 12); lodop.set_stylea (0, "fontsize", 12); lodop.set_stylea (0, "fontsize", 12); lodop.set_stylea (0, "fontsize", 12); lodop.set_stylea (0, "fontsize", 12); lodop.set_stylea (0, "fontSize", 12); 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.set_stylea (0, "fontsize", 12); 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_stlea (0, "fontsize", fontsize ", lodop.set_print_stlea (0," fontsize ", fontsize", lodop.set_print_stlea (0, "fontsize", fontsize ", lodop.set_print_stlea (0," fontsize ", fontsize", 2); 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_stlea (0, "fontsize", 12); lodop.set_print_stlea (0, "" fontsize ", 12); lodop.set_print_stlea (0," "fontsize", 12); lodop.set_print_stlea (0, "" fontsize ", 12); lodop.set_stlea (0," "fontSize", 12); 95, 30, info.zhongliang); lodop.set_print_stylea (0, "fontsize", 12);});}} // preview prinsip var printid; fungsi printDetail () {var row = $ ("#griddetail"). DataGrid ("getselected"); $ ('#griddetail'). datagrid ('getRowIndex', row); printid = row.id; preview ();} else {$ .messager.alert ("tip", "Harap pilih rekaman");} // function cetak Batchprint () {// dapatkan idvar baris = $ ("#") (") (") {// dapatkan idvar baris = $ $ ("#") (") (") {//dapatkan idvar baris = $ ("#") (") (") {//dapatkan idvar baris = $ $ ("#") (") (") {//get IDVAR baris = $ $ ("") (") (") (") {//dapatkan idvar baris = $ $ ("#") (") (") {//get IDVAR baris = $ $ (" (Baris.Length> = 1) {// Kemudian konfirmasikan bahwa informasi pengiriman permintaan asinkron dikirim ke latar belakang untuk menghapus data $ .messager.confirm ("Batch Print Confirm", "Apakah Anda mengkonfirmasi bahwa catatan yang dipilih dicetak dalam batches?", Fungsi (Action) {if (Action) {untuk (var i = 0; getLodop (); lodop.print_init (""); lodop.set_print_pagesize (1, 0, 0, "a4"); printid = baris [i] .id; createLicensedata (); lodop.print ();}}});} lain {$. batches ");}} // cetak fungsi pemeliharaan printsetup () {var row = $ ("#griddetail "). datagrid (" getSelected "); if (row) {var index = $ ('#griddetail'). datagrid ('getrowIndex', row); printid = row.id; setup;Dalam antarmuka pencetakan ini, operasi pencetakan kode QR juga digunakan, yang sangat nyaman untuk dibaca langsung menggunakan senjata barcode, sebagai berikut:
Lodop.add_print_barcode (78, 441, 262, 56, "128c", info.fenyundanhao); lodop.add_print_barcode (684, 441, 262, 56, "128c", info.fenyundanhao);
Kemudian atur tombol Fungsi Operasi Pencetakan di halaman utama untuk diproses. Berikut ini adalah efek antarmuka kerangka kerja web berbasis easyui kami.
Antarmuka pratinjau cetak ditunjukkan di bawah ini. Saat benar -benar mencetak, kita dapat mengatur untuk tidak mencetak gambar latar belakang.
Jika itu adalah pencetakan biasa, maka antarmuka mereka sangat dekat dengan konten halaman yang kita lihat, seperti yang ditunjukkan di bawah ini.
Kode referensi ditampilkan di bawah ini.
@*Tambahkan dukungan untuk kontrol lodop*@<type skrip = "Text/JavaScript"> var Lodop; // Deklarasikan sebagai Pratinjau Fungsi Variabel Global () {// CROPELICENSEData CROFF asli (); lodop.set_show_mode ("Preview_in_browse", 1); lodop.preview ();}; function printa () {createLicensEdata (); lodop.prinna (); found {createLicensEdata (); lodop.prinna (); fungsi (); function {); function {); function (); function (); function (); function (); function {); function {); function {); function {); function (); function (); function (); function (); function {); function (); CreateLicensEdata (); lodop.print_setup ();}; function design () {// desain pencetakan asli createLicensedata (); lodop.print_design ();}; function createLicensEdata () {lodop = getLodop (); lodop.print_init_pintata () {lodop = getLodop (); lodop.print_init_iny (lodop = getLodop (); lodop.print_print_pintata (""); type = 'text/css' rel = 'stylesheet' href = '/content/tema/default/style.css'/> <style> <!-Table {border: 1; latar belakang: #cbcbcc} td {latar belakang-color: #ffffe; border: 1; Latar Belakang-Color:#f1f1f3; padding-left: 5px; Border: 1}-> </tyle> "; var strformHtml = strbodystyle +" <body> " + document.geteLementById (" printContent "). Innerhtml +" </body> "; lodop.add_print _html +", 610, 610, 610, 610, 610, 610, 610, 610, 610, 610, 61. strormHtml); lodop.preview ();} function saveas () {var id = $ ('#id2'). val (); window.open ('/informasi/eksporwordById? id =' + id);} </script>