基於Metronic的Bootstrap開發框架經驗總結（14）--條碼和二維碼的生成及列印處理

来源:http://www.cnblogs.com/wuhuacong/archive/2016/08/28/5814867.html
-Advertisement-
Play Games

在很多項目裡面，對條形碼和二維碼的生成和列印也是一種很常見的操作，在Web項目裡面，我們可以利用JS生成條形碼和二維碼的組件有很多。本文引入兩個比較廣泛使用的JS組件，用來處理條形碼和二維碼的生成處理，並介紹如何利用CLODOP組件實現內容的列印輸出。生成條形碼使用組件JsBarcode，生成二維碼... ...


在很多項目裡面，對條形碼和二維碼的生成和列印也是一種很常見的操作，在Web項目裡面，我們可以利用JS生成條形碼和二維碼的組件有很多。本文引入兩個比較廣泛使用的JS組件，用來處理條形碼和二維碼的生成處理，並介紹如何利用CLODOP組件實現內容的列印輸出。
生成條形碼使用組件JsBarcode，生成二維碼使用組件qrcodejs。

1、條形碼的生成

條碼的作用一般在一些商品標簽上，方便使用條碼槍快速、準確錄入信息。
如下所示是一種條形碼


這裡條形碼生成使用了JsBarcode組件進行處理，它支持很多格式的條碼格式，如下所示。


它的簡單代碼例子如下所示。

//HTML代碼
<svg id="barcode"></svg>
<!-- or -->
<canvas id="canvas"></canvas>
<!-- or -->
<img id="barcode"/>

//JS代碼
JsBarcode("#barcode", "Hi!");
// or with jQuery
$("#barcode").JsBarcode("Hi!");

 

生成的圖片格式如下所示。


JsBarcode組件支持多種選項參數的設置，如下所示的代碼

JsBarcode("#barcode", "1234", {
  format: "pharmacode",
  lineColor: "#0aa",
  width:4,
  height:40,
  displayValue: false
});

JsBarcode("#barcode")
  .options({font: "OCR-B"}) // Will affect all barcodes
  .EAN13("1234567890128", {fontSize: 18, textMargin: 0})
  .blank(20) // Create space between the barcodes
  .EAN5("12345", {height: 85, textPosition: "top", fontSize: 16, marginTop: 15})
  .render();

 

通過該組件的案例代碼介紹，我們可以瞭解到生成常規二維碼的使用方式。
例如我們在界面上添加了以下HTML代碼。

<div class="row" id="barDiv1">
    <div class="col-md-4 col-sm-4 col-xs-4">
        條形碼(770 145 896 701)：<br />
        <img alt="" id="barcode1" />
    </div>
    <div class="col-md-4 col-sm-4 col-xs-4">
        條形碼(770 145 896 702)：<br />
        <img alt="" id="barcode2" />
    </div>
    <div class="col-md-4 col-sm-4 col-xs-4">
        條形碼(770 145 896 703)：<br />
        <img alt="" id="barcode3" />
    </div>
</div>

 

然後通過JS代碼實現二維碼的生成。

//使用JsBarcode生成條形碼
for (var i = 1; i < 10; i++) {
    var barcodeValue = "77014589670" + i;//首碼 + 數值
    JsBarcode("#barcode" + i, barcodeValue, {
        format: "CODE128",
        displayValue: true, 
        fontSize: 24,
        lineColor: "#0cc"
    });
}

 

最後我們可以看到具體的生成效果如下所示。


從這裡我們可以看到，使用JS實現條形碼的生成是非常方便簡潔的，同事速度也是很不錯的。

2、二維碼的生成

二維碼實現可以通過使用組件qrcodejs進行生成，二維碼也可以使用組件jquery-qrcode進行生成，也相對比較簡潔，不過列印二維碼文檔的時候，jquery-qrcode沒有顯示二維碼圖片，而組件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,
    colorDark : "#000000",
    colorLight : "#ffffff",
    correctLevel : QRCode.CorrectLevel.H
});
</script>

 

