Во многих проектах генерация и печать штрих -кодов и QR -кодов также являются очень распространенной работой. В веб -проектах мы можем использовать JS для генерации штрих -кодов и QR -кодов. В этой статье представлены два широко используемых компонента JS для обработки генерации и обработки штрих -кодов и QR -кодов, а также представляет, как использовать компонент Clodop для достижения вывода печати контента.
Сгенерируйте штрих -код с использованием компонента jsbarcode и генерируйте QR -код с использованием компонентов qrcodejs.
1. Генерация штрих -кодов
Функция штрих -кодов, как правило, выполняется на некоторых метках продукта, что облегчает использование пистолетов штрих -кодов для быстрого и точного ввода информации.
Ниже приведен штрих -код
Здесь генерация штрих -кода обрабатывается с использованием компонента jsbarcode, который поддерживает форматы штрих -кода во многих форматах, как показано ниже.
Его простой пример кода показан ниже.
// html code <svg id = "штрих-код"> </svg> <!-или-> <canvas id = "canvas"> </canvas> <!-или-> <id id = "штрих-код" // js code jsbarcode ("#barcode", "Hi!"); // или с Jquery $ ("###############################barcode (#barcode", "Hi!");Сгенерированный формат изображения показан ниже.
Компонент JSBarcode поддерживает настройку нескольких параметров опции, как показано в следующем коде.
Jsbarcode ("#sarcode", "1234", {format: "Pharmacode", LineColor: "#0AA", ширина: 4, высота: 40, DisplayValue: false}); JSBarcode ("#штрих Barcodes.ean13 ("1234567890128", {fontsize: 18, textmargin: 0}). Blank (20) // Создать пространство между штрих -кодами.ean5 ("12345", {Height: 85, Textposition: «Top», 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 = "штрих -код2" /> < /div> <div> barcode (770 145 86 3: "(77 76 3:" /" /> < /div> <div> barcode (770 145 86 3:". /> <img id = "barcode3" /> < /div> < /div>Затем генерация QR -кода реализуется через код JS.
// Использование jsbarcode для генерации штрих -кода для (var i = 1; i <10; i ++) {var barcodevalue = "77014589670" + i; // prefix + numerical jsbarcode ("#barcode" + i, barcodevalue, {формат: "Code128", DisplayValue: trintSizer: fontSizer: fontSizer: fontSizer: fontSizer: fontSizer: fonSizer: fonSizer: fontSizer: fontSifor: "#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, colarcark:"#quallie", width: 128, hiest: 128, "#00sli "#ffffff", recaillevel: qrcode.correctlevel.h}); </script>Понимая использование этого компонента, мы можем добавить фактический код в проект для тестирования, как показано ниже.
<table border='0' width='100%'><tr><td>Device QR code (9001): <br /><div id="imgDevice9001"></div></td><td>Device QR code (9002): <br /><div id="imgDevice9002"></div></td><td>Device QR code (9003): <br /> <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). }); // $ ("#imgdevice" + i) .css ("height", "100px"); // Метод использования qrcodejs var qrcode = new qrcode (document.getelementbyid ("imgdevice" + i), {text: url, width: 128, hiest: 128, colardark: "#№0000",####№0000: "#№0000:"#№00. "#ffffff", recaillevel: qrcode.correctlevel.h});}QR -код, сгенерированный на конечном интерфейсе, показан ниже.
3. Печать и обработка штрих -кодов и QR -кодов
Представьте генерацию QR -кодов и штрих -кодов. Для их печати вы можете использовать Clodop, который я представил для печати. Если вам нужно знать, пожалуйста, обратитесь к эссе на основе структуры веб -разработки MVC+EasyUI. Использование элементов управления облачной печати C-Lodop для печати страниц или установки таможенной объявления и информации о Waybill.
Печать, которую мы представляем здесь, также основана на процессе печати этого элемента управления.
Конечно, если вы печатаете, вы также можете использовать компонент Printthis для обработки (для получения подробной информации, пожалуйста, обратитесь к сводке Metronic Development Bootstrap Metronic, основанной на [9], чтобы реализовать предварительный просмотр печати и сохранение контента веб -страницы), но общий эффект не так хорош, как приведенный выше эффект печати.
Печать кода JS выглядит следующим образом, и одна из следующих двух функций может быть обработана.
// Функция Format Выходной функция printBarcoDewithTable () {lodop = getLodop (); lodop.print_init ("barcode_format output"); var strhtml = "<table border = '0' width = '100%'>"; strhtml = strhtml + "<tr> <td>"; $ ("#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.add_print_table (88, 200, 900, 900, 900, 900, 900, 900, 900, 900, 900, 900, 900, 900, 900, 900, 900, 900, 900, 900, 900, 900, 900, 900, 900, 900, 900, 900 strhtml); lodop.set_show_mode ("preview_in_browse", 1); lodop.preview ();} // Использовать функцию вывода пейджин $ ("#bardiv1"). html ()); lodop.newpage (); lodop.add_print_htm (100, 100, 600, 800, $ ("#bardiv2"). html ()); lodop.newpage (); lodop.add_print_htm (100, 100, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800 $ ("#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 ();} // print data function createprintdata (html) getLodop (); lodop.print_init (""); // var strbodystyle = "<link type = 'text/css' rel = 'stylesheep' href = '/content/themes/default/style.css'/>"; var strbodystyle = "<style> <!-таблица {border: 1; founal-color: #CBC } "; strbodyStyle + =" th {foangy-color:#f1f1f3; padding-left: 5px; граница: 1}-> </style> "; var strformhtml = strbodystyle +" <body> " + html +" </body> "; add_print_htm (20, 40, 710, 900, 900, 900, 900, 900, 900, 900, 900, 900 strformhtml); lodop.preview ();}Результат QR -кода печатается следующим образом.
Наконец, мы завершили динамическую генерацию штрих -кодов, QR -кодов и операций, связанных с графической печатью. Интерфейс всего модуля показан ниже.
Что касается обработки штрих -кодов и QR -кодов, компоненты штрих -кода JSbarcode и QR -код компонент QRCodeJs, которые мы представили здесь, очень хорошие компоненты JS с открытым исходным кодом, которые соответствуют большинству наших требований и просты в использовании и кратком. Я надеюсь, что это содержимое может дать вдохновение и полезность для вашего проекта.
Выше приведено метооборот на основе начальной загрузки для реализации генерации и печати штрих-кодов и QR-кодов. Я надеюсь, что это будет полезно для всех. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит всем вовремя. Большое спасибо за вашу поддержку сайту wulin.com!