Uso de controles de impresión en la nube C-LODOP para imprimir páginas o establecer información de la hoja de ruta de la declaración de aduanas basada en MVC+EasyUI

En el último marco de desarrollo web MVC4+ EasyUI, he integrado un módulo en el procesamiento de la campanilla de compras en línea, que integra las operaciones de varios módulos, como la Guía de pedidos del cliente, la fusión de Way Bill, el escaneo de llegada, la deducción, el almacén y la consulta. Implica algunos conjuntos de folleto. Sin embargo, dado que LODOP no era compatible con Chrome y otros navegadores antes, una vez quería renunciar al proceso de impresión de este control. Sin embargo, lanzaron el "control de impresión en la nube C-Lodop" de manera oportuna, y es casi completamente compatible con la interfaz anterior. Por lo tanto, este control continúa utilizándose en el marco para el procesamiento de impresión relacionado, incluidas las impresiones convencionales y los conjuntos de información de la hoja de ruta.

1. Instalación de controles

Este control de nube C-Lodop (http://www.lodop.net/) en realidad está instalado localmente y el servicio de residente proporciona servicios JS. La interfaz después de la instalación se inicia después de que el programa se inicia de la siguiente manera.

Esta forma de proporcionar servicios JS a través del servidor es mucho mejor que los métodos de enchufe. Después de probar el navegador Chrome, puede imprimir sin problemas. El método original del complemento LODOP es incompatible.

A través de su propio código de inicialización JS, podemos entender que el control actualmente utiliza un método que no es de plugin para procesar las operaciones de impresión.

 // deja que otros navegadores de computadora impriman a través de locales (ejemplo aplicable): var script = document.createElement ("script"); script.src = "/clodopfunc.js";var head = document.head || document.getElementsBytagName ("Head") [0] || document.documentelement; head.insertbefore (script, head.firstchild); // deja que el navegador nativo imprima (más preferido): script = document.createElement ("script"); script.src = "http: // localhost: 8000/clodopfunc.js? priority = 1"; var flow = document.head || document.getElementsBytagName ("Head") [0] || document.documentElement; head.insertbefore (script, head.firstchild); // El puerto 8001 posterior al navegador nativo (este enfoque puede causar errores e ignorarlo): script = document.createElement ("script"); script.src = "http: // localhost: 8001/clodopfunc.js? Priority = 2"; Var head = documentsad | document.getElementsBytagName ("Head") [0] || document.documentElement; head.insertbefore (script, head.firstchild);

El ejemplo oficial proporciona el archivo LodopFunc.js para construir un control de impresión, donde la función getLodop se define en el archivo lodopFunc.js para obtener el objeto de control de impresión.

Verifique si el control de impresión en la nube está instalado. El código JS para verificar si el control de impresión en la nube está instalado es el siguiente.

 <script language = "javaScript" type = "text/javaScript"> función checkisInstall () {try {var lodop = getLodop (); if (lodop.version) {if (lodop.cversion) alerta ("Actualmente C-Lodop Cloud Impress está disponible!/N Versión C-Lodop:"+Lodop.Cversion+"(incluye Lodop"+Lodop.version+")"); Elsealert ("El control LODOP se ha instalado correctamente en esta máquina!/N Número de versión:"+lodop.version); };} catch (err) {}}; </script>

2. Uso del control de impresión en la nube C-Lodop

Este control es consistente con el uso del LOOP original. Puede usar el último método de impresión directamente sin modificar el código original. Es muy bueno. Con respecto al uso de este control, he introducido muchos procesos de uso relacionados antes.

Por ejemplo, en WinForm, un caso de uso de paquetes de página web para hacer documentos, "Resumen de varios métodos de generación de contenido basados en Nvelocity".

Además de la "implementación de soluciones de impresión web para la configuración de documentos" en la página web, y la "impresión de informes ordinarios de soluciones de impresión web para la impresión web", el uso y el funcionamiento de los controles se introducen de una manera muy detallada.

Este control proporciona una variedad de casos detallados (http://www.lodop.net/demo.html), que se puede usar en referencia.

Como se mencionó anteriormente, continué utilizando este control para procesar el procesamiento de facturas de compras en línea en el marco, por ejemplo, necesitamos aplicar contenido de interfaz como este.

Hemos diseñado el contenido de la página como se muestra a continuación.

Para el contenido diseñado, podemos convertirlos en código JS dentro de la página como se muestra a continuación.

 <script src = "/content/jQuerytools/lodop/checkActivx.js"> </script> <script type = "text/javaScript"> var lodop; // Declarar como la función de la variable global Preview () {// Imprima la vista previa lodop = getLodop (); lodop.print_inita (-1, -1, 824, 1129, "Way Bill Set"); CreateLiceSedata (); Lodop.set_preview_window (2, 0, 800, 600 ","); Lodop.set_PrepageSEATS "A4"); lodop.preview ();}; function setup () {// imprime mantenimiento lodop = getLodop (); lodop.print_inita (-1, -1, 824, 1129, "Way Bill Set"); CreateLiceSedata (); LOOP.print_setup ();}; Design de funciones () {// Print Design Set "); getLodop (); lodop.print_inita (-1, -1, 824, 1129, "Waybox set"); createelicensedata (); lodop.print_design ();}; function createelicensedata () {if (printid! = Undefined && imprentid! = '') {// use el método de sincronización para hacer el control de enlace normalmente $ .JAJAXSETTINGS.async = false; // primero el usuario envía una solicitud asíncrona para implementar el método $ .getjson ("/billDetail/findByid? id =" + printid, function (info) {loDOP.add_print_setup_bkimg ("<img src = '/content/platate/set en blanco Template.png '// "); lodop.set_show_mode (" bkimg_in_preview ", true); // La vista previa contiene antecedentes lodop.set_show_mode (" bkimg_print ", true); // Contenido imprimido contiene antecedentes. 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, ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",". 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_styx. 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_styx. 12);});}} // Imprima la vista previa var printid; function printDetail () {var row = $ ("#gridDetail"). DataGrid ("getSelected"); if (fila) {var index = $ ('#gridDetail'). DataGid ('getRowindex', row); printid = row.id; previsual ();} {$ .Messessager.alert ("TIP", "Seleccione un registro");}} // Función de impresión de lotes BatchPrint () {// Get Idvar Rows = $ ("#GridDetail"). $ .messager.confirm ("batch print confirmar", "¿Confirma que el registro seleccionado se imprime en lotes?", function (action) {if (action) {for (var i = 0; i <rows.length; i ++) {lodop = getLodop (); lodop.Print_Init (""); LOOP.set_PRINT_Pagesiz filas [i] .id; createLiceSedata (); lodop.print ();}}});} else {$ .messsager.alert ("indicador", "Seleccione los datos que desea imprimir en lotes");}} // Impresión imprime imprimir () {var fila = $ ("#gridDetail"). datagrid (datagrid (datagrid ("getSelected"; " = $ ('#gridDetail'). dataGrid ('getrowindex', fila); printid = row.id; setup ();}} </script>

En esta interfaz de impresión, también se utiliza la operación de impresión del código QR, que es muy conveniente para leer directamente utilizando la pistola de código de barras, de la siguiente manera:

 Lodop.add_print_barcode (78, 441, 262, 56, "128c", info.fenyundanhao); lodop.add_print_barcode (684, 441, 262, 56, "128c", info.fenyundanhao);

Luego establezca el botón de función de operación de impresión en la página principal para su procesamiento. El siguiente es nuestro efecto de interfaz de marco web basado en EasyUI.

La interfaz de vista previa de impresión se muestra a continuación. Al imprimir realmente, podemos configurar no imprimir la imagen de fondo.

Si es una impresión regular, entonces su interfaz está muy cerca del contenido de la página que vemos, como se muestra a continuación.

El código de referencia se muestra a continuación.

 @*Agregar soporte para el control LODOP*@<script type = "text/javaScript"> var lodop; // Declarar como la función variable global Preview () {// Print original CreateLiceSedata (); lodop.set_show_mode ("Preview_in_browse", 1); lodop.preview ();}; function printA () {createelicensedata (); lodop.printa ();; CreateLiceSedata (); lodop.print_setup ();}; function design () {// Diseño de impresión original createelicensedata (); lodop.print_design ();}; functeleCensedata () {lodop = getLodop (); lodop.print_init ("políticas y regulaciones"); var strbodystyle = "<link/'Tight/' '' Tyexs rel = 'stylesheet' href = '/content/themes/default/style.css'/> <syle> <!-Table {border: 1; Color de fondo: #cbcbcc} td {en segundo plano: #ffffe; border: 1} th {de fondo:#f1f1f3; padding-umba: 5px; border: 1}; strformhtml = strbystyle + "<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>