Das auf Bootstrap basierende metronische Framework erkennt die Erzeugung und Druckverarbeitung von Barcodes und QR -Codes

In vielen Projekten ist die Erzeugung und das Drucken von Barcodes und QR -Codes ebenfalls ein sehr häufiger Betrieb. In Webprojekten können wir JS verwenden, um Barcodes und QR -Codes zu generieren. In diesem Artikel werden zwei weit verbreitete JS -Komponenten eingeführt, um die Erzeugung und Verarbeitung von Barcodes und QR -Codes zu verarbeiten, und führt vor, wie die Clodop -Komponente verwendet wird, um die Druckausgabe des Inhalts zu erreichen.

Generieren Sie den Barcode mithilfe von Komponenten JSBARCODE und qR -Code mithilfe von Komponenten QRCodeJs.

1. Generierung von Barcodes

Die Funktion von Barcodes liegt im Allgemeinen auf einigen Produktetiketten, was die Verwendung von Barcode -Kanonen erleichtert, um schnell und genaue Informationen zu erhalten.

Das Folgende ist ein Barcode

Hier wird die Barcode -Erzeugung unter Verwendung der JSBARCODE -Komponente verarbeitet, die die Barcode -Formate in vielen Formaten unterstützt, wie unten gezeigt.

Das einfache Codebeispiel ist unten angezeigt.

 // HTML-Code <svg id = "barcode"> </svg> <!-oder-> <canvas id = "canvas"> </canvas> <!-oder-> <img id = "barcode" // js code jsbarcode ("#barcode", "hi!"). JQuery $ ("#Barcode"). JsBarcode ("Hi!");

Das generierte Bildformat ist unten dargestellt.

Die JSBARCODE -Komponente unterstützt die Einstellung mehrerer Optionsparameter, wie im folgenden Code gezeigt

 JsBarcode ("#Barcode", "1234", {Format: "Pharmacode", Linecolor: "#0aa", Breite: 4, Höhe: 40, DisplayValue: false}); barcodes.ean13 ("1234567890128", {fontsize: 18, textmargin: 0}). leer (20) // Platz zwischen den barcodes.ean5 ("12345", {Höhe: 85, textposition: "top", fontsize: 16, margintop: 15}). Durch die Einführung dieser Komponente können wir verstehen, wie die Erzeugung regulärer QR -Codes verwendet wird. Zum Beispiel haben wir der Schnittstelle den folgenden HTML -Code hinzugefügt. <div id="barDiv1"><div>Barcode(770 145 896 701): <br /><img id="barcode1" /></div><div>Barcode(770 145 896 702): <br /><img id="barcode2" /></div><div>Barcode(770 145 896 703): <br /> <img id = "barcode3" /> < /div> < /div>

Anschließend wird die QR -Codegenerierung über JS Code realisiert.

 // JSBARCODE verwenden, um Barcode für (var i = 1; i <10; i ++) {var barcodeValue = "77014589670" + i; // Präfix + numerische JSBARCODE ("#Barcode" + i, Barcododevalue, {Format: "code128", {Format: "code:" code: "code:" code: "code:" code: "code:" code: "," 24, Linecolor: "#0cc"});}

Schließlich können wir den spezifischen Generationseffekt wie folgt sehen.

Von hier aus können wir sehen, dass die Verwendung von JS zur Erzielung der Barcode -Generation sehr bequem und prägnant ist und Kollegen auch sehr schnell sind.

2. Generierung von QR -Code

Die QR -Code -Implementierung kann mithilfe von Komponenten QRCodeJS generiert werden. Der QR-Code kann auch durch Komponente jQuery-qrcode generiert werden, was relativ präzise ist. Beim Drucken des QR-Code-Dokuments zeigt JQuery-QRCode jedoch nicht das QR-Code-Bild an, während die Komponente QRCodeJS normal funktioniert. Daher wird empfohlen, die QRCodeJS der Komponente zu verwenden.

Die Verwendung dieser QRCodeJS -Komponente ist ebenfalls sehr einfach und der grundlegende Nutzungscode lautet wie folgt.

 <div id = "qrCode"> </div> <script type = "text/javaScript"> neuer QRCode (document.getElementById ("qrCode"), "http://jindo.dev.naver.com/collie"); </script>

