많은 프로젝트에서 바코드 및 QR 코드의 생성 및 인쇄도 매우 일반적인 작업입니다. 웹 프로젝트에서는 JS를 사용하여 바코드 및 QR 코드를 생성 할 수 있습니다. 이 기사는 바코드 및 QR 코드의 생성 및 처리를 처리하기 위해 널리 사용되는 두 가지 JS 구성 요소를 소개하고 Clodop 구성 요소를 사용하여 컨텐츠의 인쇄 출력을 달성하는 방법을 소개합니다.
구성 요소 jsbarcode를 사용하여 바코드를 생성하고 구성 요소 qrcodejs를 사용하여 QR 코드를 생성합니다.
1. 바코드 생성
바코드의 기능은 일반적으로 일부 제품 레이블에 있으며, 이는 정보를 신속하고 정확하게 입력하기 위해 바코드 건의 사용을 용이하게합니다.
다음은 바코드입니다
여기서 바코드 생성은 JSBarcode 구성 요소를 사용하여 처리되며, 아래 그림과 같이 여러 형식의 바코드 형식을 지원합니다.
간단한 코드 예제는 다음과 같습니다.
// html 코드 <svg id = "barcode"> </svg> <!-또는-> <canvas id = "canvas"> </canvas> <!-또는-> <img id = "barcode"// js code jsbarcode ( "#barcode", "hi!"); // 또는 with jQuery $ ( "#barcode"). jsbarcode ( "hi!");
생성 된 이미지 형식은 다음과 같습니다.
JSBarCode 구성 요소는 다음 코드와 같이 여러 옵션 매개 변수 설정을 지원합니다.
jsbarcode ( "#barcode", "1234", {형식 : "Pharmacode", Linecolor : "#0aa", 너비 : 4, 높이 : 40, displayValue : False}); jsbarcode ( "#barcode"). 옵션 ({font : "acr-b"}) barcodes.an13 ( "1234567890128", {fontsize : 18, textmargin : 0}). blank (20) // barcodes.ean5 ( "12345", {height : 85, 텍스트 위치 : "상단", fontsize : 16, margintop : 15}) 사이의 공간을 만듭니다. 이 구성 요소의 사례 코드 소개를 통해 일반 QR 코드의 생성을 사용하는 방법을 이해할 수 있습니다. 예를 들어, 다음 HTML 코드를 인터페이스에 추가했습니다. <div id = "bardiv1"> <div> 바코드 (770 145 896 701) : <br /> <img id = "barcode1" /> < /div> <div> 바코드 (770 145 896 702) : <br /> <img id = "barcode2"/> < /div> barcode (770 1496 703). /> <img id = "barcode3" /> < /div> < /div>그런 다음 QR 코드 생성은 JS 코드를 통해 실현됩니다.
// jsbarcode를 사용하여 바코드를 사용하여 (var i = 1; i <10; i ++) {var barcodevalue = "77014589670" + i; // 수치 jsbarcode ( "#barcode" + i, barcodevalue, {format : "code128" 24, linecolor : "#0cc"});}마지막으로, 우리는 특정 생성 효과를 다음과 같이 볼 수 있습니다.
여기에서 우리는 바코드 생성을 달성하기 위해 JS를 사용하는 것이 매우 편리하고 간결하며 동료들도 매우 빠릅니다.
2. QR 코드 생성
QR 코드 구현은 구성 요소 QRCODEJS를 사용하여 생성 할 수 있습니다. QR 코드는 또한 구성 요소 jquery-qrcode에 의해 생성 될 수 있으며, 이는 비교적 간결합니다. 그러나 QR 코드 문서를 인쇄 할 때 JQuery-Qrcode는 QR 코드 사진을 표시하지 않으며 구성 요소 QRCodejs는 정상적으로 작동하므로 구성 요소 QRCodeJS를 사용하는 것이 좋습니다.
이 qrcodejs 구성 요소의 사용도 매우 간단하며 기본 사용 코드는 다음과 같습니다.
<div id = "qrcode"> </div> <script type = "text/javaScript"> new qrcode (document.getElementByid ( "qrcode"), "http://jindo.dev.naver.com/collie"); </script>
더 복잡한 JS 코드는 다음과 같습니다.
<div id = "qrcode"> </div> <script type = "text/javaScript"> var qrcode = new qrcode (docut "#ffffff", 정확한 레벨 : qrcode.correctlevel.h}); </script>
이 구성 요소의 사용을 이해함으로써 아래와 같이 테스트를 위해 프로젝트에 실제 코드를 추가 할 수 있습니다.
<테이블 테두리 = '0'width = '100%'> <tr> <td> 장치 QR 코드 (9001) : <br/> <div id = "imgdevice9001"> </div> </td> <td> 장치 QR 코드 (9002) : <br/> <div = "imgdevice9002"> </td> <td> <td> <td> /> <div id = "imgdevice9003"> </div> </td> </tr> <tr style = "높이 : 20px"> <td colspan = "3"> </td> </tr> ...... </table>
구체적으로, 우리는 JS를 사용하여 관련 QR 코드를 동적으로 생성 할 수 있습니다.
// 장치 이미지 QR 코드 (var i = 9001; i <9010; i ++) {var url = "http://www.iqidi.com/h5/device?devicecode=" + i; // jquery.qrcode // $ ( "#imgdevice" + i)를 사용하는 방법 (100, 100, : : : : : : : : : : : : : : : : 100, : : 100). }); // $ ( "#imgdevice" + i) .css ( "height", "100px"); // qrcodejs var qrcode = new qrcode ( "imgdevice" + i), {텍스트 : url, width : 128, 높이 : 128, Colordark : "##000000", "#ffffff", 정확한 레벨 : qrcode.correctlevel.h});}최종 인터페이스에서 생성 된 QR 코드는 다음과 같습니다.
3. 바코드 및 QR 코드의 인쇄 및 처리
QR 코드 및 바코드의 생성을 소개하십시오. 인쇄를 위해 인쇄를 위해 도입 한 클로드를 사용할 수 있습니다. 알아야 할 경우 MVC+EasyUI 웹 개발 프레임 워크를 기반으로 한 에세이를 참조하십시오. 클라우드 인쇄를 사용하면 C-Lodop을 제어하여 페이지를 인쇄하거나 세관 선언 및 웨이 빌 정보를 설정합니다.
우리가 여기에 소개하는 인쇄는이 컨트롤의 인쇄 과정을 기반으로합니다.
물론 인쇄하는 경우 PrintThis 구성 요소를 처리하기 위해 PrintTIS 구성 요소를 사용할 수도 있습니다 (자세한 내용은 [9]를 기반으로 한 부트 스트랩 메트로닉 개발 프레임 워크의 경험 요약을 참조하여 웹 페이지 컨텐츠의 인쇄 미리보기 및 저장)를 참조하십시오). 전체 효과는 위의 Clodop의 인쇄 효과만큼 좋지 않습니다.
JS 코드 인쇄는 다음과 같습니다. 다음 두 기능 중 하나를 처리 할 수 있습니다.
// 형식 출력 함수 printbarcodewithTable () {lodop = getLodop (); lodop.print_init ( "barcode_format output"); var strhtml = "<table border = '0'width = '100%'>"; strhtml = strhtml + "<td>"; 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> </tr>"; lodop.adop.adop.addd_print_table (88, 200, 700, 900, strhtml); lodop.set_show_mode ( "preview_in_browse", 1); lodop.preview ();} // 페이징 출력 기능 printbarcodewithping () {lodop = getLodop (); lodop.print_init ( "barcode_put"; 100, 100, 100, 100, 800, $ ( "#bardiv1"). html ()); lodop.newpage (); lodop.add_print_htm (100, 100, 600, 800, $ ( "#bardiv2"). $ ( "#bardiv3"). html ()); lodop.newpage (); lodop.set_show_mode ( "preview_in_browse", 1); lodop.preview ();}바코드의 인쇄 효과는 다음과 같습니다.
QR 코드를 인쇄하는 JS 코드는 다음과 같습니다.
// 인쇄 QR 코드 함수 printqrcode2 () {createPrintData ($ ( "#qrcode"). html ()); lodop.set_show_mode ( "preview_in_browse", 1); lodop.preview ();} // 인쇄 데이터 구성 CreatePrintData (html) {html) getLodop (); lodop.print_init ( ""); // var strodyStyle = "<링크 유형 = 'text/css'rel = '스타일 시트'href = '/content/eseres/default/style.css'/>"; var strbodystyle = "<sty> <!-테이블 {Porder : 1; Porture : #cbcbcc} 1; } "; strodyStyle + ="Th {배경색 :#f1f1f3; padding-left : 5px; border : 1}-> </style> "; var strformhtml = strodystyle +"<body> " + html +"</body> "; lodop.add_print_htm (20, 40, 710, 900, strformhtml); lodop.preview ();}QR 코드의 결과는 다음과 같이 인쇄됩니다.
마지막으로 바코드, QR 코드 및 그래픽 인쇄 관련 작업의 동적 생성을 완료했습니다. 전체 모듈의 인터페이스는 다음과 같습니다.
바코드 및 QR 코드의 처리와 관련하여, 바코드 구성 요소 JSBarCode 및 QR 코드 구성 요소 QRCodeJ는 여기에 소개 된 매우 좋은 오픈 소스 JS 구성 요소가 있으며 대부분의 요구 사항을 충족하고 사용하고 간결하게 사용하기 쉽습니다. 이러한 내용이 프로젝트에 영감과 유용성을 제공 할 수 있기를 바랍니다.
위의 것은 바코드 및 QR 코드의 생성 및 인쇄를 구현하기위한 부트 스트랩 기반 메트로닉 프레임 워크입니다. 모든 사람에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 모든 사람에게 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!