ในหลายโครงการการสร้างและการพิมพ์ของบาร์โค้ดและรหัส QR ก็เป็นการดำเนินการที่พบบ่อยมาก ในโครงการเว็บเราสามารถใช้ JS เพื่อสร้างบาร์โค้ดและรหัส QR บทความนี้แนะนำองค์ประกอบ JS ที่ใช้กันอย่างแพร่หลายสองชิ้นเพื่อจัดการการสร้างและการประมวลผลของบาร์โค้ดและรหัส QR และแนะนำวิธีการใช้ส่วนประกอบ CLODOP เพื่อให้ได้ผลลัพธ์การพิมพ์ของเนื้อหา
สร้างบาร์โค้ดโดยใช้องค์ประกอบ JSBARCODE และสร้างรหัส QR โดยใช้ส่วนประกอบ qRCodeJS
1. การสร้างบาร์โค้ด
ฟังก์ชั่นของบาร์โค้ดโดยทั่วไปอยู่ในฉลากผลิตภัณฑ์บางอย่างซึ่งอำนวยความสะดวกในการใช้ปืนบาร์โค้ดเพื่อป้อนข้อมูลอย่างรวดเร็วและแม่นยำ
ต่อไปนี้เป็นบาร์โค้ด
ที่นี่การสร้างบาร์โค้ดถูกประมวลผลโดยใช้องค์ประกอบ JSBARCODE ซึ่งรองรับรูปแบบบาร์โค้ดในหลายรูปแบบดังที่แสดงด้านล่าง
ตัวอย่างรหัสง่าย ๆ แสดงอยู่ด้านล่าง
// html code <svg id = "barcode"> </svg> <!-หรือ-> <canvas id = "canvas"> </canvas> <!-หรือ-> <img id = "barcode" // js jsbarcode ("#barcode", "hi!");รูปแบบภาพที่สร้างขึ้นจะแสดงด้านล่าง
องค์ประกอบ JSBARCODE รองรับการตั้งค่าพารามิเตอร์ตัวเลือกหลายตัวดังที่แสดงในรหัสต่อไปนี้
JSBARCODE ("#barcode", "1234", {รูปแบบ: "Pharmacode", linecolor: "#0aa", ความกว้าง: 4, ความสูง: 40, DisplayValue: False}); JSBARCODE ("#BARCODE") {fontsize: 18, textmargin: 0}). blank (20) // สร้างช่องว่างระหว่าง barcodes.ean5 ("12345", {ความสูง: 85, ข้อความ: "top", ตัวอักษร: 16, Margintop: 15}) render (); ผ่านการแนะนำรหัสกรณีขององค์ประกอบนี้เราสามารถเข้าใจวิธีการใช้การสร้างรหัส QR ปกติ ตัวอย่างเช่นเราเพิ่มรหัส HTML ต่อไปนี้ลงในอินเตอร์เฟส <div id = "bardiv1"> <div> บาร์โค้ด (770 145 896 701): <br /> <img id = "barcode1" /> < /div> <div> บาร์โค้ด (770 145 896 702): <br /> <img id = "Barcode2" /> /> <img id = "barcode3" /> </div> </div>จากนั้นการสร้างรหัส QR จะรับรู้ผ่านรหัส JS
// ใช้ JSBARCODE เพื่อสร้างบาร์โค้ดสำหรับ (var i = 1; i <10; i ++) {var barcodevalue = "77014589670" + i; // คำนำหน้า + numerical jsBarcode ("#barcode" + i, barcodevalue "#0cc"});}ในที่สุดเราสามารถเห็นเอฟเฟกต์การสร้างที่เฉพาะเจาะจงดังนี้
จากที่นี่เราจะเห็นได้ว่าการใช้ JS เพื่อให้ได้การสร้างบาร์โค้ดนั้นสะดวกและกระชับมากและเพื่อนร่วมงานก็เร็วมากเช่นกัน
2. การสร้างรหัส QR
การใช้งานรหัส QR สามารถสร้างขึ้นได้โดยใช้ส่วนประกอบ QRCODEJS รหัส QR ยังสามารถสร้างขึ้นได้โดย Component JQuery-Qrcode ซึ่งค่อนข้างรัดกุม อย่างไรก็ตามเมื่อพิมพ์เอกสารรหัส QR jQuery-qrcode จะไม่แสดงรูปภาพรหัส QR ในขณะที่ส่วนประกอบ qrcodejs ทำงานได้ตามปกติดังนั้นจึงแนะนำให้ใช้ส่วนประกอบ qrcodejs
การใช้ส่วนประกอบ QRCODEJS นี้นั้นง่ายมากและรหัสการใช้งานพื้นฐานมีดังนี้
<div id = "qrcode"> </div> <script type = "text/javascript"> qrcode ใหม่ (document.getElementById ("qrcode"), "http://jindo.dev.naver.com/collie"ยิ่งรหัส JS ที่ซับซ้อนมากขึ้นจะแสดงด้านล่าง
<div id = "qrcode"> </div> <script type = "text/javascript"> var qrcode = ใหม่ qrcode (document.getElementById ("qrcode"), {text: "http://jindo.dev.naver.com/collie", "#FFFFFF", ถูกต้อง: qrcode.correctlevel.h}); </script>โดยการทำความเข้าใจการใช้ส่วนประกอบนี้เราสามารถเพิ่มรหัสจริงลงในโครงการสำหรับการทดสอบดังที่แสดงด้านล่าง
<table border = '0' width = '100%'> <tr> <td> อุปกรณ์ QR (9001): <br/> <div id = "imgdevice9001"> </div> </td> <td> รหัสอุปกรณ์ QR (9002): <br/> <div id = "imgDevice9002 /> <div id = "imgdevice9003"> </div> </td> </tr> <tr style = "ความสูง: 20px"> <td colspan = "3"> </td> </tr> ...... </bable>
โดยเฉพาะเราสามารถใช้ JS เพื่อสร้างรหัส QR ที่เกี่ยวข้องแบบไดนามิก
// รหัสอุปกรณ์ QR สำหรับ (var i = 9001; i <9010; i ++) {var url = "http://www.iqidi.com/h5/device?deviceCode=" + i; }); // $ ("#imgdevice" + i) .css ("ความสูง", "100px"); // วิธีการใช้ qrcodejs var qrcode = ใหม่ qrcode (document.getElementById ("ImgDevice" + i), {text: url, ความกว้าง: 128, ความสูง "#FFFFFF", ถูกต้อง: qrcode.correctlevel.h});}รหัส QR ที่สร้างขึ้นบนอินเทอร์เฟซสุดท้ายจะแสดงด้านล่าง
3. การพิมพ์และประมวลผลบาร์โค้ดและรหัส QR
แนะนำการสร้างรหัส QR และบาร์โค้ด สำหรับการพิมพ์ของพวกเขาคุณสามารถใช้ clodop ที่ฉันแนะนำสำหรับการพิมพ์ หากคุณจำเป็นต้องรู้โปรดดูเรียงความตามกรอบการพัฒนาเว็บ MVC+EasyUI การใช้การควบคุมการพิมพ์คลาวด์ C-Lodop เพื่อพิมพ์หน้าหรือตั้งค่าการประกาศศุลกากรและข้อมูลใบปลิว
การพิมพ์ที่เราแนะนำที่นี่จะขึ้นอยู่กับกระบวนการพิมพ์ของการควบคุมนี้
แน่นอนถ้าคุณพิมพ์คุณยังสามารถใช้ส่วนประกอบ printhis สำหรับการประมวลผล (สำหรับรายละเอียดโปรดดูที่สรุปประสบการณ์ของกรอบการพัฒนา metronic bootstrap ตาม [9] เพื่อให้ตระหนักถึงตัวอย่างการพิมพ์และการบันทึกเนื้อหาเว็บเพจ) แต่ผลกระทบโดยรวมไม่ดีเท่าผลการพิมพ์
การพิมพ์รหัส JS มีดังนี้และหนึ่งในสองฟังก์ชั่นต่อไปนี้สามารถประมวลผลได้
// ฟังก์ชั่นเอาต์พุตรูปแบบ printBarCodeWithTable () {lodop = getLodop (); lodop.print_init ("barcode_format output"); var strhtml = "<table border = '0' width = '100%'>"; strhtml = strhtml + " $ ("#bardiv1"). html (); strhtml = strhtml + "</td> </tr>"; strhtml = strhtml + "<tr> <td>" strhtml = strhtml + $ ("#bardiv2") "</td> </tr>"; strhtml = strhtml + "<tr> <td>"; strhtml = strhtml + $ ("#bardiv3"). html (); strhtml = strhtml + "</td> strhtml); lodop.set_show_mode ("preview_in_browse", 1); lodop.preview ();} // ใช้ฟังก์ชั่นเอาท์พุทเพจ pingbarcodewithpaging () {lodop = getLodop (); lodop.print_init ( 600, 800, $ ("#bardiv1"). html ()); lodop.newpage (); lodop.add_print_htm (100, 100, 600, 800, $ ("#bardiv2") html ()); lodop.newpage () $ ("#bardiv3"). html ()); lodop.newpage (); lodop.set_show_mode ("preview_in_browse", 1); lodop.preview ();};เอฟเฟกต์การพิมพ์ของบาร์โค้ดมีดังนี้
รหัส JS ที่พิมพ์รหัส QR จะแสดงด้านล่าง
// พิมพ์ฟังก์ชั่นรหัส QR printqrCode2 () {createPrintData ($ ("#qrcode"). html ()); lodop.set_show_mode ("preview_in_browse", 1); lodop.preview (); getLodop (); lodop.print_init (""); // var strbodystyle = "<ลิงก์ประเภท = 'ข้อความ/css' rel = 'stylesheet' href = '/เนื้อหา/ธีม/เริ่มต้น/style.css'/>" } "; strbodystyle + =" th {พื้นหลัง-สี:#f1f1f3; padding-left: 5px; border: 1}-> </style> "; var strformhtml = strbodystyle +" <body> " + html +" strformhtml); lodop.preview ();}ผลลัพธ์ของรหัส QR ถูกพิมพ์ดังนี้
ในที่สุดเราก็เสร็จสิ้นการสร้างบาร์โค้ดแบบไดนามิกรหัส QR และการดำเนินการที่เกี่ยวข้องกับการพิมพ์กราฟิก อินเทอร์เฟซของโมดูลทั้งหมดแสดงอยู่ด้านล่าง
เกี่ยวกับการประมวลผลของบาร์โค้ดและรหัส QR ส่วนประกอบบาร์โค้ด JSBARCODE และส่วนประกอบรหัส QR QRCODEJS ที่เราแนะนำที่นี่เป็นส่วนประกอบโอเพ่นซอร์ส JS ที่ดีมากซึ่งตรงกับความต้องการส่วนใหญ่ของเราและใช้งานง่ายและรัดกุม ฉันหวังว่าเนื้อหาเหล่านี้จะให้แรงบันดาลใจและประโยชน์แก่โครงการของคุณ
ด้านบนเป็นกรอบเมโทรนิกที่ใช้ bootstrap เพื่อใช้การสร้างและการพิมพ์ของบาร์โค้ดและรหัส QR ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับทุกคนในเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!