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

文章目录

    • 功能场景
    • 生成条形码设置
    • 打印功能
    • 踩坑

功能场景

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

生成条形码设置

  1. 引入jsbarcode
  • 安装jsbarcode库，这个库 vue2和vue3都兼容
    npm install jsbarcode --save
// 或
npm i jsbarcode
// 我目前做的项目是pnpm
pnpm i jsbarcode
  • script 标签引入js文件
    <script src="JsBarcode.all.min.js"></script>
  1. 在需要的页面进行引入
import JsBarcode from 'jsbarcode';
  1. 创建条形码生成容器(有三种方法)
<!-- 第一种svg格式 优点清晰度高 缺点在面积小的纸张兼容性不好不能约束尺寸 不适用打印功能(天坑 踩过) -->
<svg id="svgcode"></svg><!-- 第二种img格式 优点适用打印页面能约束宽高 缺点清晰度低点 但是能扫出来  -->
<img id="imgcode" /><!-- 第三种画布格式   pda扫不出来 -->  
<canvas id="canvascode"></canvas>
  1. 参数设置（options）
option默认值类型说明
format“auto” (CODE128)String条形码的类型
width2Number每个条条的宽度，注意这里不是指整个条形码的宽度
height100Number整个条形码的宽度
displayValuetrueBoolean是否显示条形码下面的文字
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
textMargin2Number条形码文本 和 条形码之间的间隙大小
fontSize20Number设置条形码文本的字体大小
background“#ffffff”String (CSS color)整个条形码容器的背景颜色
lineColor“#000000”String (CSS color)条形码和文本的颜色
margin10Number整个条形码的外面距
marginTopundefinedNumber整个条形码的上边距
marginBottomundefinedNumber整个条形码的下边距
marginLeftundefinedNumber整个条形码的左边距
marginRightundefinedNumber整个条形码的右边距
validfunction(valid){}Function执行完条形码的一个回调函数，正确true 错误false
options 使用方法
let options = {fontSize: 12,background: "#cccccc"
};
JsBarcode("#barcode", "Hi world!", options);
  1. 有批量生成和单独生成功能 批量生成存放的容器必须要是唯一的

  • 单独生成功能

    <svg class="barcodeSvg" style="margin: auto" ref="barcodeRef" />