通過瞭解該組件的使用，我們可以在項目中增加一個實際的代碼進行測試，如下所示。

<table border='0' width='100%'>
    <tr>
        <td>
            設備二維碼(9001)：<br />
            <div id="imgDevice9001"></div>
        </td>
        <td>
            設備二維碼(9002)：<br />
            <div id="imgDevice9002"></div>
        </td>
        <td>
            設備二維碼(9003)：<br />
            <div id="imgDevice9003"></div>
        </td>
    </tr>
    <tr style="height:20px"><td colspan="3"></td></tr>
    ......
</table>

 

具體我們可以利用JS動態生成相關的二維碼。

//設備圖片二維碼
for (var i = 9001; i < 9010; i++) {
    var url = "http://www.iqidi.com/H5/device?devicecode=" + i;

    //使用jquery.qrcode的做法
    //$("#imgDevice" + i).qrcode({ width: 100, height: 100, text: url });
    //$("#imgDevice" + i).css("height", "100px");

    //使用qrcodejs的做法
    var qrcode = new QRCode(document.getElementById("imgDevice" + i), {
        text: url,
        width: 128,
        height: 128,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H
    });
}

 

 

最後界面生成的二維碼如下所示。

3、條形碼和二維碼的列印處理

介紹我二維碼和條形碼的生成，關於它們的列印，可以利用我介紹過的CLODOP進行列印處理，需要瞭解可以參考下隨筆《基於MVC+EasyUI的Web開發框架經驗總結（16）--使用雲列印控制項C-Lodop列印頁面或套打報關運單信息》
我們在這裡介紹的列印，也是基於這個控制項的列印處理的。
當然，如果列印，也是可以利用PrintThis這個組件進行處理的（詳細可以參考隨筆《基於Metronic的Bootstrap開發框架經驗總結（9）--實現Web頁面內容的列印預覽和保存操作》），不過總體效果沒有上面的CLODOP的列印效果佳。
列印JS代碼如下所示，可以採用下麵兩個函數的其中之一進行處理。

//使用表格格式化輸出
function PrintBarcodeWithTable() {
    LODOP = getLodop();
    LODOP.PRINT_INIT("條碼_格式化輸出");
    var strHTML = "<table border='0' width='100%' >";
    strHTML = strHTML + "<tr><td>";
    strHTML = strHTML + $("#barDiv1").html();
    strHTML = strHTML + "</td></tr>";
    strHTML = strHTML + "<tr><td>";
    strHTML = strHTML + $("#barDiv2").html();
    strHTML = strHTML + "</td></tr>";
    strHTML = strHTML + "<tr><td>";
    strHTML = strHTML + $("#barDiv3").html();
    strHTML = strHTML + "</td></tr>";
    LODOP.ADD_PRINT_TABLE(88, 200, 700, 900, strHTML);

    LODOP.SET_SHOW_MODE("PREVIEW_IN_BROWSE", 1);
    LODOP.PREVIEW();
}

//使用分頁輸出
function PrintBarcodeWithPaging() {
    LODOP = getLodop();
    LODOP.PRINT_INIT("條碼_分頁輸出");
    LODOP.ADD_PRINT_HTM(100, 100, 600, 800, $("#barDiv1").html());
    LODOP.NewPage();
    LODOP.ADD_PRINT_HTM(100, 100, 600, 800, $("#barDiv2").html());
    LODOP.NewPage();
    LODOP.ADD_PRINT_HTM(100, 100, 600, 800, $("#barDiv3").html());
    LODOP.NewPage();

    LODOP.SET_SHOW_MODE("PREVIEW_IN_BROWSE", 1);
    LODOP.PREVIEW();
}

 

條碼的列印效果如下所示。

而列印二維碼的JS代碼如下所示。

//列印二維碼
function PrintQrcode2() {
    CreatePrintData($("#qrcode").html());
    LODOP.SET_SHOW_MODE("PREVIEW_IN_BROWSE", 1);
    LODOP.PREVIEW();
}

