js生成条形码插件

最新推荐文章于 2024-08-08 07:18:13 发布

alexcook2010

最新推荐文章于 2024-08-08 07:18:13 发布

阅读量97

点赞数

原文链接：http://www.cnblogs.com/pcx105/p/8486708.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>

转载于:https://www.cnblogs.com/pcx105/p/8486708.html

alexcook2010

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js生成条形码插件

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta h...
复制链接

扫一扫