前端页面生成条形码,借助layui打印标签

借助JsBarcode生成条形码
官网:https://lindell.me/JsBarcode/
github: https://github.com/lindell/JsBarcode

<div class="table-div" style="display: block;width: 300px; height: 241px; margin: auto;"><table border="1" cellspacing="0" cellpadding="3" style=" width: 300px; height: 230px;"><tr><td colspan="2" height="80px"><div style="text-align: center"><img id="barcode"/></div></td></tr><tr><td colspan="2" height="25px"><span style="float: left;position: relative;left:3px;font-size: 16px">开发员:${logistics_id}</span></td></tr><tr><td colspan="2" height="25px"><span style="float: left;position: relative;left:3px;font-size: 16px">SQE工程师:${logistics_id}</span></td></tr><tr><td colspan="2" height="25px"><span style="float: left;position: relative;left:3px;font-size: 16px"> 取样类型:${logistics_id} </span></td></tr><tr><td colspan="2" height="25px"><span style="float: left;position: relative;left:3px;font-size: 16px"> 收货地址:${work_address} </span></td></tr><tr><td colspan="2" height="25px"><span style="float: left;position: relative;left:3px;font-size: 16px">建资料流水号:${logistics_id}</span></td></tr></table>
</div>
<script src="https://unpkg.com/jsbarcode@latest/dist/JsBarcode.all.min.js"></script>
<script>JsBarcode("#barcode", "212313");let test = document.getElementById('barcode').getAttribute('src')console.log(test)
</script>

打印代码,使用 window.print() 打印页面上局部的数据