//列印數據構建
function CreatePrintData(html) {
    LODOP = getLodop();

    LODOP.PRINT_INIT("");
    //var strBodyStyle = "<link type='text/css' rel='stylesheet' href='/Content/Themes/Default/style.css' />";
    var strBodyStyle = "<style><!--table { border:1;background-color: #CBCBCC } td {border: 1; }";
    strBodyStyle += " th { background-color:#F1F1F3;padding-left:5px;border:1}--></style>";
    var strFormHtml = strBodyStyle + "<body>" + html + "</body>";
    LODOP.ADD_PRINT_HTM(20, 40, 710, 900, strFormHtml);
    LODOP.PREVIEW();
}

 

得到的二維碼列印效果如下所示。


最終完成了這個關於條形碼、二維碼的動態生成，以及圖形列印的相關操作了。整個模塊的界面如下所示。


關於條形碼、二維碼的處理，我們這裡引入的條形碼組件JsBarcode和二維碼組件qrcodejs是非常不錯的開源JS組件，滿足了我們大多數的要求，而且使用方便、簡潔，希望這些內容能夠給你的項目提供靈感及用處。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 為基於busybox根文件系統的ARM嵌入式Linux交叉編譯dropbear使能SSH
    原創作品，允許轉載，轉載時請務必以超鏈接形式標明文章、作者信息和本聲明。否則將追究法律責任。 最近使用busybox為基於ARM的板卡定製了一個極簡單的根文件系統，由於busybox僅支持telnet而不支持ssh，本文將詳細描述如何交叉編譯dropbear並將其移植到目標板卡上使能dropbear ...
  • .NET Core 系列5 ：使用 Nuget打包類庫
    以往做nuget包我們一般要麼用命令行,要麼用nuget的圖形化界面去做,但是一些操作比較麻煩.比如引入命名空間,引入第三方nuget包。這些在.NET Core項目里卻很簡單，只需要使用命令行dotnet pack，在.NET Core系列 ： 1、.NET Core 環境搭建和命令行CLI入門 ...
  • AD 域賬號登錄
    域服務數據讀寫，有倆種模式 1、輕量級的數據讀取 2、DectoryEntry 可以獲取整個伺服器的數據，也可以修改其中的信息 參考類似文章： http://www.it165.net/pro/html/201308/6829.html ...
  • WPF 提示框、確認框、確認輸入框
    1、提示框 分為提示、異常、失敗、成功幾種類型 方法： /// <summary> /// 彈出提示 /// 標題：提示 /// </summary> /// <param name="strContent">內容</param> public static void ShowInfoMessage ...
  • C# 自定義文件圖標 雙擊啟動 （修改註冊表）
    程式生成的自定義文件，比如尾碼是.test 這種文件怎麼直接啟動打開程式，並打開本文件呢 1、雙擊打開 2、自定義的文件，有圖標顯示 3、自定義的文件，點擊右鍵有相應的屬性 後臺代碼：（如何在註冊表中修改信息） 在修改了註冊表信息後，雙擊文件是啟動了軟體，之後怎麼在代碼中操作？ 然後可以在主程式lo ...
  • C#基礎-關於用json給控制台程式傳值的坑
    上周遇到了一個非常詭異的坑，首先寫了兩個程式，第一個程式輸出成dll，第二個程式是控制台程式。 在第一個程式里，我使用了process去啟動第二個程式，同時傳入了一個Json作為參數，即： Process.Start(program2.exe, Jsonpara); 這個Jsonpara是將一個Li ...
  • C/S打包 客戶端/windows程式 InstallShield
    開發完成後，我們可以直接在Debug目錄下啟動exe，運行程式。 但是，要如何安裝，添加到開始菜單、桌面快捷方式、任務欄等。如Office安裝效果： 開始菜單： 快捷菜單： 打包步驟： 1、下載InstallShield安裝程式 官網下載地址：http://learn.flexerasoftware ...
  • StackExchange.Redis幫助類解決方案RedisRepository封裝（基礎配置）
    關鍵字RedisHelper,StackExchange.Redis,Redis幫助類 ...
一周排行
    -Advertisement-
    Play Games
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類