【前端】JQ插件实现打印功能

news2025/2/26 22:58:12

1、准备工作

下载三个js文件:jquery.jqprint-0.3.js、jquery-migrate-1.2.1.min.js、jquery-1.11.3.min.js,

下载地址:https://download.csdn.net/download/qq_25285531/88492425

 2、实现效果

点击“打印指导单”,调起打印机,设置打印参数,开始打印

3、实现代码

HTML代码

<html>
<head>
	<title>患者用药指导单</title>
	<script type="text/javascript" src="/static/js/jquery-1.11.3.min.js" ></script>
	<script src="/static/js/jquery.jqprint-0.3.js"></script>	
	<script src="/static/js/jquery-migrate-1.2.1.min.js"></script>
</head>
<body>
<!-- 打印区域 start -->
	<div id="printArea">
			<div style="line-height: 30px;">
				<h2 style="text-align: center; font-weight: bolder; font-size: 18px;">XXX医院</h2>
				<h3 style="text-align: center; font-weight: bolder;font-size: 16px;">患者用药指导单</h2>

                <div style="width: 97%; margin: 0 auto; height:auto; border: 1px solid #999; border-radius: 5px;">
						<div style="width:100%;padding:8px; border-radius: 5px;font-size:12px;display: flex;flex-wrap: wrap;">
                /***这里面是要打印的内容**/
                        </div>
                </div>
            </div>
     </div>
<!-- 打印区域 end -->

<div class="" style="position: fixed; left: 0px; bottom: 0px; width: 100%; height:60px; line-height:60px; text-align: center; background: #F1F3F4;">
	<button type="button" class="layui-btn layui-btn-normal" onclick="onprint()" style="margin-top:10px; background:#1D99D4">打印指导单</button>
</div>
</body>
</html>

 JS代码

function onprint() {

	$("#printArea").jqprint();
}

说明: 

1、在id为 "printArea" 的div中包含的是要打印的内容。

2、css样式必须写在行内,否则打印的时候没有样式。

3、jquery-migrate-1.2.1.min.js是为了兼容低版本的jquery ,比如 使用 1.7 版本的 jquery 却不会报错,能正常使用。 经过一番搜索,发现是因为高版本(1.9版本以后)不兼容以前的,需要引入一个 jquery-migrate.min.js 来兼容,否则会报下面的错误。

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

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

相关文章

麻醉科常用评估量表汇总,建议收藏!

根据麻醉科医生的量表使用情况&#xff0c;笔者整理了10个麻醉科常用量表&#xff0c;可在线评测直接出结果&#xff0c;可转发使用&#xff0c;可生成二维码使用&#xff0c;可创建项目进行数据管理&#xff0c;有需要的小伙伴赶紧收藏&#xff01; 1.维持液体计算 维持液体是…

网络安全专业大学生一定要考的证书

在数字经济时代&#xff0c;网络安全成为了至关重要的一环&#xff0c;社会对网络安全技术人才的需求也在不断增长。网络安全行业以其独特的薪酬、福利和发展机遇吸引了众多优秀人才。 在市场上&#xff0c;大多数国家认可的证书都需要一定的工作经验才能获得。然而&#xff0c…

基于OSPF的MGRE实验

目录 题目&#xff1a;基于OSPF的MGRE实验 步骤一&#xff1a;拓扑搭建 步骤二&#xff1a;地址配置 步骤三&#xff1a;公网通 步骤四&#xff1a;MGRE VPN配置 中心站点&#xff1a;R1 分支站点&#xff1a; 步骤五&#xff1a;基于MGRE环境下的OSPF配置 步骤六&#xff1…

软件测试/测试开发丨利用ChatGPT自动生成架构图

点此获取更多相关资料 简介 架构图通过图形化的表达方式&#xff0c;用于呈现系统、软件的结构、组件、关系和交互方式。一个明确的架构图可以更好地辅助业务分析、技术架构分析的工作。架构图的设计是一个有难度的任务&#xff0c;设计者必须要对业务、相关技术栈都非常清晰…

【JAVA学习笔记】55 - 集合-Map接口(难点)

Map接口 一、Map接口的特点&#xff08;难点&#xff09; 难点在于对Node和Entry和EntrySet的关系 注意:这里讲的是JDK8的Map接口特点 Map java 1) Map与Collection并列存在。用于保存具有映射关系的数据:Key-Value&#xff08;双列&#xff09; 2) Map中的key和value 可以…

物联网整体框架有哪些层面?

物联网是当前非常火热的话题&#xff0c;各个行业对物联网的关注和投入力度也很大&#xff0c;一些互联网巨头都在紧锣密鼓的布局物联网产业&#xff0c;抢占市场先机。 物联网的整体构架大致可以分为以下四个层面&#xff1a; 1.感知识别层 感知层是物联网整体架构的基础&…

Elasticsearch:使用 Elasticsearch 进行词汇和语义搜索

作者&#xff1a;PRISCILLA PARODI 在这篇博文中&#xff0c;你将探索使用 Elasticsearch 检索信息的各种方法&#xff0c;特别关注文本&#xff1a;词汇 (lexical) 和语义搜索 (semantic search)。 使用 Elasticsearch 进行词汇和语义搜索 搜索是根据你的搜索查询或组合查询…

【0基础学Java第五课】-- 方法的使用

