最近在做項目時遇到了生成條形碼的需求。其實條形碼的生成無非是生成一個代表某種特定信息的由粗細不等的線條組成的圖片而已。解決方案也分兩種,我們分別嘗試了後臺的JBarcode(java方法,感興趣可以自己找)和前臺的JsBarcode。本文將主要講一講JsBarcode,JsBarcode在github上相當火爆,搜索barcode匹配的第一個開源項目就是它了,它的使用也非常簡單。
1.首先你需要引入相關的JS,使用JsBarcode,你只需要引入JQuery和JsBarcode,一定要注意引用順序,JsBarcode的方法會依賴JQuery,所以一定要先引入JQuery。我就在這個引入順序上栽了坑。注意引入最好引用JsBarcode.all.js,因爲我發現JsBarcode.all.min.js經過壓縮、混淆之後有些東西就找不到了會報ERROR,至於怎麼搞到相應的js文件,我這裏將找到的可以使用的文檔傳到了百度雲,請點擊打開鏈接
2.然後的工作也很簡單,在你的html頁面的正確位置寫下用來存放條形碼圖片的容器,JsBarcode做的很強大,svg,canvas,img標籤都可以,話不多說,給大家放個簡單的代碼,一看便知
<span style="font-family:Microsoft YaHei;font-size:14px;"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jsbarcode測試</title>
<!--百度jQuery引用地址-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="js/JsBarcode.all.js"></script>
</head>
<body>
<!--方式1-->
<svg id="barcode"></svg>
<hr>
<!--方式2-->
<canvas id="canvas"></canvas>
<hr>
<!--方式3-->
<img id="bcode"/>
<hr>
<script>
$("#barcode").JsBarcode('Hi!');//or JsBarcode("#barcode", "Hi!");
$("#canvas").JsBarcode('Hello world!');//or JsBarcode("#barcode", "Hello world!");
$("#bcode").JsBarcode("I'm bwju!");//or JsBarcode("#barcode", "I'm bwju!");
</script>
</body>
</html></span>
瀏覽器中直接運行無壓力,需要注意的是我是從網上引的JQuery不是本地哦,斷網的朋友要是跑不出結果得注意了哈。。。下面給出瀏覽器結果截圖
3.上面只是做了一個最簡單的demo,JsBarcode基本符合我們所有的要求,例如不同的碼制,文字的樣式,條碼的樣式等等,都可以直接在js裏設置,更詳細的內容下面給出github上的鏈接,點擊打開鏈接,希望大家都能實現自己想要的功能。。。
項目明天甲方改需求了,做了很多頁面然後告訴我們說不讓用easyui,那得改多少東西啊,真是無力吐槽。。。話說什麼時候能發項目的錢啊,假期也不能回家。。。
您的幫助是我莫大的鼓勵!喜歡的話可以掃描左側二維碼隨意打賞哈~支付寶微信都可以,歡迎看看我的其他文章~
這篇文章目前收到了不少朋友的支持,在這裏謝謝你們了,打賞有價,支持與鼓勵無價!