web 页面分页打印的实现

最新推荐文章于 2024-06-04 09:35:08 发布
最新推荐文章于 2024-06-04 09:35:08 发布
阅读量3.7k 收藏 1
点赞数
分类专栏： J2EE Web前端 JavaScript 文章标签： web 分页 webbrowser javascript
J2EE 同时被 3 个专栏收录
19 篇文章 0 订阅
订阅专栏
Web前端
9 篇文章 0 订阅
订阅专栏
JavaScript
7 篇文章 0 订阅
订阅专栏

1．首先引入一个WebBrowser在需要打印的页面，可以直接添加：

代码如下:

<object id="WebBrowser" classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height="0" width="0"> 
</object>

到页面，或者使用JavaScript在需要的时候临时添加也可以：

代码如下:

document.body.insertAdjacentHTML("beforeEnd", 
"<object id=\"WebBrowser\" width=0 height=0 \ 
classid=\"clsid:8856F961-340A-11D0-A96B-00C04FD705A2\">");

2 .页面设置和打印预览
如下所示，直接调用即可 
代码如下: 

document.all.WebBrowser.ExecWB(6,6) 直接打印 
document.all.WebBrowser.ExecWB(8,1) 页面设置 
document.all.WebBrowser.ExecWB(7,1) 打印预览

或者：

代码如下: 
execScript("document.all.WebBrowser.ExecWB 7, 1","VBScript");

3 隐藏不打印的页面元素和分页
CSS 有个Media 属性，可以分开设置打印和显示的格式。
如 <style media="print" type="text/css"> …</style> 中间的格式将只在打印时起作用，不会影响显示界面。
所以可以设定
<style media="print" type="text/css">
.Noprint{display:none;}
.PageNext{page-break-after: always;}
</style>
然后给不想打印的页面元素添加： class="Noprint" ，那就不会出现在打印和打印预览中了。
想分页的地方添加： <div class="PageNext"></div> 就可以了。
4．打印页面的特定部分
通过将需要打印的特定部分另建一个页面，然后装入主页面的一个IFrame中，再调用IFrame的打印方法，只打印IFrame中的内容实现的。
如：
<iframe style="visibility: visible" name="FrameId" width="100%" height="30%" src="NeedPrintedPage.asp"></iframe>
下面的pringFrame js函数将只打印Iframe中的内容，可以直接引用使用,如printFrame(FrameId); 
代码如下: 

