HTML页面动态内容打印（文字、图片等）
2024-04-20 23:28:34
由于开发框架使用jsp，所以本文以jsp做示例，其他框架遵循框架语法即可，底层都是通过调用浏览器组件打印html
思路：
需要触发打印的页面添加打印按钮（当然这是废话，从这里开个头吧），和一个iframe
<iframe id="print-cover-iframe" frameborder="0" style="display: none;"></iframe>点击按钮时，动态设定当前iframe的src，使得iframe加载并渲染需要打印的html（所以本文讲的是动态获取html并打印，而非打印当前页面已有的一段html）
$("#btn_print").unbind("click").click(function() {console.log('点击打印');var url = '项目中需要打印的页面（我这里是前后端不分离的jsp，所以是后端的url会自动跳转到jsp页面）,如果是前后端分离的，可以直接是html的页面路由';var iframeId = 'print-cover-iframe';var $iframe = $('#' + iframeId);$iframe.attr('src', url);$iframe.load(function() {var HTML = document.getElementById(iframeId);HTML.focus();HTML.contentWindow.print();});});最后一步，也是最重要的一步：编写需要打印的页面，调起打印的页面样式设定还是有很多坑的，这里直接晒出jsp的页面（注：本文jsp页面是跳转前携带参数，接口分装参数并在jsp页面动态渲染的，前后端分离的项目，这个页面中可以在页面加载方法中触发动态绑定数据）
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%><c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
<script src="${pageContext.request.contextPath}/back/angularJs/jquery-2.1.3.min.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/back/angularJs/jquery.qrcode.min.js" type="text/javascript"></script>
<head><meta charset="UTF-8"><title>批量打印</title><meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport"content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"><style type="text/css">.qrcode{<%--background: url('${ctx}/back/image/img_chaobiao.png') no-repeat center center;--%>/*background-size:100% 100%;*/width: 92mm;height: 92mm;/*margin: 2mm;*/margin-left: 4mm;z-index: 8;position: relative;/*margin-top: 5mm;*//*-webkit-print-color-adjust: exact;*/}.qrcode > img {object-fit: contain;width: 100%;height: 100%;position: absolute;}.qrcode-img{z-index: 10;top: 22mm;left: 23mm;/*height: 60mm;*//*width: 55mm;*/position: absolute;}.qrcode-img > canvas{width: 42mm;height: 42mm;}.qrcode > img {object-fit: contain;width: 100%;height: 100%;}.background-img{/*position: absolute;*/z-index: 5;}.title-dev{/*width: 601px;*//*height: 108px;*/overflow-wrap: break-word;color: white !important;font-family: PingFangSC-Medium;text-align: center;line-height: 10mm;margin-left: 27mm;margin-top: 20mm;z-index: 10;width: 40mm;position: absolute;}@media print {.collage_bg {background-color: #E6E7E9 !important;-webkit-print-color-adjust: exact;}}@media print {.print-padding {position: absolute;padding: 12% 8% 0 3.1%;z-index: 10;}.page-break{page-break-after:always;}.title-dev{color: #FFFFFFFF !important;}body {/*此样式可防止打印的字体、背景色与设定的不一样问题*/-webkit-print-color-adjust: exact;}}@page {margin-top: 0;margin-bottom: 0;size: portrait;/*（纵向)*/}#print_box {/*position: static;*/}.qrcode > img {/*position: absolute;*/z-index: 5;object-fit: contain;/*margin: 15px -40px;*/}.table {margin-bottom: 5px;}.box{display: flex;flex-wrap: wrap;}.item{align-self: auto;}</style>
</head><body>
<%-- 定义一个长度为6的数组，每6个二维码分一页 --%>
<%String[] str={"1","2","3","4","5","6"};request.setAttribute("str",str);
%>
<%-- 循环渲染二维码，每6个二维码分一页 ps：使用嵌套循环而不用判断当前index取模的方式是因为Edge等浏览器分页符需要在最外层标签才生效--%>
<c:forEach var="item" items="${qrCodes}" step="6" varStatus="status"><div class="box"><c:forEach items="${str}" var="s" varStatus="intStatus"><c:if test="${(status.index + intStatus.index) < fn:length(qrCodes)}"><div class="item"><div class="qrcode"><img src="${ctx}/back/image/img_chaobiao.png" class="visible-print-block background-img"/><div class="qrcode-img print-padding" id="qrcode_${qrCodes[status.index + intStatus.index].id}"></div><div class="title-dev">${qrCodes[status.index + intStatus.index].qrCodeName}</div></div></div></c:if></c:forEach></div><c:if test="${!status.last}"><div class="page-break"></div></c:if>
</c:forEach><%--<div class="box"><c:forEach items="${qrCodes}" var="qrCode" varStatus="status"><div class="item"><div class="qrcode"><img src="${ctx}/back/image/img_chaobiao.png" class="visible-print-block background-img"/><div class="qrcode-img print-padding" id="qrcode_${qrCode.id}"></div><div class="title-dev">${qrCode.qrCodeName}</div></div></div><c:if test="${status.count%6==0 && !status.last}"><div class="page-break"></div></c:if></c:forEach>
</div>--%><script type="text/javascript"><c:forEach var="item" items="${qrCodes}" varStatus="status">qrcode('qrcode_${item.id}','${item.id}');</c:forEach>function qrcode(id,content){$("#" + id).qrcode({width: 120, //宽度height: 120, //高度text: utf16to8(content), //内容typeNumber: -1,//计算模式correctLevel: 1,//二维码纠错级别background: "#ffffff",//背景颜色foreground: "#000000" //二维码颜色});}//中文编码格式转换function utf16to8(str) {var out, i, len, c;out = "";len = str.length;for (i = 0; i < len; i++) {c = str.charCodeAt(i);if ((c >= 0x0001) && (c <= 0x007F)) {out += str.charAt(i);} else if (c > 0x07FF) {out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));} else {out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));}}return out;}
</script></body></html>最后，晒出效果（灰色块为马赛克）：
HTML页面动态内容打印（文字、图片等）相关推荐
- 1.关于QT中的Graphics绘图，定时器，动画，将窗口中的内容打印到图片上，打印机，打印预览
1 新建项目 A 修改pro中的内容如下: HEADERS += \ MyWidget.h SOURCES += \ MyWidget.cpp QT += gui widgets prints ...
- QT实现PDF打印文字+图片。亲测可用！！！
//在同一个文件中插入文字和图片,保存在E盘QPrinter printer_text;printer_text.setOutputFormat(QPrinter::PdfFormat);//保存文件 ...
- 页面div内容下载成图片
最近遇到一个需求,把页面中一个div的内容(我们的是票样,诸如发票,凭证,电子收据之类),下载成图片,可能遇到过此类问题的小伙伴们都知道,页面是有样式的,单独下载某一个Div如果用以往的办法肯定是先生 ...
- html实现页面中内容居中显示图片,javascript怎么让图片居中显示？
javascript怎么让图片居中显示?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. javascript让图片居中显示的方法 1.准备一个图片,如图, ...
- 水晶报表 动态批量打印本地图片
目的:从数据库中得到本地图片的路径,再将其打印到报表上,每一个ID查询出来的信息(包括多幅图片)对应报表中的一页 环境:VS2005+自带水晶报表 参考文献:http://babyt.cnblogs. ...
- android动态图片做背景,在Android上添加动态内容后,背景图片变为纯色
我的目标是在网站内容后拥有完整的背景图片.我正在使用以下CSS实现此目的: body { background: url(../img/bg.jpg) no-repeat center center ...
- 蓝牙连接打印机打印文字图片条形码二维码 用的是Gprinter打印机
实现了蓝牙打印,正在进一步完善,欢迎留言交流 :) Github链接
- vue截取页面一部分内容并导出图片
安装插件 npm install html2canvas --save 引入当前需要的vue文件 import html2canvas from "html2canvas"; 全部 ...
- 微信小程序之子页面动态修改导航栏标题文字内容
在实际的项目开发中,一般我们页面导航栏的标题文字都不是固定的,而是根据场景需要动态设置的,这个如何实现呢.微信官方提供的方法如下: 1.设置动态的 onLoad: function (options) ...
最新文章
- Crystal Reports 财务日记帐凭证套打设计
- Powershell RESTAPI 访问Office365
- Java集合：set的遍历方式
- 1099 Build A Binary Search Tree (30 分)【难度: 一般 / 知识点: 建立二叉搜索树】
- C语言基础知识（二）-------C++变量及赋值
- Python之Pandas库
- mysql索引缓存的内容_mysql服务器变量、缓存及索引
- K8S 的报错问题解决
- 关于序列化的 10 几个问题，你肯定不知道
- css的list,CSS List 入门教程
- 计算机更新bios,升级bios,详细教您主板怎么更新bios
- python在屏幕上画画,屏幕上的Python绘图
- 谷歌离线地图开发教程
- c语言牛顿法求整数平方根,牛顿法求平方根-编程练习
- pdf打印去掉页眉页脚（兼容ie）
- VproC#混合编程，Basler相机加载显示实时图像
- 怎样把一张图片插入到CAD图纸中呢？
- Accessing non existent property lineno of module
- C++中string字符串查找某一子字符串所有出现过的位置，并计数
- 51群接龙-社区社群团购专业营销工具