【Javascript】引用JsBarcode插件純JS生成一維碼（參數介紹）
當前位置：點晴教程→知識管理交流
→『 技術文檔交流 』
<html> <head> <script src="jquery-2.1.1.min.js"></script> <script src="JsBarcode.all.js"></script> </head> <body> <svg id="svg_barcode"></svg> <!-- or --> <canvas id="canvas_barcode"></canvas> <!-- or --> <img id="img_barcode"/> <script> $("#svg_barcode").JsBarcode('Hi!'); //或 JsBarcode("#svg_barcode", "Hi!"); $("#canvas_barcode").JsBarcode('Hello world!'); //或 JsBarcode("#canvas_barcode", "Hello world!"); $("#img_barcode").JsBarcode("I'm huangenai!"); //或 JsBarcode("#img_barcode", "I'm bwju!"); </script> </body> </html>
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 高級用法： JsBarcode("#img_code", "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//設置條形碼周圍的空白邊距 });
簡化用法（只加上需要特別說明的參數）： JsBarcode("#img_code", "Hello", {format: "code39"}); JsBarcode("#img_code", "Hi!", { fontSize: 40, background: "#4b8b7f", lineColor: "#ffffff", margin: 40, marginLeft: 80 }); JsBarcode("#img_code", "Hi!", { textAlign: "left", textPosition: "top", font: "cursive", fontOptions: "bold", fontSize: 40, textMargin: 15, text: "Special" }); JsBarcode("#img_code", "1234", { format: "pharmacode", displayValue: false, height: 50, width: 6 }); 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 該文章在 2023/6/3 23:19:57 編輯過 |
關鍵字查詢
相關文章
正在查詢... 
|
400 186 1886