window.print = printFrame; 
// main stuff 
function printFrame(frame, onfinish) { 
if ( !frame ) frame = window; 
function execOnFinish() { 
switch ( typeof(onfinish) ) { 
case "string": execScript(onfinish); break; 
case "function": onfinish(); 
} 
if ( focused && !focused.disabled ) focused.focus(); 
} 
if (( frame.document.readyState !== "complete") &&( !frame.document.confirm("The document to print is not downloaded yet! Continue with printing?") )) 
{ 
execOnFinish(); 
return; 
} 
var eventScope = printGetEventScope(frame); 
var focused = document.activeElement; 
window.printHelper = function() { 
execScript("on error resume next: printWB.ExecWB 6, 1", "VBScript"); 
printFireEvent(frame, eventScope, "onafterprint"); 
printWB.outerHTML = ""; 
execOnFinish(); 
window.printHelper = null; 
} 
document.body.insertAdjacentHTML("beforeEnd", 
"<object id=\"printWB\" width=0 height=0 \ 
classid=\"clsid:8856F961-340A-11D0-A96B-00C04FD705A2\">"); 
printFireEvent(frame, eventScope, "onbeforeprint"); 
frame.focus(); 
window.printHelper = printHelper; 
setTimeout("window.printHelper()", 0); 
} 
// helpers 
function printIsNativeSupport() { 
var agent = window.navigator.userAgent; 
var i = agent.indexOf("MSIE ")+5; 
return parseInt(agent.substr(i)) >= 5 && agent.indexOf("5.0b1") < 0; 
} 
function printFireEvent(frame, obj, name) { 
var handler = obj[name]; 
switch ( typeof(handler) ) { 
case "string": frame.execScript(handler); break; 
case "function": handler(); 
} 
} 
function printGetEventScope(frame) { 
var frameset = frame.document.all.tags("FRAMESET"); 
if ( frameset.length ) return frameset[0]; 
return frame.document.body; 
} 
Iframe中所装载页面的打印效果在所装载页面设置就可以了，如分页等。 
5．后台打印 
通过建一个隐藏Iframe实现的，当然仍然会有页面装载的过程。 
下面的函数创建Iframe装载页面并打印。如 printHidden(url) //url为页面地址 
function printHidden(url) { 
document.body.insertAdjacentHTML("beforeEnd", 
"<iframe name=printHiddenFrame width=0 height=0></iframe>"); 
var doc = printHiddenFrame.document; 
doc.open(); 
doc.write("<body οnlοad=\"parent.onprintHiddenFrame()\">"); 
doc.write("<iframe name=printMe width=0 height=0 src=\"" + 
url + "\"></iframe>"); 
doc.write("</body>"); 
doc.close(); 
} 
function onprintHiddenFrame() { 
function onfinish() { 
printHiddenFrame.outerHTML = ""; 
if ( window.onprintcomplete ) window.onprintcomplete(); 
} 
printFrame(printHiddenFrame.printMe, onfinish); 
} 
它用到了printFrame，所以别忘了引用前面的函数。 
以下为demo: 
<html> 
<head> 
<title>报表</title> 
<object id="WebBrowser" 
classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height="0" 
width="0"> 
</object> 
<style media="print" type="text/css"> 
.Noprint{display:none;} 
.PageNext{page-break-after: always;} 
</style> 
</head> 
<body> 
<div class="Noprint"> 
<input type="button" value="print" 
οnclick="document.all.WebBrowser.ExecWB(6,6)"> 
<input type="button" value="printset" 
οnclick="document.all.WebBrowser.ExecWB(8,1)"> 
<input type="button" value="view" 
οnclick="document.all.WebBrowser.ExecWB(7,1)"> 
<input type="button" value="frame" 
οnclick="printHidden(FrameId)"> 
</div> 
<div class="PageNext"> 
1 
</div> 
<div class="PageNext"> 
2 
</div> 
<iframe style="visibility: visible" diplay="none"name="FrameId" width="100%" 
height="30%" src="2.html"></iframe> 
</body> 
</html> 
<script type="text/javascript"> 
window.print = printFrame; 
// main stuff 
function printFrame(frame, onfinish) { 
if ( !frame ) frame = window; 
function execOnFinish() { 
switch ( typeof(onfinish) ) { 
case "string": execScript(onfinish); break; 
case "function": onfinish(); 
} 
if ( focused && !focused.disabled ) focused.focus(); 
} 
if (( frame.document.readyState !== "complete") &&( !frame.document.confirm("The document to print is not downloaded yet! Continue with printing?") )) 
{ 
execOnFinish(); 
return; 
} 
var eventScope = printGetEventScope(frame); 
var focused = document.activeElement; 
window.printHelper = function() { 
execScript("on error resume next: printWB.ExecWB 6, 1", "VBScript"); 
printFireEvent(frame, eventScope, "onafterprint"); 
printWB.outerHTML = ""; 
execOnFinish(); 
window.printHelper = null; 
} 
document.body.insertAdjacentHTML("beforeEnd", 
"<object id=\"printWB\" width=0 height=0 \ 
classid=\"clsid:8856F961-340A-11D0-A96B-00C04FD705A2\">"); 
printFireEvent(frame, eventScope, "onbeforeprint"); 
frame.focus(); 
window.printHelper = printHelper; 
setTimeout("window.printHelper()", 0); 
} 
// helpers 
function printIsNativeSupport() { 
var agent = window.navigator.userAgent; 
var i = agent.indexOf("MSIE ")+5; 
return parseInt(agent.substr(i)) >= 5 && agent.indexOf("5.0b1") < 0; 
} 
function printFireEvent(frame, obj, name) { 
var handler = obj[name]; 
switch ( typeof(handler) ) { 
case "string": frame.execScript(handler); break; 
case "function": handler(); 
} 
} 
function printGetEventScope(frame) { 
var frameset = frame.document.all.tags("FRAMESET"); 
if ( frameset.length ) return frameset[0]; 
return frame.document.body; 
} 
function printHidden(url) { 
document.body.insertAdjacentHTML("beforeEnd", 
"<iframe name=printHiddenFrame width=0 height=0></iframe>"); 
var doc = printHiddenFrame.document; 
doc.open(); 
doc.write("<body οnlοad=\"parent.onprintHiddenFrame()\">"); 
doc.write("<iframe name=printMe width=0 height=0 src=\"" + 
url + "\"></iframe>"); 
doc.write("</body>"); 
doc.close(); 
} 
function onprintHiddenFrame() { 
function onfinish() { 
printHiddenFrame.outerHTML = ""; 
if ( window.onprintcomplete ) window.onprintcomplete(); 
} 
printFrame(printHiddenFrame.printMe, onfinish); 
} 
</script>


