Na mais recente estrutura de desenvolvimento da Web do MVC4+ Easyui, integrou um módulo no processamento de waybill on -line, que integra as operações de vários módulos, como Guia de Ordem do Cliente, Incorporação de Waybill, Digitalização de Chegada, Dedução, armazém e consulta. Envolve alguns conjuntos de waybill. No entanto, como o LODOP não era compatível com o Chrome e outros navegadores antes, eu queria desistir do processo de impressão desse controle. No entanto, eles lançaram o "Controle de impressão em nuvem C-LODOP" em tempo hábil e é quase completamente compatível com a interface anterior. Portanto, esse controle continua sendo usado na estrutura para processamento de impressão relacionado, incluindo conjuntos de informações de impressão convencionais e Waybill.
1. Instalação de controles
Este cloud Control C-lodop (http://www.lodop.net/) é realmente instalado localmente e o serviço residente fornece serviços JS. A interface após a instalação é iniciada após o início do programa.
Essa maneira de fornecer serviços JS através do servidor é muito melhor que os métodos de plug-in. Depois de testar o navegador Chrome, você pode imprimir sem problemas. O método original do plug-in LODOP é incompatível.
Através de seu próprio código de inicialização do JS, podemos entender que o controle atualmente usa um método não plugin para processar operações de impressão.
// Deixe outros navegadores de computador imprimirem através do local (exemplo aplicável): var script = document.createElement ("script"); script.src = "/clodopfuncs.js"; document.getElementsByTagName ("Head") [0] || document.documentElement; head.insertBefore (script, head.firstchild); // Deixe o navegador nativo imprimir (mais preferido): script = document.createElement ("script"); script.src = "http: // lochost: 8000/clodopfuncs.js? document.getElementsByTagName ("Head") [0] || document.documentElement; head.insertBefore (script, head.firstchild); // porta pós-complemento do navegador nativo 8001 (essa abordagem pode causar erros e ignorá-lo): script = document.createElement ("script"); script.src = "http: // localhost: 8001/clits"; document.getElementsByTagName ("Head") [0] || document.documentElement; head.insertBefore (script, head.firstchild);O exemplo oficial fornece o arquivo lodopfuncs.js para criar um controle de impressão, onde a função getLodop é definida no arquivo lodopfuncs.js para obter o objeto de controle de impressão.
Verifique se o controle de impressão em nuvem está instalado. O código JS para verificar se o controle de impressão em nuvem está instalado é o seguinte.
<Script Language = "javascript" type = "text/javascript"> function checkInsInstall () {try {var lodOp = getLodop (); if (lodOp.version) {if (lodop.cversion) alert ("Atualmente, a impressão em nuvem C-lodop está disponível! ELSEALERT ("O controle do LODOP foi instalado com sucesso nesta máquina!/N Número da versão:"+lodop.version); };} catch (err) {}}; </script>2. Uso de controle de impressão em nuvem C-LODOP
Esse controle é consistente com o uso do LODOP original. Você pode usar o método de impressão mais recente diretamente sem modificar o código original. É muito bom. Em relação ao uso desse controle, eu já introduzi muitos processos de uso relacionados antes.
Por exemplo, no Winform, um caso de uso de pacotes de páginas da web para fazer documentos, "Resumo de vários métodos de geração de conteúdo baseados na Nvelocity".
Assim como a "implementação de soluções de impressão na web para configurações de documentos" na página da web e "impressão de relatório comum de soluções de impressão na web para impressão na web", o uso e operação dos controles são introduzidos de maneira muito detalhada.
Esse controle fornece uma variedade de casos detalhados (http://www.lodop.net/demo.html), que podem ser usados em referência.
Como mencionado anteriormente, continuei usando esse controle para processar o processamento da conta de compras on -line na estrutura, por exemplo, precisamos aplicar conteúdo de interface como esse.
Projetamos o conteúdo da página, como mostrado abaixo.
Para conteúdo projetado, podemos convertê -los em código JS dentro da página, como mostrado abaixo.
<script src = "/Content/jQueryTools/lodop/checkActivx.js"> </script> <script type = "text/javascript"> var lodop; // Declare como função variável global visualize () {// Imprimir visualização lodOP = getlodop (); lodop.print_inita (-1, -1, 824, 1129, "Way Bill Set"); CreateLicensEdata (); LodOp.Set_Preview) (2, 0, 0, 800, 600, 4, 1, LodOp.Set); "A4"); lodOp.Preview ();}; function setup () {// Imprima manutenção lodOP = getlodop (); lodOp.print_inita (-1, -1, 824, 1129, "Way Bill Set"); CreateLicENATA (); LodOp.print_Op (); getlodop (); lodop.print_inita (-1, -1, 824, 1129, "Waybox Set"); createLiceSedata (); lodOp.print_design ();}; funkelicensEdata () {if (printId! $ .ajaxSettings.async = false; // Primeiro, o usuário envia uma solicitação assíncrona para implementar o método $ .getjson ("/billdetail/findbyid? id =" + printId, function (info) {lodop.add_print_set_bkimg ("<img src = '/content/model 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); 12); lodop.add_print_text (236, 378, 186, 28, info.shou_name); lodop.set_print_stylea (0, "fontsize", 12); lodOp.add_print_text (276, 284, 284, 67, info.shou_dizhi); 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); lodd_text_text (404, 319, 51, 30, info.jianShu); lodd_set_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.zhonggliang); lodOP.Set.LOPT_TOP.STEN (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, info.fa_da_dhiz); 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.ST_TOLT.STEX.MET.STELT_TEX.MET. 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_phone); 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); lodd_text_text (802, 285, 287, 39, info. 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.St_Tert_Text (849, 373, 198, 28, informações. 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); 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); 12);});}} // Imprimir visualização var printId; function printDetail () {var row = $ ("#gridDetail"). DataGrid ("getSelected"); if (linha) {var index = $ ('#gridDetail'). Datagrid ('getRowindex', rowID; {$ .messager.alert ("TIP", "Selecione um registro");}} // Função de impressão em lote Batchprint () {// Get iDvar lobs = $ ("#gridDetail"). $.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 = linhas [i] .id; createLicensEdata (); lodOp.print ();}}});} else {$ .messager.alert ("prompt", "selecione os dados que deseja imprimir em lotes");}} // print manutenção estampsetup () {var = $ ("#("#gridd); {var index = $ ('#gridDetail'). DataGrid ('getRowIndex', linha); printid = row.id; setup ();}} </sCript>Nesta interface de impressão, também é usada a operação de impressão de código QR, que é muito conveniente para ler diretamente usando a pistola de código de barras, como segue:
Lodop.add_print_barcode (78, 441, 262, 56, "128c", info.fenyundanhao); lodop.add_print_barcode (684, 441, 262, 56, "128c", info.fendaNanhao);
Em seguida, defina o botão Função de operação de impressão na página principal para processamento. A seguir, é apresentado o nosso efeito interface da estrutura da Web baseada em easyui.
A interface de visualização de impressão é mostrada abaixo. Ao realmente imprimir, podemos definir para não imprimir a imagem de fundo.
Se for impressão regular, a interface deles estará muito próxima do conteúdo da página que vemos, como mostrado abaixo.
O código de referência é mostrado abaixo.
@*Adicione suporte para controle de alojamento*@<script type = "text/javascript"> var lodop; // Declare como a função variável global visualize () {// Original Print CreateLiCensEdata (); lodOP.Set_Show_Mode ("Visuew_in_browse", 1); lodOp.Preview ();}; manuten; function PrintA () {CreateLicEnsEdAtATA (); LodOp.printta; CreateLicensEdata (); lodOp.print_setup ();}; função design () {// design original de impressão createLicensedata (); lodop.print_design ();}; strateLiCensEdata () {lodOp = getLoDOP (); lodOp.Print_init (policies () {lodOp = getLodop (); type = 'text/css' rel = 'stylesheet' href = '/content/temas/default/style.css'/> <yled> <!-tabela {border: 1; background-color: #cbcbcc} td {background-color: #fffe; borda: 1; Background-color:#f1f1f3; preenchimento-esquerda: 5px; borda: 1}-> </style> "; var strformhtml = strbodystyle +" <body> " + document.getElementById (" PrintContent ". strformhtml); lodOp.Preview ();} função saveas () {var id = $ ('#id2').