快捷導(dǎo)航

JS使用jsBarcode生成條形碼(一維碼)簡(jiǎn)單實(shí)例

更新時(shí)間：2023年03月29日 11:10:07 作者：最兇殘的小海豹

JsBarcode是一個(gè)用JavaScript編寫的條形碼生成器,它支持多種條形碼格式,可在瀏覽器和Node.js中使用,下面這篇文章主要給大家介紹了關(guān)于JS使用jsBarcode生成條形碼(一維碼)的相關(guān)資料,需要的朋友可以參考下

一、安裝

script 引入

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

地址：https://cdn.jsdelivr.net/npm/jsbarcode@3.11.5/dist/JsBarcode.all.min.js

也可以進(jìn)官網(wǎng)查看地址。

npm方式

安裝：

npm install jsbarcode --save

頁(yè)面引入：

import JsBarcode from "jsbarcode";

二、使用

HTML部分加入svg容器

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

JS 代碼部分

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

三、結(jié)果

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

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

options 使用方法

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

附：JsBarcode - 生成條形碼并打印出來(lái)

<!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="請(qǐng)輸入條形碼"><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>