<script>
function print_labels(developer, sqe_person, sampling_type_display, work_address, pid) {layui.use(['form', 'layer', 'laydate', 'table', 'laytpl', 'element'], function () {var form = layui.form,layer = layui.layer,$ = layui.jquery,laydate = layui.laydate,laytpl = layui.laytpl,element = layui.element,table = layui.table,formSelects = layui.formSelects;let logistics_id = $('input[name="logistics_id"]').val()if(!logistics_id){layer.msg("请先填写物流单号!");}else{JsBarcode("#barcode", logistics_id);let barcode_res = $('#barcode').attr('src')console.log(barcode_res)var headstr = "<html><head></head><body>";var footstr = "</body>";//获得 print_div   里的所有 html 数据(把要打印的数据嵌套在 一个 div 里,获得 div)//var printData = document.getElementById("print").innerHTML;var printData = `<div class="table-div" style="display: block;width: 300px; height: 241px; margin: auto;"><table border="1" cellspacing="0" cellpadding="3" style=" width: 300px; height: 230px;"><tr><td colspan="2" height="80px"><div style="text-align: center"><img id="barcode" src="${barcode_res}"/></div></td></tr><tr><td colspan="2" height="25px"><span style="float: left;position: relative;left:3px;font-size: 16px">开发员:${developer}</span></td></tr><tr><td colspan="2" height="25px"><span style="float: left;position: relative;left:3px;font-size: 16px">SQE工程师:${sqe_person}</span></td></tr><tr><td colspan="2" height="25px"><span style="float: left;position: relative;left:3px;font-size: 16px"> 取样类型:${sampling_type_display} </span></td></tr><tr><td colspan="2" height="25px"><span style="float: left;position: relative;left:3px;font-size: 16px"> 收货地址:${work_address} </span></td></tr><tr><td colspan="2" height="25px"><span style="float: left;position: relative;left:3px;font-size: 16px">建资料流水号:${pid}</span></td></tr></table></div>`//获取当前页面的htmlvar oldstr = document.body.innerHTML;//把 headstr+printData+footstr 里的数据 复制给 body 的 html 数据 ,相当于重置了 整个页面的 内容document.body.innerHTML = headstr + printData + footstr;//使用方法为 window.print() 打印页面上局部的数据window.print();document.body.innerHTML = oldstr;setTimeout("parent.layer.closeAll(\"iframe\")", 1000);// parent.layer.closeAll("iframe");}});}
</script>

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

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

相关文章

ACL权限、特殊位与隐藏属性的奥秘

1.2 操作步骤 # 1. 添加测试目录&#xff0c;用户&#xff0c;组&#xff0c;并将用户添加到组 ------------------- [rootlocalhost ~]# mkdir /project[rootlocalhost ~]# useradd zs[rootlocalhost ~]# useradd ls[rootlocalhost ~]# groupadd tgroup[rootlocalhost ~]# g…

软件提示找不到MSVCP140.dll是什么意思,修复MSVCP140.dll丢失的多个方法

msvcp140.dll 文件是 Microsoft Visual C 运行时库的一部分&#xff0c;具体来说它是 Visual Studio 2015 版本编译的C应用程序所依赖的一个动态链接库&#xff08;DLL&#xff09;文件。这个 DLL 文件包含了大量由Microsoft开发的标准C库函数&#xff0c;这些函数对于许多在Wi…

大模型综述总结--第一部分

1 目录 本文是学习https://github.com/le-wei/LLMSurvey/blob/main/assets/LLM_Survey_Chinese.pdf的总结&#xff0c;仅供学习&#xff0c;侵权联系就删 目录如下图 本次只总结一部分&#xff0c;刚学习有错请指出&#xff0c;VX关注晓理紫&#xff0c;关注后续。 2、概述…

Linux-进程相关函数接口-008

1【fork】 1.1函数原型 1.2函数功能 创建一个子进程&#xff0c;新创建的进程成为原来进程的子进程&#xff0c;原来的进程称为新进程的父进程。 1.3函数参数 1.3.1【】 1.4返回值 【成功】&#xff1a; 【失败】&#xff1a; 2【fork】 2.1函数原型 2.2函数功能 创…

红日靶场3

靶场链接&#xff1a;漏洞详情 在虚拟机的网络编辑器中添加两个仅主机网卡 信息搜集 端口扫描 外网机处于网端192.168.1.0/24中&#xff0c;扫描外网IP端口&#xff0c;开放了80 22 3306端口 80端口http服务&#xff0c;可以尝试登录网页 3306端口mysql服务&#xff0c;可…

linux卸载mysql8重装5

目录 背景操作卸载重装配置启动 背景 在linux&#xff08;阿里云ECS&#xff09;安装部署Hive时初始化Hive元数据库&#xff0c;遇到报错前一天两三小时没解决&#xff0c;问题定位为mysql&#xff0c;次日打算重装 操作 卸载 停止 MySQL 服务 systemctl stop mysql yum卸载…

ES6内置对象 - Map

Map&#xff08;Map对象保存键值对&#xff0c;键值均不限制类型&#xff09; 特点&#xff1a; 有序&#xff08;Set集合是无序的&#xff09;&#xff1b;键值对&#xff08;键可以是任意类型&#xff09;&#xff1b;键名不能重复&#xff08;如果重复&#xff0c;则覆盖&…

DK 树

推荐在 cnblogs 上阅读 引入 这是由 DengDuck 总结整理的一种处理线段树类问题的算法。 板题引入 给定数列 A { a i } A\{a_i\} A{ai​} 和 B { b i } B\{b_i\} B{bi​}。 其中有以下操作&#xff1a; C l r z&#xff1a; a i ← a i z a_i\leftarrow a_iz ai​←ai​…

ES相关问题

在Elasticsearch&#xff08;ES&#xff09;集群中&#xff0c;节点根据其配置和角色可以分为以下几种主要类型&#xff1a; Master Node&#xff08;主节点&#xff09;&#xff1a; 主节点负责管理整个集群的元数据&#xff0c;如索引的创建、删除、分片分配等。它维护着集群…

c编译器学习07:minilisp编译器改造(debug模式支持调试)

问题 原版的minilisp编译器不支持argv输入测试&#xff0c;不方便单步调试。 代码改造目标是既不改变原有程序的各种功能&#xff0c; 又能支持个人习惯的vs单步debug模式。 CMakeLists.txt变更 定义DEBUG宏 解决单步调试源码定位偏差问题 cmake_minimum_required(VERSION …

高级语言期末2012级B卷

1.编写函数&#xff0c;输出任意正整数n的位数&#xff08;n默认为存储十进制的整形变量&#xff09; 例如&#xff1a;正整数13&#xff0c;则输出2,&#xff1b;正整数3088&#xff0c;则输出4 #include <stdio.h>int func(int n) {int count0;while(n>0) {n/10;co…

免费的WP模板网站推荐

免费wordpress模板下载 高端大气上档次的免费wordpress主题&#xff0c;首页大图全屏显示经典风格的wordpress主题。 https://www.wpniu.com/themes/289.html wordpress免费企业主题 深蓝色经典实用的wordpress网站模板&#xff0c;用wordpress免费企业主题搭建网站。 http…

基于springboot+vue的安康旅游网站(前后端分离)

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、阿里云专家博主、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战&#xff0c;欢迎高校老师\讲师\同行交流合作 ​主要内容&#xff1a;毕业设计(Javaweb项目|小程序|Pyt…

Day17_集合与数据结构(链表,栈和队列,Map,Collections工具类,二叉树,哈希表)

文章目录 Day17 集合与数据结构学习目标1 数据结构2 动态数组2.1 动态数组的特点2.2 自定义动态数组2.3 ArrayList与Vector的区别&#xff1f;2.4 ArrayList部分源码分析1、JDK1.6构造器2、JDK1.7构造器3、JDK1.8构造器4、添加与扩容5、删除元素6、get/set元素7、查询元素8、迭…

java基础-正则表达式+文件操作+内置包装类

目录 正则表达式去除字符串前后空格&#xff1a;去除每一行中首尾的空格去除开头的 数字_ 文件操作打印当前项目路径获取文件的上级目录/和\读取文件 内置包装类System类常用方法 Number类Integer类常用方法Float和Double 正则表达式 去除字符串前后空格&#xff1a; str.tri…

创建天花——Dynamo for Revit2022

今天我们来聊一个期待已久的功能——生成天花&#xff0c;经过了这么多年的迭代&#xff0c;Revit终于开放了生成天花的API&#xff0c;而且功能还不错&#xff0c;是经过优化的&#xff0c;不过目前我手里还没拿到SDK&#xff0c;就不截图了。 而且新增的天花API不是在Docume…

axios是如何实现的(源码解析)

1 axios的实例与请求流程 在阅读源码之前&#xff0c;先大概了解一下axios实例的属性和请求整体流程&#xff0c;带着这些概念&#xff0c;阅读源码可以轻松不少&#xff01; 下图是axios实例属性的简图。 可以看到axios的实例上&#xff0c;其实主要就这三个东西&#xff1a…

Sora是什么?

文章目录 前言Sora是什么&#xff1f;功能特色优点 缺点Sora模型的工作原理如何使用Sora模型Sora模型的应用场景Sora模型带来的问题虚假信息版权问题 后记 前言 Sora是美国人工智能研究公司OpenAI发布的一款令人惊叹的人工智能文生成视频大模型。近年来&#xff0c;人工智能技…

无人机基础技术,固定翼无人机动力系统技术详解,无人机飞行控制系统技术

推重比选择 推重比&#xff0c;是指无人机发动机推力/拉力与无人机飞行重力之比。该参数是衡量动力系统乃至整机性能的重要参数&#xff0c;很大程度上影响飞行性能。固定翼无人机的动力系统在配置时选择的推重比必须达到或超出设计的推重比。 重量要求 翼载荷是无人机单位面…

07 STL 简介

目录 什么是STLSTL的版本STL的六大组件STL的重要性如何学习STLSTL的缺陷 1. 什么是STL c标准库的重要组成部分&#xff0c;不仅是一个可复用的组件库&#xff0c;而且是一个包罗数据结构和算法的软件框架 2. STL的版本 原始版本 Alexander Stepanov、Meng Lee在惠普实验室的…