Dans le dernier cadre de développement Web MVC4 + EasyUI, j'ai intégré un module sur le traitement des billets d'achat en ligne, qui intègre les opérations de divers modules tels que le guide de commande client, la fusion de Waybill, la numérisation d'arrivée, la déduction, l'entrepôt et la requête. Cela implique des ensembles Waybill. Cependant, comme Lodop n'était pas compatible avec Chrome et d'autres navigateurs auparavant, je voulais une fois abandonner le processus d'impression de ce contrôle. Cependant, ils ont lancé le "Cloud Printing Control C-Lodop" en temps opportun, et il est presque complètement compatible avec l'interface précédente. Par conséquent, ce contrôle continue d'être utilisé dans le cadre du traitement d'impression connexe, y compris les ensembles d'informations d'impression et de bilan conventionnels.
1. Installation de commandes
Ce contrôle Cloud C-Lodop (http://www.lodop.net/) est en fait installé localement et le service résident fournit des services JS. L'interface après l'installation a démarré après le démarrage du programme comme suit.
Cette façon de fournir des services JS via le serveur est bien meilleure que les méthodes de plug-in. Après avoir testé le navigateur Chrome, vous pouvez imprimer en douceur. La méthode du plug-in Lodop d'origine est incompatible.
Grâce à leur propre code d'initialisation JS, nous pouvons comprendre que le contrôle utilise actuellement une méthode non-plugine pour traiter les opérations d'impression.
// Laissez les autres navigateurs d'ordinateur imprimer via local (exemple applicable): var script = document.CreateElement ("script"); script.src = "/clodopfuncs.js" ;var head = document.head || document.getElementsByTagName ("Head") [0] || Document.DocumentElement; head.insertBefore (script, head.firstchild); // Laissez le navigateur natif imprimer (plus préféré): script = document.createElement ("script"); script.src = "http: // localhost: 8000 / clodopfuncs.js? document.getElementsByTagName ("Head") [0] || Document.DocumentElement; head.insertBefore (script, head.firstchild); // Port post-complément du navigateur natif 8001 (cette approche peut provoquer des erreurs et l'ignorer): script = document.CreateElement ("script"); script.src = "http: // localhost: 8001 / clodopfes.js? document.getElementsByTagName ("Head") [0] || Document.DocumentElement; head.insertFore (script, head.firstchild);L'exemple officiel fournit le fichier lodopfuncs.js pour créer un contrôle d'impression, où la fonction getlodop est définie dans le fichier lodopfuncs.js pour obtenir l'objet de contrôle d'impression.
Vérifiez si le contrôle d'impression cloud est installé. Le code JS pour vérifier si le contrôle d'impression cloud est installé est le suivant.
<script lingots = "javascript" type = "text / javascript"> function checkisInstall () {try {var lodop = getlodop (); if (Lodop.Version) {if (lodop.cversion) alert ("Actuellement, l'impression cloud c-Lodop est disponible! / N C-Lodop Version:" + Lodop.cversion + "(inclut Lodop" + Lodop.version + ")"); ElSealert ("Lodop Control a été installé avec succès dans cette machine! / N Numéro de version:" + Lodop.version); };} catch (err) {}}; </cript>2. Utilisation de la commande d'impression de nuages C-lodop
Ce contrôle est cohérent avec l'utilisation de la Lodop d'origine. Vous pouvez utiliser directement la dernière méthode d'impression sans modifier le code d'origine. C'est très bien. En ce qui concerne l'utilisation de ce contrôle, j'ai déjà introduit de nombreux processus d'utilisation connexes.
Par exemple, dans WinForm, un cas d'utilisation de packages de pages Web pour créer des documents, "Résumé de plusieurs méthodes de génération de contenu basées sur Nvelocity".
En plus de la "mise en œuvre des solutions d'impression Web pour les paramètres de documents" sur la page Web et "l'impression de rapport ordinaire des solutions d'impression Web pour l'impression Web", l'utilisation et le fonctionnement des contrôles sont introduits de manière très détaillée.
Ce contrôle fournit une variété de cas détaillés (http://www.lodop.net/demo.html), qui peuvent être utilisés en référence.
Comme mentionné précédemment, j'ai continué à utiliser ce contrôle pour traiter le traitement des factures d'achat en ligne dans le cadre, par exemple, nous devons appliquer du contenu d'interface comme celui-ci.
Nous avons conçu le contenu de la page comme indiqué ci-dessous.
Pour le contenu conçu, nous pouvons les convertir en code JS à l'intérieur de la page comme indiqué ci-dessous.
<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 ();}; fonction setup () {// imprimer la maintenance lodop = getlodop (); lodop.print_inita (-1, -1, 824, 1129, "Way bill set"); createLicensEdata (); lodop.print_setup ();}; function conception () {// imprime des design Lodop = getlodop (); lodop.print_inita (-1, -1, 824, 1129, "waybox set"); createLiceSedata (); lodop.print_design ();}; fonction createLicensEdata () {if (printId! = Undefined && pridId! = '') {// Utiliser la méthode de synthèse pour faire la voie à la liaison liée normale $ .ajaxsettings.async = false; // Tout d'abord, l'utilisateur envoie une demande asynchrone pour implémenter la méthode $ .getjson ("/ billdetail / findbyid? id =" + printId, function (info) {lodop.add_print_setUp_bKimg ("<img src = '/ contenu / template / blanc set set Template.png '// "); lodop.set_show_mode (" bKimg_in_preview ", true); // prévisual contient background lodop.set_show_mode (" bKimg_print ", true); // imprimer le contenu contient lodop.add_print_barcode (78, 441, 262, 56," 128c ", (78, 441, 262, 56," 128c ", info.fenyundanhao); lodop.add_print_barcode (684, 441, 262, 56, "128c", info.fenyundanho); lodop.add_print_text (186, 287, 277, 39, "Fontsize" ", 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_Stylelea (0, "Fontshi); Lodop.Set_Print_Print 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, "Fontsize", 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_Print_stylea (0, "Fontshi); Lodop.Set_Print_Print_Stylea (0," Fontshi); Lodop.Set_Print_Print_Stylea (0, "Fonthise" 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, "Fontsize", 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_styleaa (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.shoup 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_stylelea (0, "Fontsize", Lodop.Set_Print_Stylea (0, "Fontsize" 12);});}} // imprimer Aperçu var PrintId; fonction printdetail () {var row = $ ("# gridDetail"). DataGrid ("getSelected"); if (row) {var index = $ ('# griddetail'). {$ .messager.alert ("TIP", "Veuillez sélectionner un enregistrement");}} // Fonction d'impression de lots Batchprint () {// Get idvar Rows = $ ("# GridDetail"). DataGrid ("GetSelections"); if (Rows.Length> = 1) {// Confirmer que les informations sur l'envoi de la demande ASYNCHRON sont envoyées pour faire pour détendre l'information de l'envoi de la demande AsYnchron AsYnchron est envoyée pour les données pour de la mise pour déposer pour que les informations de l'envoi de la demande AsYnchron soient envoyées pour faire pour détendre l'information sur $.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 = lignes [i] .id; createLiceSedata (); lodop.print ();}}});} else {$ .messager.alert ("invite", "Veuillez sélectionner les données que vous souhaitez imprimer en lots");}} // imprimer la fonction de maintenance PrintSet () {var row = $ ("# griddetail"). {var index = $ ('# griddetail'). dataGrid ('getrowindex', row); printId = row.id; setup ();}} </ script>Dans cette interface d'impression, l'opération d'impression du code QR est également utilisée, ce qui est très pratique pour lire directement à l'aide du pistolet à barres, comme suit:
Lodop.add_print_barcode (78, 441, 262, 56, "128c", info.fenyundanhao); lodop.add_print_barcode (684, 441, 262, 56, "128c", info.fenyundanhao);
Définissez ensuite le bouton Fonction d'opération d'impression dans la page principale pour le traitement. Ce qui suit est notre effet d'interface Web Framework basé sur EasyUI.
L'interface d'aperçu d'impression est illustrée ci-dessous. Lors de l'impression, nous pouvons définir pour ne pas imprimer l'image d'arrière-plan.
S'il s'agit d'une impression régulière, leur interface est très proche du contenu de la page que nous voyons, comme indiqué ci-dessous.
Le code de référence est illustré ci-dessous.
@ * Ajouter la prise en charge de Lodop Control * @ <Script Type = "Text / JavaScript"> var Lodop; // Déclare la fonction de variable globale préview () {// original imprimer createLiceSedata (); lodop.set_show_mode ("préview_in_browse", 1); lodop.preview ();}; fonction printa () {createLecensEdata (); lodop.printa ();}; function setup () {// Original Printing Maintenance set CreateLicensEdata (); lodop.print_setup ();}; Fonction Design () {// Imprimée originale Design CreateLiceSedata (); lodop.print_design ();}; fonction créateLensedata () {lodop = getlodop (); lodop.print_init ("policies et régulations"); type = 'text / css' rel = 'stylesheet' href = '/ contenu / themes / default / style.css' /> <style> <! - Tableau {border: 1; background-color: #cbcbcc} td {background-color: #ffffe; border: 1; Background-Color: # f1f1f3; padding-left: 5px; bordure: 1} -> </ style> "; var strFormHtml = strbodystyle +" <body> "+ document.getElementById (" printContent "). InnerHtml +" </ body> "; lodop.add_print_htm (20, 40, 610, 900, lodop.add_print_htm (20, 40, 610, 900, lodop.add_print_htm (20, 40, 610, 900 strFormHtml); lodop.preview ();} fonction saveas () {var id = $ ('# id2'). val (); window.open ('/ information / exportwordbyid? id =' + id);} </ script>