【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 编辑过 |
关键字查询
相关文章
正在查询... |