溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“JS怎么使用jsBarcode生成條形碼”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“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!");
參數設置（options）
| option | 默認值 | 類型 | 說明 |
|---|---|---|---|
| format | “auto” (CODE128) | String | 條形碼的類型 |
| width | 2 | Number | 每個條條的寬度，注意這里不是指整個條形碼的寬度 |
| height | 100 | Number | 整個條形碼的寬度 |
| displayValue | true | Boolean | 是否顯示條形碼下面的文字 |
| fontOptions | “” | String | 設置條形碼文本的粗體和斜體樣式 bold / italic / bold italic |
| font | “monospace” | String | 設置條形碼顯示文本的字體 |
| textAlign | “center” | String | 條形碼文本的水平對齊方式，和css中的類似： left / center / right |
| textPosition | “bottom” | String | 條形碼文本的位置 bottom / top |
| textMargin | 2 | Number | 條形碼文本 和 條形碼之間的間隙大小 |
| fontSize | 20 | Number | 設置條形碼文本的字體大小 |
| 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 | 執行完條形碼的一個回調函數，正確true 錯誤false |
options 使用方法
let options = {
fontSize: 12,
background: "#cccccc"
};
JsBarcode("#barcode", "Hi world!", options);<!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生成條形碼”的內容了，經過本文的學習后，相信大家對JS怎么使用jsBarcode生成條形碼這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