hybaym
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
window.print()前端实现网页打印功能详解
菜鸟教程
05-08 2256
print作为浏览已经比较成熟的技术可以经常被用来打印页面的部分内容，我们可以在MDN上查看到相关的简单介绍。到此这篇关于window.print()前端实现网页打印功能的文章就介绍到这了,更多相关window.print()前端网页打印内容请搜索网赚博客https://www.piaodoo.com/以前的文章或继续浏览下面的相关文章希望大家以后多多支持网赚博客https://www.piaodoo.com/！茂名一技http://www.szsyby.net/
打印分页，html强制分页
09-25
打印分页，html强制分页，一个表格一页，可以查看打印预览
打印分页网页的所有内容（iframe标签里面的内容）
最新发布
zd1320732的专栏
06-04 215
【代码】打印分页网页的所有内容（iframe标签里面的内容）
js的打印分页
weixin_30902251的博客
08-10 438
调用IE自带的打印功能时，在需要分页的地方插入如下HTML，便可实现打印分页： <div style="page-break-before:always;"><br /></div> 转载于:https://www.cnblogs.com/Roy_Cao/archive/2013/01/05/2845200.html...
浏览器打印分页
bluelotos893的博客
05-06 933
&lt;HTML&gt; &lt;HEAD&gt; &lt;TITLE&gt;print&lt;/TITLE&gt; &lt;meta http-equiv="content-type" content="text/html;charset=gb2312"&gt; &lt;style&gt; /**//** * 打印相关 */ @media print { .not
前端页面打印分页
weixin_44997513的博客
07-25 951
前端打印
css控制页面打印（分页、屏蔽不需要打印的对象）
tcdddd的专栏
11-13 6589
样式：media="print">     .Noprint   {   DISPLAY:   none;}     .PageNext   {   PAGE-BREAK-AFTER:   always   }     注：①、不需要打印的对象要用上“Noprint”样式。②、需要换页处理的对象要用上“PageNext”样式。③、因为最后一页不用加入换页符，所以要控制最后一页不
JS 实现web分页打印功能
11-09
综上所述，通过合理地使用`Window.print()`方法结合CSS样式控制和JavaScript逻辑，我们可以实现一个强大的Web分页打印功能。确保对各种浏览器进行充分测试，并根据需要进行优化，以提供最佳用户体验。
Web分页打印 细线表格+分页打印之终极攻略
12-14
客户提出打印时不要打印该页面的头，只是打印表格里面的内容，因为头部有背景和打印按钮，而且要细线表格的那种，我想细线表格不是很简单吗 如果你还不知道细线表格怎么做，请看下面的代码实现效果：） ...
js设置html打印不分页,web 页面分页打印的实现
weixin_34193397的博客
06-18 1467
1．首先引入一个WebBrowser在需要打印的页面，可以直接添加：到页面，或者使用JavaScript在需要的时候临时添加也可以：document.body.insertAdjacentHTML("beforeEnd","classid=\"clsid:8856F961-340A-11D0-A96B-00C04FD705A2\">");2 .页面设置和打印预览如下所示，直接调用即可docu...
js实现打印，可以自动分页！
03-04
js打印,将数据读取到打印页面，用js截取，从而实现打印指定模块！打印的时候如果页面数据过多，打印机可以自动分页打印！我的是hp的打印机，下载的朋友可以试试！注意，本人声明：这个并不是针对于打印分页而写，只是普通的js打印！
JS分页，WEB分页打印
05-03
实现简单的web打印分页功能，适用于WEB工程的打印预览
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 **/
web前端实现多页打印
11-19
web前端实现打印功能，并且可多页打印
js 打印 分页
代码小学生的博客
04-10 714
.A4{ page-break-before: auto; page-break-after: always; } <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>分页测试</title&...
JS 分页打印
℡メ㏑╭ァ小凯
05-16 1377
在调用window.print()时，可以实现打印效果，但内容太多时要进行分页打印。在样式中有规定几个打印的样式page-break-before和page-break-afterCSS属性并不会修改网页在屏幕上的显示，这两个属性是用来控制文件的打印方式。每个打印属性都可以设定4种设定值：auto、always、left和right。其中Auto是默认值，只有在有需要时，才需设定分页符号 (Pa...
打印分页例子
沙振中
12-08 565
          http://schemas.microsoft.com/intellisense/ie5">     看看                    .Noprint{display:none;}     .PageNext{page-break-after:   always;}                   .tdp     {             border-b
vue 表格分页打印，字体自适应大小缩放。
weixin_40992252的博客
04-29 796
因表格内字数不确定，1页强制10行，有的页面很短，有的页面会超出，效果不好，需要每个单元格内大小自适应表格调整。通过计算每个单元格的大小、可容纳的文字数量与实际的文字数量的比例来动态控制每个单元格内文字的缩放比例。(3）同时要注意，字母，数字，英文标点符号，占的比例应该为字体的0.6倍左右，需要处理。单元格内字数如果超过可能容纳最多的字数，那么字体需要缩小，如果不超过，那么不需要缩小。如果字体大小超过默认字体大小，不需要改变，如果小于默认字体大小就是需要缩小的。(1) 计算每个单元格容纳的标准字体个数。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值