5. 方法的使用 5.1 什么是方法5.2 方法定义5.3方法调用的执行过程例题&#xff1a;求n的阶乘和 5.4 实参和形参的关系&#xff08;重点&#xff09;5.5 没有返回值的方法5.6 方法重载5.7 方法签名5.8 递归5.9 递归练习按顺序打印一个数字的每一位(例如 1234 打印出 1 2 3 4)递归…

【Python语言速回顾】——爬虫基础知识

目录 一、爬虫概述 1、准备工作 2、爬虫类型 3、爬虫原理 二、爬虫三大库 1、Requests库 2、BeautifulSoup库 3、Lxml库 一、爬虫概述 爬虫又称网络机器人&#xff0c;可以代替人工从互联网中采集、整理数据。常见的网络爬虫主要有百度公司的Baiduspider、360公司的36…

电脑MSVCP120.dll丢失的解决办法,快速有效解决策略

在日常电脑使用过程中&#xff0c;我们可能会遇到一种情况&#xff0c;即打开某些程序或者游戏时&#xff0c;突然弹出一个错误提示&#xff0c;告诉我们"找不到MSVCP120.dll"文件&#xff0c;使得程序不能正常运行。本篇文章就带大家了解MSVCP120.dll以及MSVCP120.d…

springmvc 讲解(2)

系列文章目录 springmvc讲解&#xff08;1 &#xff09;点击此处即可 文章目录 系列文章目录一、Springmvc发送数据1、快速跳转页面1.1 开发模式讲解1.2 jsp简述1.3 页面跳转控制1.4 转发和重定向 2、返回json数据2.1 ResponseBody 注解2.2 RestController注解 3、访问静态资源…

Rust编程基础之6大数据类型

1.Rust数据类型 在 Rust 中, 每一个值都属于某一个 数据类型&#xff08;data type&#xff09;, 这告诉 Rust 它被指定为何种数据&#xff0c;以便明确数据处理方式。我们将看到两类数据类型子集&#xff1a;标量&#xff08;scalar&#xff09;和复合&#xff08;compound&a…

【Git】Git暂存使用

当我们正常使用Git切换分支时&#xff0c;会出现以下提示&#xff08;请在切换分支之前提交您的更改或隐藏它们&#xff09;&#xff1a; Please commit your changes or stash them before you switch branches. 这是由于你现有分支上有修改还没有commit&#xff0c;而你又选择…

汽车配件商城小程序制作 | 汽车配件售卖,高门槛但高利润

通过汽车配件商城小程序给别人的供货&#xff0c;利润可高达60%&#xff0c;但甚少有人关注汽车配件销售的行业。具体情况是怎么样的呢&#xff0c;下面给大家简单分析。 据数据显示&#xff0c;国内有4亿多辆汽车&#xff0c;这些汽车坏了要修&#xff0c;也要偶尔进行保养&am…

6个免费可商用的高清图片素材网站

找免费课商用图片就上这6个网站&#xff0c;高质量无水印&#xff0c;赶紧收藏&#xff01; 1、菜鸟图库 https://www.sucai999.com/pic.html?vNTYwNDUx 网站主要为新手设计师提供免费素材&#xff0c;这些素材的质量都很高&#xff0c;类别也很多&#xff0c;像平面、UI、电…

递归函数实现省市区多级联动搜索帮助

1、需求背景 当程序中有互为层级的字段&#xff0c;需要使用搜索帮助时&#xff0c;可以通过多次调用搜索帮助来实现。比如在程序中需要填写省市区三级地址 2、实现方式 2.1、平铺直叙 程序的搜索帮助&#xff0c;通常使用F4IF_INT_TABLE_VALUE_REQUEST来实现。多级的搜索帮…

2024上海国际人工智能展(CSITF)以“技术,让生活更精彩”为核心理念,以“创新驱动发展,保护知识产权,促进技术贸易”为主题

2024上海国际人工智能展&#xff08;CSITF&#xff09; China&#xff08;Shanghai&#xff09;International Technology Fair 时间:2024年6月12-14日 地点:上海世博展览馆 主办单位 中华人民共和国商务部 中华人民共和国科学技术部 中华人民共和国国家知识产权局 上海市…

进口跨境电商商城源码(海关179接口+海关报关+三单对碰)

海关179接口 现如今&#xff0c;跨境电商正在飞速发展&#xff0c;进口商品成为人们消费的热点。然而&#xff0c;进口商品的报关手续繁琐&#xff0c;而海关179接口的出现解决了这个问题。海关179接口是指与海关电子数据交换的商业接口&#xff0c;可以实现与海关进行数据对接…

小红书协议算法最新版

如果您想通过学习来了解小红书的点赞、关注、私信等功能的实现&#xff0c;以下是一些一般性的思路和示例代码&#xff0c;供您学习参考&#xff1a; 1. 点赞功能&#xff1a; - 后端实现&#xff1a;在后端&#xff0c;您可以创建一个用于存储用户点赞信息的数据库表。对于每…

自适应H5樱花个人网站引导页导航源码SEO增强版

懂前端和 PHP 技术想更改前端页面的可以看&#xff1a;网站的前端页面不好看&#xff0c;你可以查看 index 目录&#xff0c;内有参数 txt 文本里面记录了前端页面所使的关键 JS 代码和 php 代码&#xff0c;只需要稍加复制粘贴修改到新的前端页面就可以了&#xff01;主目录的…