في العديد من المشاريع ، يعد توليد وطباعة الرموز الباركودية ورموز QR أيضًا عملية شائعة جدًا. في مشاريع الويب ، يمكننا استخدام JS لإنشاء الرموز الباركدية ورموز QR. تقدم هذه المقالة مكونين JS المستخدمين على نطاق واسع للتعامل مع توليد ومعالجة الرموز الباركية ورموز QR ، وتقدم كيفية استخدام مكون Clodop لتحقيق إخراج طباعة المحتوى.
إنشاء الباركود باستخدام مكون JSBarcode ، وإنشاء رمز QR باستخدام مكون QRCodeJS.
1. توليد الرموز الباركية
عادة ما تكون وظيفة الرموز الباركدية على بعض ملصقات المنتجات ، مما يسهل استخدام مدافع الباركود للدخول بسرعة ودقة.
فيما يلي رمز باركي
هنا ، تتم معالجة توليد الباركود باستخدام مكون JSBarcode ، والذي يدعم تنسيقات الباركود في العديد من التنسيقات ، كما هو موضح أدناه.
يظهر مثال رمز بسيط أدناه.
// html code <svg id = "barcode"> </svg> <!-أو-> <canvas id = "canvas"> </tanvas> <!-أو-> <img id = "barcode" // js code jsbarcode (
يظهر تنسيق الصورة الذي تم إنشاؤه أدناه.
يدعم مكون JSBArcode إعداد معلمات الخيار المتعددة ، كما هو موضح في الكود التالي
jsbarcode ("#barcode" ، "1234" ، {format: "pharmacode" ، linecolor: barcodes.an13 ("1234567890128" ، {fontsize: 18 ، textMargin: 0}). فارغة (20) // إنشاء مساحة بين الباركود. من خلال مقدمة رمز الحالة لهذا المكون ، يمكننا أن نفهم كيفية استخدام توليد رموز QR العادية. على سبيل المثال ، أضفنا رمز HTML التالي إلى الواجهة. <div id = "bardiv1"> <viv> barcode (770 145 896 701): <br /> <img id = "barcode1" /> < /div> <viv> barcode (770 145 896 702): <br /> <img id = "barcode2" /> /div> /> <img id = "barcode3" /> </viv> </viv>ثم ، يتم تحقيق توليد رمز الاستجابة السريعة من خلال رمز JS.
// استخدم jsbarcode لإنشاء الباركود لـ (var i = 1 ؛ i <10 ؛ i ++) {var barcodevalue = "77014589670" + i ؛ // prefix + jsbarcode jsbarcode ("#barcode" + i ، barcodevalue ، {format: "code128". "#0cc"}) ؛}أخيرًا ، يمكننا أن نرى تأثير الجيل المحدد على النحو التالي.
من هنا يمكننا أن نرى أن استخدام JS لتحقيق توليد الباركود مريح للغاية وموجز ، كما أن الزملاء سريعون للغاية.
2. توليد رمز الاستجابة السريعة
يمكن إنشاء تطبيق رمز الاستجابة السريعة باستخدام مكون QRCodeJS. يمكن أيضًا إنشاء رمز الاستجابة السريعة عن طريق المكون jQuery-QRCode ، وهو موجز نسبيًا. ومع ذلك ، عند طباعة مستند رمز QR ، لا يعرض JQuery-QRCode صورة رمز QR ، بينما يعمل المكون QRCodeJS بشكل طبيعي ، لذلك يوصى باستخدام المكون QRCodeJS.
استخدام مكون QRCodeJS هذا بسيط للغاية ، ورمز الاستخدام الأساسي كما يلي.
<div id = "qrcode"> </div> <script type = "text/javaScript"> new qrcode (document.getElementById (
ويرد أدناه رمز JS أكثر تعقيدًا.
<div id = "qrcode"> </div> <script type = "text/javaScript"> var qrcode = new qrcode (document.getElementById ("qrcode") ، {text: "#ffffff" ، reachlevel: qrcode.correctlevel.h}) ؛ </script>من خلال فهم استخدام هذا المكون ، يمكننا إضافة رمز فعلي إلى المشروع للاختبار ، كما هو موضح أدناه.
<table border = '0' width = '100 ٪'> <tr> <td> رمز QR الجهاز (9001): <br/> <div id = "imgdevice9001"> </viv> </td> <td> الجهاز QR رمز (9002): <br/> div id = "imgdevice9002" ]
على وجه التحديد ، يمكننا استخدام JS لإنشاء رموز QR ذات الصلة ديناميكيًا.
. }) ؛ // $ ("#imgdevice" + i) .css ("الارتفاع" ، "100px") ؛ // طريقة استخدام qrcodejs var qrcode = new qrcode (document.getElementById ("imgdevice" + i) "#ffffff" ، reaclevel: qrcode.correctlevel.h}) ؛}يتم عرض رمز الاستجابة السريعة التي تم إنشاؤها على الواجهة النهائية أدناه.
3. طباعة ومعالجة الرموز الباركية ورموز QR
إدخال توليد رموز QR و barcodes. لطباعتها ، يمكنك استخدام clodop التي قدمتها للطباعة. إذا كنت بحاجة إلى معرفة ذلك ، فيرجى الرجوع إلى المقال بناءً على إطار تطوير الويب MVC+Easyui. باستخدام عناصر التحكم في الطباعة السحابية C-lodop لطباعة الصفحات أو تعيين إعلان جمركي ومعلومات عن طريق الوريد.
تعتمد الطباعة التي نقدمها هنا أيضًا على عملية طباعة هذا التحكم.
بالطبع ، إذا قمت بالطباعة ، يمكنك أيضًا استخدام مكون PrintT هذا للمعالجة (للحصول على التفاصيل ، يرجى الرجوع إلى ملخص تجربة إطار تطوير Metronic Bootstrap استنادًا إلى [9] لتحقيق معاينة الطباعة وحفظ محتوى صفحة الويب) ، ولكن التأثير الكلي ليس جيدًا مثل تأثير طباعة Clodop أعلاه.
طباعة رمز JS هي كما يلي ، ويمكن معالجة إحدى وظيفتين التاليتين.
// format format function printbarcodewithtable () {lodop = getLodop () ؛ lodop.print_init ("barcode_format output") ؛ var strhtml = "<table border = '0' width = '100 ٪'>" $ ("#bardiv1"). html () ؛ strhtml = strhtml + "</td> </tr>" ؛ strhtml = strhtml + "<tr> <td>" ؛ strhtml = strhtml + $ ("#bardiv2"). html () ؛ "</td> </tr>" ؛ strhtml = strhtml + "<tr> <td>" ؛ strhtml = strhtml + $ ("#bardiv3"). strhtml) ؛ lodop.set_show_mode ("FearfiE_in_browse" ، 1) ؛ lodop.preview () ؛} // استخدم وظيفة الإخراج Paging prationbarcodewithpaging () $ ("#Bardiv1"). $ ("#Bardiv3").تأثير طباعة الباركود كما يلي.
يتم عرض رمز JS الذي يطبع رمز الاستجابة السريعة أدناه.
// طباعة وظيفة رمز QR printqrcode2 () {createPrintData ($ ("#qrcode"). getlodop () ؛ lodop.print_init ("") ؛ // var strbodystyle = "<link type = 'text/css' rel = 'stylesheet' href = '/content/turmes/default/style.css'/>" ؛ var strbodystyle = "<sytre> <! } "؛ strbodyStyle + =" th {proundy-color:#f1f1f3 ؛ padding-left: 5px ؛ الحدود: 1}-> </style> "؛ var strformhtml = strbodystyle +" <body> " + html +" </body> "؛ strformhtml) ؛ lodop.preview () ؛}تتم طباعة نتيجة رمز الاستجابة السريعة على النحو التالي.
أخيرًا ، أكملنا الجيل الديناميكي من الرموز الباركية ورموز QR والعمليات ذات الصلة بالطباعة الرسومية. وترد الواجهة للوحدة بأكملها أدناه.
فيما يتعلق بمعالجة الباركود ورموز QR ، فإن مكونات الباركود JSBArcode و QR Code Component QRCODEJS التي قدمناها هنا هي مكونات جيدة جدًا لمصدر مفتوح المصدر ، والتي تلبي معظم متطلباتنا وسهلة الاستخدام والموجزة. آمل أن توفر هذه المحتويات الإلهام والفائدة لمشروعك.
ما سبق هو إطار Metronic القائم على bootstrap لتنفيذ توليد وطباعة الرموز الباركية ورموز QR. آمل أن يكون ذلك مفيدًا للجميع. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر على الجميع في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!