HTML网页打印实现分页打印功能

最新推荐文章于 2024-05-17 07:46:48 发布
最新推荐文章于 2024-05-17 07:46:48 发布
阅读量1.6w 收藏 10
点赞数 1
分类专栏： HTML 文章标签： HTML分页打印 
<html>
	<head>
		<title>页面打印</title>
		<!--media=print 这个属性在打印时有效 有些不想打印出来的分页打印的都可以应用这类样式进行控制 在非打印时是无效的(可从打印预览中看到效果)-->
		<style media=print>
			/* 应用这个样式的在打印时隐藏 */
			.noPrint {
				display: none;
			}
			
			/* 应用这个样式的，从那个标签结束开始另算一页，之后在遇到再起一页，以此类推 */
			.page {
				page-break-after: always;
			}
		</style>

		<!-- 这个是普通样式 -->
		<style type="text/css">
			.tab td {
				border-bottom: 1 solid #000000;
				border-left: 1 solid #000000;
				border-right: 0 solid #ffffff;
				border-top: 0 solid #ffffff;
			}
			
			.tab {
				border-color: #000000 #000000 #000000 #000000;
				border-style: solid;
				border-top-width: 2px;
				border-right-width: 2px;
				border-bottom-width: 1px;
				border-left-width: 1px;
			}
			
			.hr {
				font-family: "宋体";
				font-size: 9pt;
			}
		</style>
		<script language="JavaScript" type="text/JavaScript">
			var hkey_root, hkey_path, hkey_key;   
			hkey_root = "HKEY_CURRENT_USER";
			hkey_path = "//Software//Microsoft//Internet Explorer//PageSetup//";
			//这个是用来设置打印页眉页脚的，你可以设置为空或者其它
			try{   
				var RegWsh = new ActiveXObject("WScript.Shell"); 
				hkey_key="header";
				RegWsh.RegWrite(hkey_root+hkey_path+hkey_key, "&w&b页码，&p/&P");
				hkey_key="footer";
				RegWsh.RegWrite(hkey_root+hkey_path+hkey_key,"");
			}catch(e){
				alert(e.description());
			}
	</script>
	</head>
	<body bgcolor="white">
		<table cellspacing="0" cellpadding="0" width="100%" align="center" border="0">
			<thead class="noPrint">
				<tr>
					<td align="center" colspan="3">
						<center class="NoPrint">
							<OBJECT id=WebBrowser classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 width=0></OBJECT>
							<input type=button value=打印 οnclick=document.all.WebBrowser.ExecWB(6,1)>
							<input type=button value=直接打印 οnclick=document.all.WebBrowser.ExecWB(6,6) />
							<input type=button value=页面设置 οnclick=document.all.WebBrowser.ExecWB(8,1) />
							<input type=button value=打印预览 οnclick=document.all.WebBrowser.ExecWB(7,1) />
							<!--
							关于这个组件还有其他的用法，列举如下： 
							WebBrowser.ExecWB(1,1) 打开 
							Web.ExecWB(2,1) 关闭现在所有的IE窗口，并打开一个新窗口 
							Web.ExecWB(4,1) 保存网页 
							Web.ExecWB(6,1) 打印 
							Web.ExecWB(7,1) 打印预览 
							Web.ExecWB(8,1) 打印页面设置 
							Web.ExecWB(10,1) 查看页面属性 
							Web.ExecWB(15,1) 好像是撤销，有待确认 
							Web.ExecWB(17,1) 全选 
							Web.ExecWB(22,1) 刷新 
							Web.ExecWB(45,1) 关闭窗体无提示 
							-->
						</center>
					</td>
				</tr>
			</thead>
			<tr>
				<td align="center" colspan="3" style="font-size: 24px">
					<b>报告印章申请表</b>
				</td>
			</tr>
			<tr>
				<td align="left" colspan="2">编号：A002 </td>			
				<td align="right"> </td>
			</tr>
			<tr>
				<td colspan="3">
					<table class="tab" cellSpacing="0" cellPadding="0" width="100%">
						<tr align="center" height="23">
							<td width="10%" height="23"><b>编号</b></td>
							<td width="5%"><b>份数</b></td>
							<td width="12%"><b>项目/级别编号</b></td>
							<td width="12%"><b>单位</b></td>
							<td width="12%"><b>项目名称</b></td>
							<td width="12%"><b>工程地点</b></td>
							<td width="12%"><b>检测项目</b></td>
							<td width="7%"><b>单价</b></td>
							<td width="8%"><b>数量</b></td>
							<td width="10%"><b>总价</b></td>
						</tr>
						<tr style="font-size: 13px" align="center" height="23">
							<td>A14785 </td>
							<td>5 </td>
							<td>A1546/8975 </td>
							<td>中国广东广州 </td>
							<td>BRT工程 </td>
							<td>广州天河 </td>
							<td>BRT工程 </td>
							<td>￥999999999.99</td>
							<td>20 </td>
							<td>20*￥999999999.99 </td>
						</tr>
						<tr align="center" height="23">
							<td colspan="2">备注</td>
							<td colspan="8"> </td>
						</tr>						
					</table>
				</td>
			</tr>
		</table>
		<hr class="noprint" width="100%" size="2"/>
		<div class="page"></div>
		<table class="tab" cellSpacing="0" cellPadding="0" width="100%">
			<tr align="center" height="23">
				<td width="10%" height="23"><b>编号</b></td>
				<td width="5%"><b>份数</b></td>
				<td width="12%"><b>项目/级别编号</b></td>
				<td width="12%"><b>单位</b></td>
				<td width="12%"><b>项目名称</b></td>
				<td width="12%"><b>工程地点</b></td>
				<td width="12%"><b>检测项目</b></td>
				<td width="7%"><b>单价</b></td>
				<td width="8%"><b>数量</b></td>
				<td width="10%"><b>总价</b></td>
			</tr>
			<tr style="font-size: 13px" align="center" height="23">
				<td>A14785 </td>
				<td>5 </td>
				<td>A1546/8975 </td>
				<td>中国广东广州 </td>
				<td>BRT工程 </td>
				<td>广州天河 </td>
				<td>BRT工程 </td>
				<td>￥999999999.99</td>
				<td>20 </td>
				<td>20*￥999999999.99 </td>
			</tr>
			<tr align="center" height="23">
				<td colspan="2">备注</td>
				<td colspan="8"> </td>
			</tr>						
		</table>

		<div class="page"></div>
		<table class="tab" cellSpacing="0" cellPadding="0" width="100%">
			<tr align="center" height="23">
				<td width="10%" height="23"><b>编号</b></td>
				<td width="5%"><b>份数</b></td>
				<td width="12%"><b>项目/级别编号</b></td>
				<td width="12%"><b>单位</b></td>
				<td width="12%"><b>项目名称</b></td>
				<td width="12%"><b>工程地点</b></td>
				<td width="12%"><b>检测项目</b></td>
				<td width="7%"><b>单价</b></td>
				<td width="8%"><b>数量</b></td>
				<td width="10%"><b>总价</b></td>
			</tr>
			<tr style="font-size: 13px" align="center" height="23">
				<td>A14785 </td>
				<td>5 </td>
				<td>A1546/8975 </td>
				<td>中国广东广州 </td>
				<td>BRT工程 </td>
				<td>广州天河 </td>
				<td>BRT工程 </td>
				<td>￥999999999.99</td>
				<td>20 </td>
				<td>20*￥999999999.99 </td>
			</tr>
			<tr align="center" height="23">
				<td colspan="2">备注</td>
				<td colspan="8"> </td>
			</tr>						
		</table>

	</body>
