JS怎么使用jsBarcode生成条形码

2023-07-05 18:07:09 135人浏览薄情痞子

摘要

这篇文章主要讲解了“js怎么使用jsBarcode生成条形码”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“JS怎么使用jsBarcode生成条形码”吧！一、安装script 引入<sc

这篇文章主要讲解了“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!");

三、结果

JS怎么使用jsBarcode生成条形码

参数设置（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);

附：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生成条形码”的内容了，经过本文的学习后，相信大家对JS怎么使用jsBarcode生成条形码这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: JS怎么使用jsBarcode生成条形码

本文链接: https://www.lsjlt.com/news/354253.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341