Der kompliziertere JS -Code wird unten angezeigt.

 <div id="qrcode"></div><script type="text/javascript">var qrcode = new QRCode(document.getElementById("qrcode"), {text: "http://jindo.dev.naver.com/collie",width: 128,height: 128,colorDark : "#000000",colorLight : "#ffffff", korrekte

Durch das Verständnis der Verwendung dieser Komponente können wir dem Projekt einen tatsächlichen Code zum Testen hinzufügen, wie unten gezeigt.

 <table border='0' width='100%'><tr><td>Device QR code (9001): <br /><div id="imgDevice9001"></div></td><td>Device QR code (9002): <br /><div id="imgDevice9002"></div></td><td>Device QR code (9003): <br /> <div id = "imgDevice9003"> </div> </td> </tr> <tr style = "Höhe: 20px"> <td colspan = "3"> </td> </tr> ...... </table>

Insbesondere können wir JS verwenden, um relevante QR -Codes dynamisch zu generieren.

 // Der qr -Code des Gerätebildes für (var i = 9001; i <9010; i ++) {var url = "http://www.iqidi.com/h5/device?deviceCode=" + i; // Die Methode der Verwendung von jquery.qrcode // $ ("#iMgDevice". }); // $ ("#imgDevice" + i) .css ("Höhe", "100px"); // Die Methode der Verwendung von Qrcodejs var qrcode = new qrcode (document.getElementById ("ImgDevice" + i), {Text: url, width: 128, height: 128, colordark: colordark: colordark: "#0000", 0000 0000 ", 0000 0000", 0000 0000 ", 0000 0000", 0000 0000 ", 0000 0000", 0000 0000 ", 0000 0000", 0000 0000 ", 0000 0000 0000" "#ffffff", korrekte

Der auf der endgültigen Schnittstelle generierte QR -Code ist unten angezeigt.

3. Drucken und Verarbeitung von Barcodes und QR -Codes

Stellen Sie die Erzeugung von QR -Codes und Barcodes ein. Für den Druck können Sie den Clodop verwenden, den ich zum Drucken eingeführt habe. Wenn Sie es wissen müssen, lesen Sie bitte den Aufsatz basierend auf MVC+Easyui Web Development Framework. Verwenden von Cloud-Drucksteuerungen C-Lodop zum Drucken von Seiten oder zum Festlegen von Zollerklärungen und Waybill-Informationen.

Der hier einführende Druck basiert auch auf dem Druckprozess dieser Kontrolle.

Wenn Sie drucken, können Sie natürlich auch die Printhis -Komponente für die Verarbeitung verwenden (Einzelheiten finden Sie in der Erfahrung der Erfahrung des Bootstrap -Metronik -Entwicklungsrahmens auf der Basis von [9], um die Druckvorschau und das Speichern von Webseiteninhalten) zu realisieren, aber der Gesamteffekt ist nicht so gut wie der Druckeffekt des oben genannten Clodops.

Das Drucken des JS -Code ist wie folgt, und eine der folgenden zwei Funktionen kann verarbeitet werden.

 // Formatausgabefunktion printbarcodewithtable () {lodop = getLodop (); lodop.print_init ("barcode_format output"); var strhtml = "<Table Border = '0' Width = '100%'>"; $ ("#bardiv1"). "</td> </tr>"; strhtml = strhtml + "<tr> <td>"; strhtml = strhtml + $ ("#bardiv3"). strhtml); lodop.set_show_mode ("preview_in_browse", 1); 600, 800, $ ("#bardiv1"). $ ("#bardiv3"). html ()); lodop.newpage ();

Der Druckeffekt des Barcode ist wie folgt.

Der JS -Code, der den QR -Code druckt, wird unten angezeigt.

 // QR -Code -Funktion printqrcode2 () {createprintData ($ ("#qrcode"). Html ()); lodop.set_show_mode ("Preview_in_Browse", 1); getlodop (); lodop.print_init (""); // var strodyStyle = "<link type = 'text/css' rel = 'styleSheet' href = '/content/themes/default/style.css'/>"; } "; strodyStyle + =" th {Hintergrundfarbe:#f1f1f3; padding-links: 5px; border: 1}-> </style> "; var stformhtml = strodyStyle +" <body> " + html +" </body> "; strformhtml); lodop.preview ();}

Das Ergebnis des QR -Codes wird wie folgt gedruckt.

Schließlich haben wir die dynamische Erzeugung von Barcodes, QR -Codes und grafischen Druckvorgängen abgeschlossen. Die Schnittstelle des gesamten Moduls ist unten gezeigt.

In Bezug auf die Verarbeitung von Barcodes und QR -Codes sind die von uns eingeführten BARCODE -Komponenten JSBARCODE- und QR -Codekomponenten QRCodeJS sehr gute Open -Source -JS -Komponenten, die die meisten unserer Anforderungen entsprechen und einfach zu verwenden und präzise zu verwenden. Ich hoffe, diese Inhalte können Ihrem Projekt Inspiration und Nützlichkeit bieten.

Das obige ist das Bootstrap-basierte metronische Framework, um die Erzeugung und das Druck von Barcodes und QR-Codes zu implementieren. Ich hoffe, es wird für alle hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird allen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!