JS怎么使用jsBarcode生成條形碼

發(fā)布時間：2023-05-10 14:47:52 來源：億速云閱讀：654 作者：iii 欄目：開發(fā)技術(shù)

這篇文章主要講解了“JS怎么使用jsBarcode生成條形碼”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“JS怎么使用jsBarcode生成條形碼”吧！

一、安裝

script 引入

<script src="JsBarcode.all.min.js"></script>

npm方式

安裝：

npm install jsbarcode --save

頁面引入：

import JsBarcode from "jsbarcode";

二、使用

HTML部分加入svg容器

<svg id="barcode"></svg>

JS 代碼部分

JsBarcode("#barcode", "Hi world!");

三、結(jié)果

JS怎么使用jsBarcode生成條形碼

參數(shù)設(shè)置（options）

option	默認(rèn)值	類型	說明
format	“auto” (CODE128)	String	條形碼的類型
width	2	Number	每個條條的寬度，注意這里不是指整個條形碼的寬度
height	100	Number	整個條形碼的寬度
displayValue	true	Boolean	是否顯示條形碼下面的文字
fontOptions	“”	String	設(shè)置條形碼文本的粗體和斜體樣式 bold / italic / bold italic
font	“monospace”	String	設(shè)置條形碼顯示文本的字體
textAlign	“center”	String	條形碼文本的水平對齊方式，和css中的類似： left / center / right
textPosition	“bottom”	String	條形碼文本的位置 bottom / top
textMargin	2	Number	條形碼文本和條形碼之間的間隙大小
fontSize	20	Number	設(shè)置條形碼文本的字體大小
background	“#ffffff”	String (CSS color)	整個條形碼容器的背景顏色
lineColor	“#000000”	String (CSS color)	條形碼和文本的顏色
margin	10	Number	整個條形碼的外面距
marginTop	undefined	Number	整個條形碼的上邊距
marginBottom	undefined	Number	整個條形碼的下邊距
marginLeft	undefined	Number	整個條形碼的左邊距
marginRight	undefined	Number	整個條形碼的右邊距
valid	function(valid){}	Function	執(zhí)行完條形碼的一個回調(diào)函數(shù)，正確true 錯誤false

options 使用方法

let options = {
  fontSize: 12,
  background: "#cccccc"
};
JsBarcode("#barcode", "Hi world!", options);

附：JsBarcode - 生成條形碼并打印出來

<!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>Document</title>
    <script src="js/jquery-1.10.2.min.js"></script>
    <script src="js/JsBarcode.all.min.js"></script>
    <script src="js/jQuery.print.js"></script>
</head>

<body>
    <input id="code" type="text" placeholder="請輸入條形碼"><button id="save">生成條形碼</button>
    <br>
    <div id="PrintSection">
        <img id="test">
    </div>
    <br>
    <button id="print">打印</button>
    <script>
        $(function () {
            // 生成條形碼
            $("#save").click(function () {
                var requestNo = $("#code").val();
                if (requestNo == "") {
                    return false;
                } else {
                    $("#test").JsBarcode(requestNo);
                }
            })
            // 打印條形碼
            $("#print").click(function () {
                $("#PrintSection").print({
                    globalStyles: true,
                    mediaPrint: false,
                    stylesheet: null,
                    noPrintSelector: ".btncontainer",
                    iframe: true,
                    append: null,
                    prepend: null,
                    manuallyCopyFormValues: true,
                    deferred: $.Deferred(),
                    timeout: 750,
                    title: null,
                    doctype: '<!doctype html>'
                });
            })



        })
    </script>
</body>

</html>

感謝各位的閱讀，以上就是“JS怎么使用jsBarcode生成條形碼”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對JS怎么使用jsBarcode生成條形碼這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！

向AI問一下細(xì)節(jié)

JS怎么使用jsBarcode生成條形碼

一、安裝

二、使用

三、結(jié)果

附：JsBarcode - 生成條形碼并打印出來

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽

二、使用