多くのプロジェクトでは、バーコードとQRコードの生成と印刷も非常に一般的な操作です。 Webプロジェクトでは、JSを使用してバーコードとQRコードを生成できます。この記事では、バーコードとQRコードの生成と処理を処理するために広く使用されている2つのJSコンポーネントを紹介し、Clodopコンポーネントを使用してコンテンツの印刷出力を実現する方法を紹介します。
コンポーネントjsbarcodeを使用してバーコードを生成し、コンポーネントqrcodejsを使用してqrコードを生成します。
1。バーコードの生成
バーコードの機能は一般にいくつかの製品ラベルにあり、バーコードガンの使用を容易にして情報をすばやく正確に入力します。
以下はバーコードです
ここでは、以下に示すように、多くの形式でバーコード形式をサポートするJSBarcodeコンポーネントを使用してバーコード生成が処理されます。
その単純なコードの例を以下に示します。
// html code <svg id = "barcode"> </svg> <！ - or-> <canvas id = "canvas"> </canvas> <！ jQuery $（ "＃barcode"）。jsbarcode（ "hi！"）;
生成された画像形式を以下に示します。
JSBarCodeコンポーネントは、次のコードに示すように、複数のオプションパラメーターの設定をサポートしています
jsbarcode（ "＃barcode"、 "1234"、{format： "pharmacode"、linecolor： "＃0aa"、width：4、height：40、displayvalue：false}）; jsbarcode（ "＃barcode"）。 barcodes.ean13（ "1234567890128"、{fontsize：18、textmargin：0}）。blank（20）// barcodes.ean5（ "12345"、{height：85、テキストポジション： "top"、fontsize：16、margintop：15}）。このコンポーネントのケースコード導入により、通常のQRコードの生成方法を理解することができます。たとえば、次のHTMLコードをインターフェイスに追加しました。 <div id = "bardiv1"> <div> barcode（770 145 896 701）：<br /> <img id = "barcode1" /> < /div> <div> barcode（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; // freix +数字jsbarcode（ "＃barcode" + i、barcodevalue、{cod128 "" cod128 "" divilal： "" divilyvalue： "oded128"、barcodevalue、{"＃barcode" + i、barcodevalue、 "＃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（document.getElementbyid（ "qrcode"）、{text： "http://jindo.dev.naver.com/collie"、width：128、height：128、colorardark："＃0000 "、 「#ffffff」、refortlevel：qrcode.correctlevel.h}）; </script>このコンポーネントの使用を理解することにより、以下に示すように、テスト用のプロジェクトに実際のコードを追加できます。
<テーブルボーダー= '0' width = '100％'> <tr> <td>デバイスqrコード（9001）：<br/> <div id = "imgdevice9001"> </div> </td> <td>デバイスコード（9002）：<br/> <div id = "imgdevice9002"> </div </</td> <> <> <> <> <> </td> /> <div id = "imgdevice9003"> </div> </td> </tr> <tr style = "height：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）.css（ "height"、 "100px"）; // qrcodejs var qrcode = new qrcode（document.getElementbyid（ "imgdevice" + i）、{text：url、width：128、height：128、colordark： " "#ffffff"、refortlevel：qrcode.correctlevel.h}）;}最終インターフェイスで生成されたQRコードを以下に示します。
3。バーコードとQRコードの印刷と処理
QRコードとバーコードの生成を紹介します。彼らの印刷には、私が紹介した印刷用のクロッドを使用できます。知る必要がある場合は、MVC+EasyUI Web Development Frameworkに基づいたエッセイを参照してください。クラウド印刷を使用して、C-Lodopを制御してページを印刷したり、税関宣言とWaybill情報を設定したりします。
ここで紹介する印刷は、このコントロールの印刷プロセスにも基づいています。
もちろん、印刷する場合は、Printsコンポーネントを処理に使用することもできます（詳細については、[9]に基づくBootstrap Metronic Development Frameworkのエクスペリエンスサマリーを参照して、Webページコンテンツの印刷プレビューと保存を実現しますが）が、全体的な効果は上記のClodopの印刷効果ほど良くありません。
JSコードの印刷は次のとおりであり、次の2つの機能の1つを処理できます。
// format output関数printbarcodewithtable（）{lodop = getLodop（）; lodop.print_init（ "barcode_format output"）; var strhtml = "<table border = '' width = '100％'>"; strhtml = strhtml + " $（ "＃bardiv1"）。html（）; strhtml = strhtml + "</td> </tr>"; strhtml + "<tr> <td>"; strhtml + $（ "＃bardiv2"）。 "</td> </tr>"; strhtml = strhtml + "<tr> <td>"; strhtml = strhtml + $（ "＃bardiv3"）。html（）; strhtml + "</td> </>" strhtml）; lodop.set_show_mode（ "preview_in_browse"、1）; lodop.preview（）;} //ページング出力関数printbarcodewithpaging（）{lodop = getLodop（）; lodop.print_init（ "barcode_paging output"）; barcode_paging "）; 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 code function printqrcode2（）{createprintdata（$（ "＃qrcode"）。html（））; lodop.set_show_mode（ "preview_in_browse"、1）; lodop.preview（）;} //印刷データ構築機能createprintdata（html）{html） getLodop（）; lodop.print_init（ ""）; // var strbodystyle = "<link type = 'text/css' rel = 'styleSheet' href = '/content/themes/default/style.css'/>"; var strbodystyle = "<style> <！ - border：1; backgruation-color： } "; strbodystyle + =" th {background-color：＃f1f1f3; padding-left：5px; border：1} - > </style> "; var strformhtml = strbodystyle +" <body> " + html +" </body> "; loddd_print_htm（20、710、900 strformhtml）; lodop.preview（）;}QRコードの結果は次のように印刷されます。
最後に、バーコード、QRコード、グラフィック印刷関連操作の動的生成を完了しました。モジュール全体のインターフェイスを以下に示します。
バーコードとQRコードの処理に関して、ここで紹介したバーコードコンポーネントJSBarCodeおよびQRコードコンポーネントQRCODEJSは、当社の要件のほとんどを満たし、使いやすく簡潔な非常に優れたオープンソースJSコンポーネントです。これらのコンテンツがあなたのプロジェクトにインスピレーションと有用性を提供できることを願っています。
上記は、バーコードとQRコードの生成と印刷を実装するためのブートストラップベースのメトロニックフレームワークです。私はそれが誰にでも役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は、すべての人に時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！