</html>
玩味Orz
关注
  • 1
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
html网页怎么分页打印,web如何实现页面分页打印
weixin_42510962的博客
06-21 3803
实现页面分页打印是很多小伙伴们都想知道的，那么你知道web如何实现页面分页打印的具体方法吗？下面就让爱站小编带领大家一起去学习学习吧，希望本文对你有所帮助。1．首先引入一个WebBrowser在需要打印的页面，可以直接添加：???到页面，或者使用JavaScript在需要的时候临时添加也可以：???document.body.insertAdjacentHTML("beforeEnd","clas...
HTML print打印(分页,统计,排版)
11-21
方案一(适用于动态页面)分层结构 方案二(适用于静态页面)独立结构 /** * 基于jquery的打印分页插件 * 方法API: * loadDate data,model,shownum(数据源[数组],模板页面,每页显示数) data 建议最大数据量不要超过500 * loadTABLE 利用模版创建TABLE代码 * insertTABLE 插入数据 * formwork 创建分页框架 * setAlign 设置排版样式 右对齐 - 居中 * setWidth 设置宽度 * setLineHide 影藏一列数据 * rowspans 合并多列字段 用,隔开 注意:最好查询时使用排序后合并 * rowspan 合并一列字段 注意:最好查询时使用排序后合并 * StringtoJSON 将JSON的String字符,转换成JS对象数据 * getalign 字符切换 对应setAlign 方法 * SumTable 计算表的列("2,3,4") 对应层级TABLE **/
HTML 网页打印实现分页打印功能
玩味JAVA
06-05 2695
&lt;html&gt; &lt;head&gt; &lt;title&gt;页面打印&lt;/title&gt; &lt;!--media=print 这个属性在打印时有效 有些不想打印出来的分页打印的都可以应用这类样式进行控制 在非打印时是无效的(可从打印预览中看到效果)--&gt; &lt;style media=print&gt; /* 应用这个样式的在打印时隐藏 */...
html2canvas实现网页局部存为图片和打印_html2canvas打印网页内容(1)
最新发布
2401_84924979的博客
05-17 487
首先，如果是要打印html2canvas所截取下来的图片，方案是新打开一个窗口，将图片的src传递过去，并设置为body的背景图片。这里使用截图就是用img标签将截图显示出来，由此可见，截图效果还可以，这也是以为我截图的内容基本都是纯dom结构渲染的。值得注意的是，使用这种方法时，得将css写在标签内部，独立出来的css是不能通过这种方法表现出来的。于是，采用第二种方案，将要打印部分dom提取出来，然后打开新的浏览器窗口，将提取出来的dom结构写入，然后再执行打印操作。如果这里无法下载的请留言。
html 打印分页
qq_37669681的博客
09-18 517
转载地址 https://blog.csdn.net/liuxing393724034/article/details/83624548 很简单，只要在需要分页的地方加上一行代码： <div style="page-break-after: always;"></div> ...
在HTML页面打印内容时，将打印内容分页进行打印
yhj198927的博客
04-17 1505
首先在<script></script>代码中添加如下代码： <style type="text/css"> .PageNext{page-break-after: always;} </style> 然后在需要分页的地方加上如下代码： <div class="PageNext"></div> 这样就可以将打印内...
html打印分页自带表头表尾
01-15
需要自己写打印程序时，会遇到打印分页都需有表头表尾的问题，html打印分页自带表头表尾，可以参考学习下
JS 实现web分页打印功能
11-09
本篇将详细介绍如何利用JS的`Window`对象的`print()`方法来实现一个具有强大兼容性的分页打印功能。 首先，`Window.print()`方法是JavaScript中用于调用浏览器内置的打印对话框的函数，用户可以在该对话框中选择...
jQuery打印指定区域Html页面并自动分页
10-25
在网页开发中，有时我们需要对特定的HTML区域进行打印，而不是整个页面。在这种情况下，`jQuery.PrintArea.js`插件提供了一个解决方案，它允许我们指定要打印的区域，并且能够自动进行分页。这个插件特别适用于那些...
前端打印时js分页实现共几页和第几页
08-06
本文将详细介绍如何使用JavaScript（js）在前端实现分页功能，包括显示总页数、当前页数，以及触底自动换页，并在每页表头增加固定部分，如金额大写转换和当前时间获取。 一、分页基础 1. 数据分块：分页的核心是...
js设置html打印不分页,web 页面分页打印的实现
weixin_34193397的博客
06-18 1445
1．首先引入一个WebBrowser在需要打印的页面，可以直接添加：到页面，或者使用JavaScript在需要的时候临时添加也可以：document.body.insertAdjacentHTML("beforeEnd","classid=\"clsid:8856F961-340A-11D0-A96B-00C04FD705A2\">");2 .页面设置和打印预览如下所示，直接调用即可docu...
打印分页，html强制分页
09-25
打印分页，html强制分页，一个表格一页，可以查看打印预览
html大段文本如何分页,如何避免大型HTML表格中文本的分页符（打印/ PDF）？
weixin_35566895的博客
06-18 504
我有以下单个HTML文件(包括样式/脚本)：FQ.html我有以下问题：我已经迭代了解决方案尝试，最新的尝试有以下一些CSS ......@media print{@page {size:1080px 1080px;margin: 0px;}.page-break-before { page-break-before: always; display:block; width:200%;}.pa...
html大段文本如何分页,打印大型HTML表时如何处理分页符
weixin_42535720的博客
06-18 934
回答(11)3 years agoTesttable { page-break-inside:auto }tr { page-break-inside:avoid; page-break-after:auto }thead { display:table-header-group }tfoot { display:table-footer-group }headingnotesxxx3 ye...
WEB打印-网页打印功能(带分页、可多页打印)
热门推荐
老李 技术 专栏
08-22 5万+
Web打印 .Noprint{display:none;} .PageNext{page-break-after: always;} .tdp { border-bottom: 1 s
页码在html中怎么设置,如何设置网页打印的网址、日期、页码等？
weixin_35971708的博客
06-23 2010
2005-12-22怎样更改网页打印时的外观?在“文件”菜单上，单击“页面设置”。在“页边距”框中，键入页边距(以英寸为单位)。在“方向”下面，单击“纵向”或“横向”，指定要纵向还是横向打印页面。在“页眉”和“页脚”框中，使用以下变量指定要打印的信息。 变量可以和文本组合(例如：页码，&p/&P)。要打印 请键入窗口标题 &w网页地址 (URL) u短格式日期(由“控制面...
HTML实现分页功能
weixin_45607635的博客
12-07 2万+
思路 主要是通过display: block和display: none来实现页面的切换。 将每个页面用一个div包起来，默认第一个页面的样式是display: block，其他页面的样式是display: none，然后通过JavaScript获取鼠标点击事件来隐藏其他页面，显示当前页面，达到页面切换的目的。 效果 具体实现 创建项目 首先创建一个项目，我的项目的目录结构大致如下图所示。 .html文件 篇幅问题，这里就只详细放page部分的第一个页面的两个条目的代码作为例子了。 <!DOCTY
html 分页封装
weixin_51679573的博客
04-08 152
html 分页封装
分页阅读html,HTML+CSS入门 HTML分页详解
weixin_39932330的博客
06-02 947
本篇教程介绍了HTML+CSS入门 HTML分页详解，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。<1.CSS1/*2*页数按钮样式3*/4.page_divspan:nth-of-type(2){5float:right;6}7.page_diva:last-child{8margin-right:0;9}10.page...
js实现打印功能,自动分页
11-23
要实现js的打印功能并自动分页，可以通过以下步骤进行操作： 1. 首先，在页面上创建一个打印按钮，并给该按钮添加一个点击事件监听器。 2. 在点击事件的回调函数中，获取需要打印的内容，并将其分成适当的分页。 3. 使用js的`print()`方法打印每一页的内容。 4. 在分页之前，可以通过`window.innerWidth`和`window.innerHeight`获取当前窗口的尺寸，以便确定每一页的高度。 5. 对需要打印的内容进行遍历，并根据每一页的高度将内容分成不同的页面。 6. 使用css的@media print媒体查询来控制打印样式，例如设置页面居中、隐藏不需要打印的元素等。 下面是一个简单的示例代码： ```html <button id="printBtn">打印</button> <div id="content"> <!--要打印的内容--> </div> <script> document.getElementById('printBtn').addEventListener('click', function() { var content = document.getElementById('content').innerHTML; var pages = paginateContent(content); // 分页处理 printPages(pages); // 打印每一页的内容 }); function paginateContent(content) { var pageHeight = window.innerHeight; // 每一页的高度 var pages = []; var startIndex = 0; while (startIndex < content.length) { var endIndex = startIndex + pageHeight; pages.push(content.substring(startIndex, endIndex)); startIndex = endIndex; } return pages; } function printPages(pages) { var printWindow = window.open('', '', 'width=800, height=600'); printWindow.document.write('<html><head><title>打印</title></head><body>'); for (var i = 0; i < pages.length; i++) { printWindow.document.write('<div class="page">' + pages[i] + '</div><p style="page-break-after: always;"></p>'); } printWindow.document.write('</body></html>'); printWindow.document.close(); printWindow.print(); } </script> ``` 通过上述代码，我们可以实现在页面上点击按钮后，将内容进行自动分页，并打印每一页的内容。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值