Dalam banyak proyek, generasi dan pencetakan barcode dan kode QR juga merupakan operasi yang sangat umum. Dalam proyek web, kami dapat menggunakan JS untuk menghasilkan kode barcode dan QR. Artikel ini memperkenalkan dua komponen JS yang banyak digunakan untuk menangani generasi dan pemrosesan barcode dan kode QR, dan memperkenalkan cara menggunakan komponen Clodop untuk mencapai output cetak konten.
Hasilkan Barcode Menggunakan Komponen JSBarcode, dan Hasilkan Kode QR Menggunakan Komponen QrcodeJs.
1. Generasi Barcode
Fungsi barcode umumnya pada beberapa label produk, yang memfasilitasi penggunaan senjata barcode untuk memasukkan informasi dengan cepat dan akurat.
Berikut ini adalah barcode
Di sini, pembuatan barcode diproses menggunakan komponen JSBarcode, yang mendukung format barcode dalam banyak format, seperti yang ditunjukkan di bawah ini.
Contoh kode sederhana ditunjukkan di bawah ini.
// Kode html <svg id = "barcode"> </svg> <!-atau-> <canvas id = "canvas"> </canvas> <!-atau-> <img id = "barcode" // js code jsbarcode ("#barcode", "hai!");//Atau dengan jsbarcode ("#barcode", "hai!");/Atau dengan jsbarcode ("#barcode", "hai!")Format gambar yang dihasilkan ditunjukkan di bawah ini.
Komponen jsbarcode mendukung pengaturan parameter opsi berganda, seperti yang ditunjukkan pada kode berikut
Jsbarcode ("#barcode", "1234", {format: "pharmacode", linecolor: "#0aa", lebar: 4, tinggi: 40, displayValue: false}); jsbarcode ("#barcode"). Barcodes.ean13 ("1234567890128", {FontSize: 18, TextMargin: 0}). Blank (20) // Ruang di antara barcodes.ean5 ("12345", {Height: 85, TextPosition: "Top", Fontsize: 16, Margintop Melalui kode kasus pengenalan komponen ini, kami dapat memahami cara menggunakan generasi kode QR biasa. Misalnya, kami menambahkan kode HTML berikut ke antarmuka. <Div ID = "Bardiv1"> <div> barcode (770 145 896 701): <br /> <img id = "barcode1" /> </div> <ver> barcode (770 145 896 702): <bR /> <mg id = "Barcode2" /< /Div> < /BAR6 77 87 87 87 87 87 87 87 87 87 87 87 87 87 87 87 87 87 87 87 87 87 87 77 87 87 77 87 87 87 87 87 87 87 77 87 87 87 87 87 77 87 87 87 87 87 87 87 87 87 87 87 87 87 87 87 /> <img id = "Barcode3" /> </div> </div>Kemudian, pembuatan kode QR direalisasikan melalui kode JS.
// Gunakan jsbarcode untuk menghasilkan barcode untuk (var i = 1; i <10; i ++) {var barcodevalue = "77014589670" + i; // awalan + numerik jsbarcode ("#barcode" + i, barcodevalue, {format: "code128," code128, "code128, code128, code128, {format:" code128, {format: "code128, {format:" "#0cc"});}Akhirnya, kita dapat melihat efek generasi spesifik sebagai berikut.
Dari sini kita dapat melihat bahwa menggunakan JS untuk mencapai generasi barcode sangat nyaman dan ringkas, dan kolega juga sangat cepat.
2. Generasi Kode QR
Implementasi kode QR dapat dihasilkan dengan menggunakan komponen qrcodeJs. Kode QR juga dapat dihasilkan oleh komponen jQuery-Qrcode, yang relatif ringkas. Namun, saat mencetak dokumen kode QR, jQuery-Qrcode tidak menampilkan gambar kode QR, sedangkan komponen qrcodeJs berfungsi secara normal, sehingga disarankan untuk menggunakan komponen qrcodeJs.
Penggunaan komponen qrcodeJs ini juga sangat sederhana, dan kode penggunaan dasar adalah sebagai berikut.
<Div id = "qrcode"> </div> <script type = "text/javascript"> qrcode baru (document.geteLementById ("qrcode"), "http://jindo.dev.naver.com/collie"); </script>Kode JS yang lebih rumit ditunjukkan di bawah ini.
<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", Correctlevel: qrcode.correctlevel.h}); </script>Dengan memahami penggunaan komponen ini, kami dapat menambahkan kode aktual ke proyek untuk pengujian, seperti yang ditunjukkan di bawah ini.
<Table Border = '0' Width = '100%'> <tr> <td> Kode QR (9001): <br/> <v id = "imgdevice9001"> </div> </td> <td> Kode qr (9002): <bR /> <v id = "imgdevice92"> </t t </> </> </> <v iD = "imgdevice92"> </t t </> </> </t t </t t </t t </td </td </td </td </td </td = /> <div id = "imgdevice9003"> </div> </td> </tr> <tr style = "Tinggi: 20px"> <td colspan = "3"> </td> </tr> ...... </able>
Secara khusus, kita dapat menggunakan JS untuk secara dinamis menghasilkan kode QR yang relevan.
// Kode qr gambar perangkat untuk (var i = 9001; i <9010; i ++) {var url = "http://www.iqidi.com/h5/device?deviceCode=" + i; // Metode menggunakan jQuery.qrcode // $ ("#imgdevice" {iMgdevice "{iMgdevice"#iMgdevice " });//$("#imgDevice" + i).css("height", "100px");//The method of using qrcodejs var qrcode = new QRCode(document.getElementById("imgDevice" + i), {text: url,width: 128,height: 128,colorDark: "#000000",colorLight: "#FFFFFF", CREAMLEVEL: QRCODE.CORRECTLEVEL.H});}Kode QR yang dihasilkan pada antarmuka akhir ditunjukkan di bawah ini.
3. Pencetakan dan Pemrosesan Kode Barcode dan QR
Memperkenalkan generasi kode QR dan barcode. Untuk pencetakan mereka, Anda dapat menggunakan Clodop yang saya perkenalkan untuk pencetakan. Jika Anda perlu tahu, silakan merujuk ke esai berdasarkan kerangka pengembangan web MVC+easyui. Menggunakan Cloud Printing Controls C-Lodop untuk mencetak halaman atau mengatur Deklarasi Bea Cukai dan Informasi Waybill.
Pencetakan yang kami perkenalkan di sini juga didasarkan pada proses pencetakan kontrol ini.
Tentu saja, jika Anda mencetak, Anda juga dapat menggunakan komponen print ini untuk diproses (untuk detail, silakan merujuk pada ringkasan pengalaman kerangka pengembangan metronik bootstrap berdasarkan [9] untuk mewujudkan pratinjau pencetakan dan menyimpan konten halaman web), tetapi efek keseluruhannya tidak sebagus efek pencetakan Clodop di atas.
Mencetak kode JS adalah sebagai berikut, dan salah satu dari dua fungsi berikut dapat diproses.
// Format Fungsi Output PrintBarCodewithTable () {lodop = getLoDop (); lodop.print_init ("Barcode_format output"); var strhtml = "<tabel border = '0' width = '100%'>"; strhtml = strhtml + "<TR> <100%'>"; strhtml = strhtml = "TRR> <100%'>"; STRHTML = STRHTML = STRHTML + "<TR> <100%'>"; $ ("#bardiv1"). html (); strhtml = strhtml + "</td> </tr>"; strhtml = strhtml + "<tr> <td>"; strhtml = strhtml + $ ("#bardiv2"). HTML (); "</td> </tr>"; strhtml = strhtml + "<tr> <td>"; strhtml = strhtml + $ ("#bardiv3"). html (); strhtml = strhtml + "</td> </tr>"; lodop.add = 800, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200 strhtml); lodop.set_show_mode ("preview_in_browse", 1); lodop.preview ();} // Gunakan fungsi paging output printBarcodewithPaging () {lodop = getLodop (); lodop.print_init ("Barcode_paging outpuping"; 600, 800, $ ("#bardiv1"). Html ()); lodop.newpage (); lodop.add_print_htm (100, 100, 600, 800, $ ("#bardiv2"). Html ()); lodop.newpage (); lodiv2 "). $ ("#bardiv3"). html ()); lodop.newpage (); lodop.set_show_mode ("preview_in_browse", 1); lodop.preview ();}Efek pencetakan barcode adalah sebagai berikut.
Kode JS yang mencetak kode QR ditunjukkan di bawah ini.
// Cetak Fungsi Kode QR PrintqrCode2 () {createPrintData ($ ("#qrcode"). Html ()); lodop.set_show_mode ("preview_in_browse", 1); lodop.preview ();} // cetak fungsi konstruksi data createPrintData; getLoDop (); lodop.print_init (""); // var strbodystyle = "<tautan tipe = 'text/css' rel = 'stylesheet' href = '/konten/tema/default/style.css'/>"; var strbodystyle = "<style> <!-tabel {1; 1; latar belakang: 1; latar belakang: 1; } "; strbodystyle + =" th {latar belakang-color:#f1f1f3; padding-left: 5px; border: 1}-> </tyle> "; var strformHtml = strbodystyle +" <body> " + html +" </body> "; lodop.add_print_html_htm (80, 900, 900, lodop.Add_print_print_ht_html +" </body "; strormHtml); lodop.preview ();}Hasil kode QR dicetak sebagai berikut.
Akhirnya, kami menyelesaikan generasi dinamis barcode, kode QR, dan operasi terkait pencetakan grafis. Antarmuka seluruh modul ditunjukkan di bawah ini.
Mengenai pemrosesan kode barcode dan QR, komponen barcode komponen JSBarcode dan Kode QR QRCodeJs yang kami perkenalkan di sini adalah komponen JS open source yang sangat baik, yang memenuhi sebagian besar persyaratan kami dan mudah digunakan dan ringkas. Saya berharap konten ini dapat memberikan inspirasi dan kegunaan untuk proyek Anda.
Di atas adalah kerangka metronik berbasis bootstrap untuk mengimplementasikan generasi dan pencetakan kode barcode dan QR. Saya harap ini akan membantu semua orang. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas semua orang tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!