您的位置：首页 > Web前端 > JavaScript

js自动生成条形码插件-JsBarcode

2019-01-02 14:15 645 查看


JsBarcode.html

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>js生成条形码插件</title>
<script src="https://cdn.bootcss.com/jsbarcode/3.8.0/JsBarcode.all.min.js"></script>
<style>
* {margin: 0;padding: 0;box-sizing: border-box;}
h3 {text-align: center;font-size: 16px;margin: 10px;}
.box {text-align: center;}
#barcode {width: 200px;}
ul {padding: 5px;}
li {list-style: none;padding: 5px 10px;font-size: 14px;line-height: 18px;}
pre {font-size: 12px;}
</style>
</head>

<body>
<h3>js自动生成条形码插件-JsBarcode</h3>
<div class="box">
<img id="barcode" />
</div>
<ul>
<li>npm官网地址：https://www.npmjs.com/package/jsbarcode</li>
<li>github:https://github.com/lindell/JsBarcode</li>
<li>使用说明：</li>
<li>引入JsBarcode插件：JsBarcode.all.min.js</li>
<li>可以访问：http://www.bootcdn.cn/jsbarcode/</li>
<li>在HTML中放置img标签存放条形码的容器</li>
<li>默认配置项</li>
<li>
<pre>
{
width: 2,//较细处条形码的宽度
height: 100, //条形码的宽度，无高度直接设置项，由位数决定
//也可以通过CSS去调整
quite: 10,
format: "CODE128",
displayValue: false,//是否在条形码下方显示文字
font:"monospace",
textAlign:"center",
fontSize: 12,
background:"",
lineColor:"#000"//条形码颜色
}
</pre>
</li>
</ul>
</body>
<script>
var barcode = document.getElementById('barcode'),
str = "18612908099",
options = {
format: "CODE128",
displayValue: true,
fontSize: 18,
height: 100
};
JsBarcode(barcode, str, options); //原生
// $('#barcode').JsBarcode(string, options); //jQuery
</script>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航