// js部分
const barcodeRef = ref(null);
const options = reactive({// format: 'EAN13', // 格式height: 68,width: 1.1,// text: text,fontSize: 16,background: '#ffffff',lineColor: 'black',});const render = (text) => {JsBarcode(barcodeRef.value, text, options);};

    在这里插入图片描述

  • 批量生成

     //批量打印的渲染DOM结构(不需要可以直接跳过)
<divclass="prinPage"v-for="(item, index) in prinList":key="index"><img :id="'barcode-' + index"/>
</div>let prinList = ref([]);
let getBarcode = () => {let options = {text: "编码内容",//等同于JsBarcode第二个参数 fontSize: 10,//条形码下方文字的大小height: 60,//条形码的高度width: 2.5,//条形码 条的宽度不是总体的宽度 (宽度过小 扫描枪会扫描不出来 天坑我踩过)displayValue: false,//隐藏条形码下方文本};// JsBarcode第一个参数是容器ID名 第二个参数是条形码扫描后的内容(默认条形码的内容会在条形码下方展示) 第三个参数是方法的配置项(具体配置查看官网)JsBarcode("#barcode", '5', options);//这个函数是实现批量生成的功能（没用可以删除）// prinList.value.forEach((item, index) => {//   options.text = item.order_number;//   options.order_number = item.order_number;//   JsBarcode("#barcode-" + index, '5', options);  挂载条形码方法 注意批量生成 容器必须是唯一的 且同时都	要存在 思路容器加上循环的index即可// });
};
onMounted(() => {nextTick(() => {getBarcode(); //需要再真实DOM渲染完成后执行否则就会报错});
});

jsbarcode

打印功能

项目中用的printjs插件

  1. Print.js 简介
    Print.js 主要是为了帮助我们直接在我们的应用程序中打印 PDF 文件，无需离开界面，也无需使用嵌入。 对于用户无需打开或下载 PDF 文件而只需打印它们的特殊情况。
    支持“pdf”、“html”、“image”和“json”四种打印文档类型。默认为“pdf”。
    print.js官网
  2. PrintJS参数配置表
参数默认值描述
printablenull文档来源：pdf 或图片 url、html 元素 id 或 json 数据对象。
type‘pdf’可打印类型。可用的打印选项有：pdf、html、image、json 和 raw-html。
headernull用于与 HTML、图像或 JSON 打印的可选标题。它将被放置在页面顶部。此属性将接受文本或原始 HTML。
headerStyle‘font-weight: 300;’要应用于标题文本的可选标题样式。
maxWidth800最大文档宽度（以像素为单位）。根据需要更改此设置。在打印 HTML、图像或 JSON 时使用。
cssnull应用于正在打印的 html 的 css 文件 URL。值可以是具有单个 URL 的字符串或具有多个 URL 的数组。
stylenull自定义样式的字符串。应用于正在打印的 html。
scanStylestrue设置为 false 时，库将不会处理应用于正在打印的 html 的样式。在使用 css 参数时很有用。
targetStylenull默认情况下，库仅在打印 HTML 元素时处理某些样式。此选项允许您传递要处理的样式数组。例如：[‘padding-top’, ‘border-bottom’]
targetStylesnull与 targetStyle 相同，但是，这将处理任意范围的样式。例如：[‘border’, ‘padding’]，将包括’border-bottom’、‘border-top’、‘border-left’、‘border-right’、‘padding-top’等。也可以通过 [’*'] 来处理所有样式。
ignoreElements【】传入打印父 html 元素时应忽略的 html id 数组。使其不打印。
propertiesnull打印 JSON 时使用。这些是对象属性名称。
gridHeaderStyle‘font-weight: bold;’打印 JSON 数据时网格标题的可选样式。
gridStyle‘border: 1px solid lightgray; margin-bottom: -1px;’打印 JSON 数据时网格行的可选样式。
repeatTableHeadertrue打印 JSON 数据时使用。设置为 false 时，数据表标题将仅显示在第一页。
showModalnull启用此选项可在检索或处理大型 PDF 文件时显示用户反馈。
modalMessageRetrieving Document…’当 showModal 设置为 true 时向用户显示的消息。
onLoadingStartnull加载 PDF 时要执行的功能
onLoadingEndnull加载 PDF 后要执行的功能
documentTitleDocument’打印 html、图像或 json 时，这将显示为文档标题。
fallbackPrintablenull打印 pdf 时，如果浏览器不兼容（检查浏览器兼容性表），库将在新选项卡中打开 pdf。这允许您传递要打开的不同pdf文档，而不是在printable中传递的原始文档。如果您在备用pdf文件中注入javascript，这可能很有用。
onPdfOpennull打印 pdf 时，如果浏览器不兼容（检查浏览器兼容性表），库将在新选项卡中打开 pdf。可以在此处传递回调函数，该函数将在发生这种情况时执行。在某些情况下，如果要处理打印流、更新用户界面等，它可能很有用。
onPrintDialogClosenull在浏览器打印对话框关闭后执行的回调函数。
onErrorerror => throw error发生错误时要执行的回调函数。
base64false在打印作为 base64 数据传递的 PDF 文档时使用。
honorMarginPadding (已弃用)true这用于保留或删除正在打印的元素中的填充和边距。有时这些样式设置在屏幕上很棒，但在打印时看起来很糟糕。您可以通过将其设置为 false 来将其删除。
honorColor (已弃用)false若要以彩色打印文本，请将此属性设置为 true。默认情况下，所有文本都将以黑色打印。
font(已弃用)TimesNewRoman’打印 HTML 或 JSON 时使用的字体。
font_size (已弃用)12pt’打印 HTML 或 JSON 时使用的字体大小。
imageStyle(已弃用)width:100%;’打印图像时使用。接受具有要应用于每个图像的自定义样式的字符串。
  1. 安装/引入
  • 下载print.js

    从官网下载print.js，将下载的 print.js 放入项目utils文件夹
    可以全局引入即（在main.js中引入），也可以在需要的文件里面引入import Print from ‘./utils/print’

  • 使用npm安装print插件

    安装print-jsnpm install print-js --save
    可以全局引入即（在main.js中引入），也可以在需要的文件里面引入 import Print from ‘print-js’

  1. 使用-“html”类型
    // html
<div id="printDiv" style="text-align: center" class="barcode-container"><div style="font-size: 16px">{{ name }}</div><div style="font-size: 14px">......</div><svg class="barcodeSvg" style="margin: auto" ref="barcodeRef" />
</div>
// jsprintJS({printable: 'printDiv', // 'printFrom', // 标签元素idtype: 'html',header: '', // '表单',targetStyles: ['*'],style: '@page {margin:0 10mm};', // 可选-打印时去掉眉页眉尾ignoreElements: ['no-print'], // ['no-print']，有class="no-print"标识就不会被打印font: 'Microsoft YaHei',scanStyles: false,onPrintDialogClose: async function () {// 在浏览器打印对话框关闭后执行的回调函数。可以进行打印成功操作createMessage.success('打印成功！');},onError: function () {console.error('打印失败！');// 这里可以执行打印失败后的逻辑createMessage.warning('打印失败！');},});
    点击打印按钮，弹出打印预览界面，右边栏调整打印界面。
    假设出现打印不全的问题，可以通过缩放来进行设置，数值越小，缩放的越小。
  2. 其他Type示例
    • pdf
    printJS('docs/printjs.pdf')
// 或
printJS({printable:'docs/printjs.pdf', type:'pdf', showModal:true})
    • image单个图像
    	printJS('images/print-01-highres.jpg', 'image')
// 或
printJS({printable: 'images/print-01-highres.jpg', type: 'image', header: 'My cool image header'})
    • image多个图像
    printJS({printable: ['images/print-01-highres.jpg', 'images/print-02-highres.jpg', 'images/print-03-highres.jpg'],type: 'image',header: 'Multiple Images',imageStyle: 'width:50%;margin-bottom:20px;'
})
    • json
    someJSONdata = [{name: 'John Doe',email: 'john@doe.com',phone: '111-111-1111'},{name: 'Barry Allen',email: 'barry@flash.com',phone: '222-222-2222'},{name: 'Cool Dude',email: 'cool@dude.com',phone: '333-333-3333'}]printJS({printable: someJSONdata,properties: ['name', 'email', 'phone'],type: 'json',gridHeaderStyle: 'color: red;  border: 2px solid #3971A5;',gridStyle: 'border: 2px solid #3971A5;'
})

踩坑

  1. 打印之后，用pda扫描，扫描不出码。
    在打印中使用条形码就不一样了 我们需要注意条形码容器的类型 可以回到创建创建条形码生成容器(有三种方法)
    注意:条形码的内容会影响条形码的长度 内容文本越长 条形码宽度越宽
  2. svg格式无法进行宽度约束 ，一旦文本内容过长条形码就会溢出屏幕(踩坑)
    解决方案:采用img格式放弃svg格式 约束img格式的宽高
  3. 用到的扫码枪是PDA 可以在扫描出电脑上的但是无法扫码打印纸上的(踩坑)
    解决方案:options 的width配置项 不同打扫码枪能识别的条形码的条width宽度不一样
  4. 手机能识别出条形码但是PDA扫码枪识别不了(踩坑)
    解决方案 在同样的条形码条宽度手机的条形码识别宽度要小于扫描枪的识别宽度 可以配置options 的width配置项来解决
  5. 报如下错误
    在这里插入图片描述
    解决方案：错误解译，没有容器，渲染生成的条形码
    条形码容器渲染完之后，才能执行下面 JsBarcode(barcodeRef.value, text, options);
    • 生命周器，vue2.0 在mounted中，vue3.0在onMounted中设置
    • 用nextTick处理，页面DOM渲染完字后，再执行方法内部的代码

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/web/169.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

从AdTech转战Martech，驰骛科技的PaaS之路

从AdTech转战Martech，驰骛科技的PaaS之路

中国最早的Adtech公司之一&#xff0c;在被全资收购后&#xff0c;其创始团队又创立了一家Martech公司。赛道的变更也从侧面反映出中国营销技术市场的发展轨迹。 驰骛科技创始团队来自易传媒核心团队&#xff0c;驰骛科技创始人程华奕是易传媒创始人兼CTO&#xff0c;是中国最早…
阅读更多...
现在给政府机关医院学校部队供货的方式有哪些？

现在给政府机关医院学校部队供货的方式有哪些？

给政府机关、医院、学校和部队供货的方式主要包括以下几种&#xff1a; 直接采购&#xff1a;政府机关、医院、学校和部队通过招标或直接与供应商进行谈判&#xff0c;确定采购的产品和价格。这种方式常见于大宗或重要物资的采购&#xff0c;能够确保采购过程的透明度和公正性…
阅读更多...
使用 Citavi 和 NVivo 简化您的文献综述和研究分析

使用 Citavi 和 NVivo 简化您的文献综述和研究分析

NVivo 是一款支持定性研究方法和混合研究方法的软件。它可以帮助您收集、整理和分析访谈、焦点小组讨论、问卷调查、音频等内容。NVivo&#xff08;1.0版&#xff09;是Windows和Mac的主要版本。遵循最新的主要版本NVivo 12&#xff08;Windows和Mac&#xff09;。 NVivo 强大…
阅读更多...
Linux服务器硬件及RAID配置

Linux服务器硬件及RAID配置

一、服务器硬件 塔式服务器&#xff1a;最初的服务器形态之一&#xff0c;类似于传统的台式电脑&#xff0c;但具有更强的处理能力和稳定性&#xff0c;适合小型企业或部门使用。 机架式服务器&#xff1a;设计为可安装在标准化机架内的模块化单元&#xff0c;可以有效地节省空…
阅读更多...
jetson nx 外接按钮，实现开机功能

jetson nx 外接按钮，实现开机功能

本文参考自https://blog.csdn.net/m0_59584375/article/details/128050175 首先第一步&#xff0c;要短接jetson nx背面的AUTO ON 和DISABLE引脚 可以用跳帽短接&#xff0c;也可以直接用一根杜邦线连接这两个针脚 AUTO ON 和DISABLE引如下图红色圈 跳帽的样子如下图 我是直…
阅读更多...
Mabtech：与结核病相关的肽库

Mabtech：与结核病相关的肽库

Mabtech 新研发出了三个涵盖结核蛋白&#xff08;EspC、ESAT-6、CFP-10&#xff09;的肽库&#xff0c;可以区分潜伏性结核病和活动性结核病的区别。所有肽库都经过验证&#xff0c;都可用于ELISpot、FluoroSpot实验。 1. EspC scanning pool ● EspC scanning pool包含来自结…
阅读更多...
42-软件部署实战（下）：IAM系统安全加固、水平扩缩容实战

42-软件部署实战（下）：IAM系统安全加固、水平扩缩容实战

IAM应用安全性加固 iam-apiserver、iam-authz-server、MariaDB、Redis和MongoDB这些服务&#xff0c;都提供了绑定监听网卡的功能。将服务绑定到内网网卡上。 我们也可以通过iptables来实现类似的功能&#xff0c;通过将安全问题统一收敛到iptables规则&#xff0c;可以使我…
阅读更多...
速看！2024中国（厦门）国际康复医疗展览会

速看！2024中国（厦门）国际康复医疗展览会

2024中国&#xff08;厦门&#xff09;国际康复医疗展览会 2024 China (Xiamen) International Rehabilitation Medical Exhibition 时 间&#xff1a;2024年8月13-15日 August 13-15, 2024 地 点&#xff1a;厦门国际会展中心 Xiamen International Conference & Exh…
阅读更多...
Java工具类：批量发送邮件（带附件）

Java工具类：批量发送邮件（带附件）

​ 不好用请移至评论区揍我 原创代码，请勿转载，谢谢！ 一、介绍 用于给用户发送特定的邮件内容，支持附件、批量发送邮箱账号必须要开启 SMTP 服务（具体见下文教程）本文邮箱设置示例以”网易邮箱“为例，其他如qq邮箱或企业邮箱均可，只要在设置中对应开启SMTP及授权码等操…
阅读更多...
Java岗大厂面试百日冲刺 - 日积月累，每日三题【Day11】 —— MyBatis1

Java岗大厂面试百日冲刺 - 日积月累，每日三题【Day11】 —— MyBatis1

市面上主流ORM框架: EJB&#xff1a;重量级、高花费的ORM技术&#xff0c;支持JPA&#xff0c;尤其是EJB3低侵入式 的设计&#xff0c;增加了Annotation Hibernate&#xff1a;开源&#xff0c;支持JPA &#xff0c;被选作JBoss的持久层解决方案 iBatis&#xff1a;”SQL Mappi…
阅读更多...
SpringBoot多数据源配置之事务管理

SpringBoot多数据源配置之事务管理

SpringBoot多数据源配置之事务管理 1.Spring编程式事务1.1 简单案例 2.mybatis多数据源事务2.1 简单mybatis项目结构2.2 application.yml配置2.3 读写数据源配置 3.测试 1.Spring编程式事务 Spring编程式事务是一种通过编写具体代码来实现事务管理的方式。 在编程式事务中, 开…
阅读更多...
如何用ChatGPT进行论文撰写？

如何用ChatGPT进行论文撰写？

原文链接&#xff1a;如何用ChatGPT进行论文撰写&#xff1f;https://mp.weixin.qq.com/s?__bizMzUzNTczMDMxMg&mid2247601619&idx1&snb686fbe87dedfac2df3a6afe780b2ffe&chksmfa820c34cdf5852251dca64597024ea62ddbde280086535ec251f4b62b848d9f9234688384e6…
阅读更多...
vim使用指南：指令、配置、插件、异常

vim使用指南：指令、配置、插件、异常

文章目录 vi / vim命令模式插入模式光标定位复制粘贴删除撤销替换删除查找 底行模式保存退出行号查找多开其他 视图模式注释 异常vim配置vim插件 vi / vim vim的本质是一个编辑器&#xff0c;是一种多模式的编辑器&#xff0c;只能进行读写操作&#xff0c;不能进行编译编辑器…
阅读更多...
Windows系统下安装paddle

Windows系统下安装paddle

开始使用_飞桨-源于产业实践的开源深度学习平台 (paddlepaddle.org.cn) 命令行下&#xff1a; python -m pip install --upgrade pip --user python -m pip install paddlepaddle2.6.1 -i https://pypi.tuna.tsinghua.edu.cn/simple 报异常 ERROR: Could not install packa…
阅读更多...
ADOP-400G光模块问题发布会

ADOP-400G光模块问题发布会

前沿光学&#xff08;ADOP&#xff09;400G光模块为客户提供各种超高密度的400G以太网连接方案&#xff0c;广泛应用于数据中心、企业网和服务提供商。 &#x1f4e3;&#x1f4e3;以下一些问题是我们新一代400G光模块常能遇见问题&#xff0c;所以我们决定在这里开一场小小的…
阅读更多...
书生·浦语大模型第二期实战营（4）笔记

书生·浦语大模型第二期实战营（4）笔记

Finetune 为什么要微调 适应下游任务 两种微调范式 上面的是增量训练 下面的是指令微调 数据格式 微调方案 lora&#xff1a; 在基座模型的基础上再套用一个小模型 XTuner 简介 快速上手 LnternLM2 1.8B 多模态LLM
阅读更多...
qt-C++笔记之获取当前文件名所在路径并拼接出新文件路径的一种方法

qt-C++笔记之获取当前文件名所在路径并拼接出新文件路径的一种方法

qt-C笔记之获取当前文件名所在路径并拼接出新文件路径的一种方法 code review! 运行 在 Qt 框架中&#xff0c;QFileInfo 和 QDir类通常用于文件系统信息的查询和目录管理。下面是按照这样一种新颖的步骤来拼接新文件路径的示例代码&#xff1a; #include <QFileInfo>…
阅读更多...
智慧煤矿/智慧矿区视频汇聚存储与安全风险智能分析平台建设思路

智慧煤矿/智慧矿区视频汇聚存储与安全风险智能分析平台建设思路

一、建设背景 目前我国非常重视煤矿安全生产&#xff0c;并投入大量资金用于煤矿安全综合远程监控系统的研发。视频监控系统作为实现煤矿智能化无人开采的关键系统与煤矿安全生产的多系统协同分析与处理的关键信息源&#xff0c;在智慧矿山管控平台的建设中发挥着重要的作用。…
阅读更多...
数据结构书后习题

数据结构书后习题

p17 1&#xff0c; 个人解答&#xff1a; int DeleteMinElem(SqList &L,int &min) {int j 0;if (L.length 0){printf("error!");return 0;}int min L.data[0];for (int i 1; i < L.length; i){if (L.data[i] < min){min L.data[i];j i;}}L.dat…
阅读更多...
Docker八股总结

Docker八股总结

1. 容器和虚拟机的区别 传统虚拟机技术是虚拟出一套硬件后&#xff0c;在其上运行一个完整操作系统&#xff0c;在该系统上再运行所需应用进程&#xff1b;而容器内的应用进程直接运行于宿主的内核&#xff0c;容器内没有自己的内核&#xff0c;而且也没有进行硬件虚拟。因此容…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023