前端页面生成条形码，借助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>
相关文章：
前端页面生成条形码，借助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&quo…...
第1~8章 综合复习
1. 重置root密码 1. 重启服务器（虚拟机）2. 快速选择第二项，然后按 e 键3. 在linux这一行的最后加上一个空格，然后输入 rd.break，然后按 ctrl x 来重启服务4. 在提示符所在位置输入 mount -o remount,rw /sysroot5. 在…...
转运机器人,AGV底盘小车：打造高效、精准的汽车电子生产线
为了满足日益增长的市场需求，保持行业领先地位，某汽车行业电子产品企业引入富唯智能AMR智能搬运机器人及其智能物流解决方案，采用自动化运输措施优化生产节拍和搬运效率，企业生产效率得到显著提升。 项目背景： 1、工厂…...
Spring Boot 的参数校验方案
1、前言 在平时的开发工作中，我们通常需要对接口进行参数格式验证。当参数个数较少（个数小于3）时，可以使用if ... else ...手动进行参数验证。当参数个数大于3个时，使用if ... else ...进行参数验证就会让代码显得臃肿，这个时候推荐使用注解来进行参数验证。 2、常用注…...
第N3周：Pytorch文本分类入门
>- **🍨 本文为[🔗365天深度学习训练营](https://mp.weixin.qq.com/s/rbOOmire8OocQ90QM78DRA) 中的学习记录博客** >- **🍖 原作者：[K同学啊 | 接辅导、项目定制](https://mtyjkh.blog.csdn.net/)** import torch import…...
宝塔面板安装了mysql5.7和phpMyadmin，但是访问phpMyadmin时提示502 Bad Gateway
操作流程截图如下： 原因是没有选择php版本 选择php版本 下一页找到phpMyAdmin，选择设置 目前只有纯净态，说明没有php环境，前去安装php环境 点击安装，选择版本，这里选择的是7.4版本，编译安…...
K8S—Pod详解
目录 一 Pod基础概念 1.1 Pod是什么 1.2 为什么要使用Pod？Pod在K8S集群中的使用方式？ 1.3 基础容器pause 二 Pod的分类 2.1 自主式Pod和控制器管理的Pod 2.2 容器的分类 2.2.1 基础容器（infrastructure container） 2.2.2…...
深度学习中数据的转换
原始（文本、音频、图像、视频、传感器等）数据被转化成结构化且适合机器学习算法或深度学习模型使用的格式。 原始数据转化为结构化且适合机器学习和深度学习模型使用的格式，通常需要经历以下类型的预处理和转换： 文本数据…...
如何系统地自学 Python？
目录 Python 数据类型 控制结构 函数和模块 文件操作 异常处理 类和对象 列表推导式和生成器 匿名函数和高阶函数 面向对象编程 总结 Python Python是一种面向对象、解释型计算机程序设计语言，由Guido van Rossum于1989年发明，第一个公开发行…...
【软考】传输层协议之UDP
目录 一、说明二、特点 一、说明 1.用户数据报协议（User Datagram Protocol）是一种不可靠的、无连接的协议，可以保证应用程序进程间的通信 2.与TCP相比，UDP是一种无连接的协议，它的错误检测功能要弱很多 3.TCP有助于提…...
微服务-微服务链路追踪组件Skywalking实战
自动化监控系统Prometheus&Grafana实战： https://vip.tulingxueyuan.cn/detail/v_60f96e69e4b0e6c3a312c726/3?fromp_6006cac4e4b00ff4ed156218&type8&parent_pro_idp_6006d8c8e4b00ff4ed1569b2 APM-性能监控项目班： https://vip.tuling…...
Stream、Collections、Collectors用法
当涉及Java编程中的集合处理时，Stream、Collections和Collectors是三个常用的工具。以下是它们各自的主要功能和使用的一些方法的概要： Stream： 概要：Stream 是 Java 8 引入的一个强大工具，用于处理集合数据的流式操作…...
Jetson Xavier NX 与笔记本网线连接 ，网络共享，ssh连接到vscode
Jetson Xavier NX 与笔记本网线连接 ，网络共享，ssh连接到vscode Jetson Xavier NX桌面版需要连接显示屏、鼠标和键盘，操作起来并不方便，因此常常需要ssh远程连接到本地笔记本电脑，这里介绍一种连接方式，通过…...
利用netty手写rpc框架
前言：利用netty异步事件驱动的网络通信模型，来实现rpc通信 一、大致目录结构： 二、两个端：服务端（发布），客户端（订阅消费），上代码： 1.服务端&am…...
js+views 压缩上传的图片
安装image-conversion插件，在before-upload方法中对上传的图片文件进行处理 遇到的问题： 1、因为在上传文件之前的钩子中对图片进行了压缩处理，所以组件中上传的data会丢失，需要重新赋值 2、imageConversion 的引入需要使用impor…...
【安卓基础5】中级控件
🏆作者简介：|康有为| ，大四在读，目前在小米安卓实习，毕业入职 🏆本文收录于 安卓学习大全持续更新中，欢迎关注 🏆安卓学习资料推荐： 视频：b站搜动脑学院 视频…...
Arthas—【学习篇】
1. Arthas官网 arthas 2. 下载 从 Maven 仓库下载 最新版本，点击下载：编辑在新窗口打开 点击这个 mavrn-central 即可显示下面的图片 #从 Github Releases 页下载 Releases alibaba/arthas GitHub 3. 解压 将压缩包复制到一个位置&…...
css pointer-events 多层鼠标点击事件
threejs 无法滑动视角，菜单界面覆盖threejs操作事件。 pointer-events /* Keyword values */ pointer-events: auto; pointer-events: none; pointer-events: visiblePainted; /* SVG only */ pointer-events: visibleFill; /* SVG only */ pointer-events: visib…...
k8s中基于alpine的pod无法解析域名问题
现象 在pod内无法解析指定域名 # 执行ping bash-4.4# ping xx-xx-svc-0.xxx-fcp.svc.cluster.local ping: bad address xx-xx-svc-0.xxx-fcp.svc.cluster.local排查经过 # 执行nslookup bash-4.4# nslookup xx-xx-svc-0.xxx-fcp.svc.cluster.local Server: 172.43.0…...
缩小ppt文件大小的办法
之前用别人模版做了个PPT，100多M,文件存在卡顿问题 解决办法： 1.找到ppt中哪个文件过大，针对解决 2.寻找视频/音频文件，减少体积 3.字体文件是不是过多的问题。 一、文件寻找的内容步骤： 步骤： 1.把p…...
vue3中使用 tui-image-editor进行图片处理,并上传
效果图 下载包 pnpm i tui-image-editor pnpm i tui-color-picker调用组件 //html部分 <el-dialog v-model"imgshow" destroy-on-close width"40%" draggable align-center :show-close"true":close-on-click-modal"false">&l…...
18.贪心算法
排序贪心 区间贪心 删数贪心 统计二进制下有多少1 int Getbit_1(int n){int cnt0;while(n){nn&(n-1);cnt;}return cnt; }暴力加一维前缀和优化 #include <iostream> #include <climits> using namespace std; #define int long long const int N2e510; in…...
[AI]部署安装有道QanyThing
前提条件： 1、win10系统更新到最新的版本，系统版本最好为专业版本 winver 查看系统版本，内部版本要大于19045 2、CPU开启虚拟化 3、开启虚拟化功能，1、2、3每步完成后均需要重启电脑； 注：windows 虚拟…...
NLP_BERT与GPT争锋
文章目录 介绍小结 介绍 在开始训练GPT之前，我们先比较一下BERT和 GPT 这两种基于 Transformer 的预训练模型结构，找出它们的异同。 Transformer架构被提出后不久，一大批基于这个架构的预训练模型就如雨后春笋般地出现了。其中最重要、影响…...
放一个还看得过去的后台模板设置模块css样式框架
#小李子9479# 如下图 <div class"grid col-3 margin-top-xl"><?php$clist array(cyan, yellow, purple, red, blue, brown);foreach ($clist as $kk > $vv) {?><div style"max-width:400px;width:100%;padding:10px;"><div cl…...
关于信号强度单位dB和dBm区别
dB，dBm 都是功率增益的单位，不同之处如下： 一、dB 是一个相对值，表示两个量的相对大小关系，没有单位。当考虑甲的功率相比于乙功率大或小多少个dB时，按下面的计算公式：10log（甲功率/…...
华清远见作业第四十二天——Qt（第四天）
思维导图： 编程： 代码： widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include<QTextToSpeech> //语音播报类 QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NAMESPACEclass Widget : public Q…...
vue2和vue3区别 浅析
vue2和vue3区别 浅析 数据响应原理 vue2 通过 Object.defineProperty 来更新数据,只会监听使用Object.defineProperty创建的(初始化)的数据，并通过订阅方式进行发布，在初始化之外的数据，不会受到监听； 在数据初始化时…...
GIT使用和简介
Git 是一个版本控制系统，它可以追踪文件的更改，并可以在不同的分支上进行并行开发。下面是 Git 的基本概念和使用方式的解释： 1. 仓库（Repository）：仓库是用来存储项目代码的地方。一个仓库可以包含多个文…...
HTTPS（超文本传输安全协议）被恶意请求该如何处理。
HTTPS（超文本传输安全协议）端口攻击通常是指SSL握手中的一些攻击方式，比如SSL握手协商过程中的暴力破解、中间人攻击和SSL剥离攻击等。 攻击原理 攻击者控制受害者发送大量请求，利用压缩算法的机制猜测请求中的关键信息…...
瑞安塘下做网站的公司/今日新闻内容摘抄
DECLARE a VARCHAR(10)aa,b VARCHAR(10)b SET ab; SET bLEFT(a,LEN(a)-LEN(b)) SET aRIGHT(a,LEN(a)-LEN(b))SELECT a AS aValue ,b AS bValue...
制作网络游戏/网站seo推广方案
Oracle Application配置移植工具在ARP中的应用Oracle Migration Tools Introduce卢景秀摘要：ARP的所级部分主要是在ORACLEERP的基础上构架完成的。在我们的日常维护中，经常碰到因为需求变更，系统发生改变的情况，通常的做法是在一个…...
建站行业都扁平化设计/网站推广排名优化
首先上图看下关系： 本来想自己写来着，百度了下，真的有总结的很全面的文章，我还是不要献丑了……直接贴出来，看网址吧。 https://blog.csdn.net/xuantian868/article/details/3116442...
安庆市建设银行网站/软文营销策划
shutdownshutdown指令以安全的方式来关闭系统，所有已经登录的用户都会被告知系统将要关闭。并且在最后五分钟内，新的登录将被阻止。过了指定的time后，关机会向init(8)守护进程发送一个请求，以便将系统降至适当的运行级别。这是通过…...
广告网站设计方案/公司网站优化方案
2019独角兽企业重金招聘Python工程师标准>>> GC所关注的是哪一部分内存的回收？ GC所关注的一般是指Java堆和方法区内存。因为程序计数器、虚拟机栈、本地方法栈这三个区域都是随线程而生，随线程而灭。 GC如何判断对象是否存活？ GC…...
青岛网上房地产网签查询/百度网站关键词优化
2 这个请求经过一系列的过滤器（Filter）（这些过滤器中有一个叫做ActionContextCleanUp的可选过滤器，这个过滤器对于Struts2和其他框架的集成很有帮助，例如：SiteMesh Plugin） 3 接着FilterDispat…...