JS條形碼(一維碼)插件JsBarcode用法詳解【編碼類型、參數(shù)、屬性】
本文實例講述了JS條形碼插件JsBarcode用法。分享給大家供大家參考，具體如下：
這里介紹一下在GitHub生成條形碼的js插件→JsBarcode
條碼支持的有:
CODE128
CODE128 (自動模式切換)
CODE128 A/B/C (強制模式)
EAN
EAN-13
EAN-8
EAN-5
EAN-2
UPC (A)
CODE39
ITF-14
MSI
MSI10
MSI11
MSI1010
MSI1110
Pharmacode
Codabar
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no" />
<title></title>
<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>
<svg id="svgcode"></svg>
<!-- or -->
<canvas id="canvascode"></canvas>
<!-- or -->
<img id="imgcode" />
<script>
$("#svgcode").JsBarcode('Hi!');//or JsBarcode("#svgcode", "Hi!");
$("#canvascode").JsBarcode('Hello world!');//or JsBarcode("#canvascode", "Hello world!");
$("#imgcode").JsBarcode("I'm huangenai!");//or JsBarcode("#imgcode", "I'm bwju!");
</script>
</body>
</html>
JsBarcode 我們還可以設置條碼的一些屬性（可設置屬性詳細介紹 鏈接：https://github.com/lindell/JsBarcode/wiki/Options）
<img />
<script>
JsBarcode("#imgcode", "123", {
format: "CODE39",//選擇要使用的條形碼類型
width:3,//設置條之間的寬度
height:100,//高度
displayValue:true,//是否在條形碼下方顯示文字
text:"456",//覆蓋顯示的文本
fontOptions:"bold italic",//使文字加粗體或變斜體
font:"fantasy",//設置文本的字體
textAlign:"left",//設置文本的水平對齊方式
textPosition:"top",//設置文本的垂直位置
textMargin:5,//設置條形碼和文本之間的間距
fontSize:15,//設置文本的大小
background:"#eee",//設置條形碼的背景
lineColor:"#2196f3",//設置條和文本的顏色。
margin:15//設置條形碼周圍的空白邊距
});
</script>
GitHub：https://github.com/lindell/JsBarcode
條碼生成器：http://lindell.me/JsBarcode/generator/
JsBarcode示例與設置：http://codepen.io/lindell/pen/mPvLXx?editors=1010
簡單的JsBarcode演示：http://codepen.io/lindell/pen/eZKBdO?editors=1010
更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript圖片操作技巧大全》、《JavaScript切換特效與技巧總結》、《JavaScript圖形繪制技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript錯誤與調試技巧總結》、《JavaScript數(shù)據(jù)結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數(shù)學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
相關文章
下面小編就為大家?guī)硪黄昝澜鉀QJS文件頁面加載時的阻塞問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-12-12
使用JAVASCRIPT控制Textarea內容自適應高度，實施起來很簡單，很平滑。2013-10-10
如何高效率去掉js數(shù)組中的重復項呢？下面小編就為大家?guī)硪黄咝嗜サ鬸s數(shù)組中重復項的實現(xiàn)方法。希望對大家有所幫助。一起跟隨小編過來看看吧2016-04-04
這篇文章主要介紹了bootstrap 彈出框modal添加垂直方向滾軸效果,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-07-07
這篇文章主要為大家詳細介紹了js實現(xiàn)指定紅包順序和金額算法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
JS實現(xiàn)瀏覽器點擊下載圖片功能案例分析【親測有效】
這篇文章主要介紹了JS實現(xiàn)瀏覽器點擊下載圖片功能,對比分析了同源與不同源兩種解決方案,并以實際案例形式分析了不同源情況下針對文件點擊下載的具體實現(xiàn)技巧與相關注意事項,需要的朋友可以參考下2023-04-04
這篇文章主要為大家詳細介紹了JS+HTML+CSS實現(xiàn)輪播效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
ABP是“ASP.NET Boilerplate Project (ASP.NET樣板項目)”的簡稱，它是一個成熟的開源框架，基于DDD+Repository模式，自帶Zero權限和認證模塊，避免了從零開始搭建框架的煩惱。今天來分享下如何在ABP框架的模式里面使用bootstrapTable組件。2017-07-07
這篇文章主要給大家介紹了關于Require.JS中幾種define定義方式的相關資料，文中通過示例代碼介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面來一起看看吧。2017-06-06
javascript運動框架用法實例分析(實現(xiàn)放大與縮小效果)
這篇文章主要介紹了javascript運動框架用法,結合實例形式分析了javascript運動框架的實現(xiàn)與使用技巧,可實現(xiàn)div塊的放大與縮小功能,需要的朋友可以參考下2016-01-01