vue3.0项目生成标签条形码（插件：jsbarcode）并打印（插件：Print.js）支持pda扫码枪扫描

最新推荐文章于 2025-08-13 12:42:08 发布

原创

最新推荐文章于 2025-08-13 12:42:08 发布 · 5.9k 阅读

本文介绍了在供应链管理中如何使用JavaScript库jsbarcode生成条形码，探讨了不同格式的适用性，如SVG、img和canvas，以及在打印功能中的挑战，如宽度控制和PDA扫码问题。此外，还提到了Print.js插件在HTML和PDF打印中的使用和常见问题解决方案。

文章目录

功能场景

功能场景：供应链中对一些货品根据赋码规则进行赋码，赋码之后生成根据赋码结果生成条形码，执行打印功能，贴在货品之上，打印之后可以用pda的手枪进行扫描，进行上架，下架，发货，移库，等操作。

生成条形码设置

引入jsbarcode

安装jsbarcode库，这个库 vue2和vue3都兼容

npm install jsbarcode --save
// 或
npm i jsbarcode
// 我目前做的项目是pnpm
pnpm i jsbarcode

script 标签引入js文件

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

在需要的页面进行引入

import JsBarcode from 'jsbarcode';

创建条形码生成容器(有三种方法)

<!-- 第一种svg格式 优点清晰度高 缺点在面积小的纸张兼容性不好不能约束尺寸 不适用打印功能(天坑 踩过) -->
<svg id="svgcode"></svg>
 
<!-- 第二种img格式 优点适用打印页面能约束宽高 缺点清晰度低点 但是能扫出来  -->
<img id="imgcode" />
 
<!-- 第三种画布格式   pda扫不出来 -->  
<canvas id="canvascode"></canvas>

参数设置（options）

option	默认值	类型	说明
format	“auto” (CODE128)	String	条形码的类型
width	2	Number	每个条条的宽度，注意这里不是指整个条形码的宽度
height	100	Number	整个条形码的宽度
displayValue	true	Boolean	是否显示条形码下面的文字
fontOptions	“”	String	设置条形码文本的粗体和斜体样式 bold / italic / bold italic
font	“auto” (CODE128)	String	条形码的类型
format	““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);

有批量生成和单独生成功能批量生成存放的容器必须要是唯一的

单独生成功能
```
<svg 
```

标签

#javascript #开发语言 #前端 #vue.js #typescript

最低0.47元/天解锁文章