js生成条形码插件

时间：2024-08-07 13:03:14
<!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>

相关文章