web 页面分页打印的实现

2014-04-28  来源:本站原创  分类:javascript技巧  人气:2 

网上找的,经我整理添加demo如下

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 onload=\"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"
onclick="document.all.WebBrowser.ExecWB(6,6)">
<input type="button" value="printset"
onclick="document.all.WebBrowser.ExecWB(8,1)">
<input type="button" value="view"
onclick="document.all.WebBrowser.ExecWB(7,1)">
<input type="button" value="frame"
onclick="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 onload=\"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>
相关文章
  • web 页面分页打印的实现 2014-04-28

    网上找的,经我整理添加demo如下 1.首先引入一个WebBrowser在需要打印的页面,可以直接添加: <object id="WebBrowser" classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height="0" width="0"> </object> 到页面,或者使用JavaScript在需要的时候临时添加也可以: 复制代码 代码如下: document.

  • 利用javascript实现web页面中指定区域打印 2013-11-30

    将需要打印的课程表的table放入div标签中,然后指定出需要打印的区域,最后调用window.print打印指定内容 最近做到了web页面课程表打印时,上网找了一些资料,最后使用了下面的方法实现了我需要的功能.将需要打印的课程表的table放入div标签中,然后指定出需要打印的区域,最后调用window.print打印指定内容. 示例代码(代码中有些内容已省略) function preview() { bdhtml = window.document.body.innerHTML; sprn

  • 一种理论上最快的Web数据库分页方法 2014-03-20

    出了一种理论上最佳的分页方法,本篇我们就来详细说说这种最佳的分页方法. 一:构思. 在设计Web数据库时,如果我们要编历每一条纪录,那么只有采取分页模式才可以使Web数据库尽快,尽好的呈现给终端用户,也不会因为8秒原则而使用户失去浏览该页的兴趣.但是即使采取分页的办法,当出现多纪录的数据库时,也难免会使我们的用户感到翻页时速度太慢.就如同我的上篇文章说的那样,几乎上一片文章的三种分页方法都有一些缺陷.那么,我们如何做到能让数据库每次就取我们需要的纪录,这个很好实现,有游标返回多个纪录集就可以实现

  • js控制分页打印.打印分页示例 2014-11-11

    分页打印的实现方法有很多,本文为大家介绍的使用js来完成这个需求,感兴趣的朋友可以参考下 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:

  • js javascript js控制分页打印,打印分页 2014-04-06

    Html代码 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&

  • 如何在Web页面上直接打开.编辑.创建Office文档 2013-10-17

    如何在Web页面上直接打开.编辑.创建Office文档 有朋友询问如何在Web页面上做到像SharePoint中的效果一样,能直接激活客户端的Word来打开.doc文件,而不是类似直接点击.doc文档链接时Word在IE中被打开那样.想想这个问题应该很多人都会感兴趣,所以干脆写一篇blog来大致描述一下方法. 在安装Office2003以后,有一个ActiveX控件被安装到了系统中,这个控件位于"Program Files\Microsoft Office\OFFICE11\owssupp.dl

  • ASP中Web页面间的数据传递方式 2013-10-25

    摘要:基于web的动态网页设计必会涉及到页面间的数据传递,文章探讨了asp设计中常用的web页面间的数据传递方式,分析各种数据传递方式的使用方法.使用场合及优缺点,其都是设计阶段选择数据传递方式考虑的关键. 关键词 数据传递变量浏览器端网页 往往使用动态网页技术制作asp应用程序时一般至少拥有二个或二个以上的web页面,这时就得考虑在多个web页面间传递数据的处理工作.而asp应用程序的各个页面类似于windows应用程序的form窗体,windows应用程序各form间数据传递可以通过定义全局

  • 了解WEB页面工具语言XML(一)产生背景 2013-10-31

    一.XML产生的背景 XML同HTML一样,都来自Standard Generalized Markup Language, 即标准通用标记语言,简称SGML.早在Web未发明之前,SGML就早已存在.正如它的名称所言,SGML是一种用标记来描述文档资料的通用语言,它包含了一系列的文档类型定义(简称DTD),DTD 中定义了标记的含义,因而 SGML 的语法是可以扩展的.SGML十分庞大,既不容易学,又不容易使用,在计算机上实现也十分困难.鉴于这些因素,Web的发明者--欧洲核子物理研究中心的研

  • JavaScript将Web页面内容导出到Word及Excel的方法 2013-12-21

    这篇文章主要介绍了JavaScript将Web页面内容导出到Word及Excel的方法,涉及javascript操作ActiveXObject控件的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了JavaScript将Web页面内容导出到Word及Excel的方法.分享给大家供大家参考.具体实现方法如下: <HTML> <HEAD> <title>WEB页面导出为EXCEL文档的方法 </title> </HEAD> <

  • asp.net的web页面(aspx)数据量过多时提交失败对策 2013-12-25

    asp.net的web页面,数据量过多时提交失败的情况想必有很多朋友都有遇到过吧,下面与大家分享下详细的解决方法 asp.net的web页面,数据量过多是提交失败,对策: web.config文件中,增加 <appSettings> ... <add key="aspnet:MaxHttpCollectionKeys" value="5000" /> ... </appSettings>

  • CSS对Web页面载入效率的影响分析总结 2014-01-18

    我们都熟知JavaScript可能会对Web页面的加载与显示产生较大的影响,因此我们常常关注JavaScript是不是会占用客户端较多的资源,然而大部分都会忽略的一件有趣的事情,CSS也会对Web页面载入的效率产生影响. 我们罗列了十几条相关的知识与注意点,大家可以系统的探讨一下,让我们编写的Web页面打开更加流畅. 请不要告诉我,你看不懂E文,只是你不愿意看!!! 1.How the style system breaks up rules The style system breaks ru

  • 了解WEB页面工具语言XML(二)定义 2014-01-29

    二.XML的定义 XML是一个精简的SGML,它将SGML的丰富功能与HTML的易用性结合到Web的应用中.XML保留了SGML的可扩展功能,这使XML从根本上有别于HTML.XML要比HTML强大得多,它不再是固定的标记,而是允许定义数量不限的标记来描述文档中的资料,允许嵌套的信息结构.HTML只是Web显示数据的通用方法,而XML提供了一个直接处理 Web 数据的通用方法.HTML着重描述Web页面的显示格式,而XML着重描述的是Web页面的内容. XML中包括可扩展格式语言XSL(Exte

  • 编写Python脚本使得web页面上的代码高亮显示 2014-01-31

    这篇文章主要介绍了编写Python脚本使得web页面上的代码高亮显示,主要使用了pygments工具,需要的朋友可以参考下 做了一个在线代码高亮的项目,强大的Python一如既往没让我失望,一个强大的Pygments模块可以对多种(很多)语言进行代码高亮 下面来介绍一下它: 首先安装很简单,使用easy_install来进行安装: easy_install pygments 安装完后我们来使用,Python的简单不会让大家失望: from pygments.lexers import Pytho

  • javascript实现json页面分页实例代码 2014-02-21

    这篇文章主要介绍了javascript实现json页面分页实例代码,需要的朋友可以参考下 下午有个朋友问json 数据怎么分页 就捣鼓了一个东东出来 下面直接代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="htt

  • 基于jquery的web页面日期格式化插件 2014-03-19

    基于jquery的web页面日期格式化插件,需要的朋友可以参考下. (function ($) { var FormatDateTime = function FormatDateTime() { }; $.FormatDateTime = function (obj, IsMi) { var correcttime1 = eval('( new ' + obj.replace(new RegExp("\/", "gm"), "") + ')')

  • Java web velocity分页宏示例 2014-06-23

    这篇文章主要介绍了Java web velocity分页宏示例,需要的朋友可以参考下 #macro(pager $url $pager) <ul class="pagination"> #set($FRONT_LEN = 4) #set($BEHIND_LEN = 5) #set($PAGER_LEN = 10) #set($PAGER_CENTER = $!{pager.pageNum} - $!{BEHIND_LEN}) <li #if($!{pager.curr

  • web server使用php生成web页面的三种方法总结 2014-08-17

    web server使用php生成web页面的三种方法.需要的朋友可以过来参考下,希望对大家有所帮助 查找mysql_pconnect时在mysql帮助文档上发现的,记在这里. web server使用php生成一个web页面的三式有以下三种: 一:把PHP作为CGI Wrapper.这种方式下,每个到达web server的请求都会导致一个php解析器进程被创建,当这个php页面执行结束时,这个php解析器进程终止. 二:在多进程的web server中,把php作为web server的一个

  • Winform实现抓取web页面内容的方法 2014-08-26

    这篇文章主要介绍了Winform实现抓取web页面内容的方法,代码只有短短几行,但是功能很实用,需要的朋友可以参考下 本文以一个非常简单的实例讲述了Winform实现抓取web页面内容的方法,代码简洁易懂,非常实用!分享给大家供大家参考. 具体实现代码如下: WebRequest request = WebRequest.Create("http://1.bjapp.sinaapp.com/play.php?a=" + PageUrl); WebResponse response =

  • asp.net截屏功能实现截取web页面 2014-09-17

    这篇文章主要介绍了asp.net截屏功能实现截取web页面,是非常实用的一个功能,需要的朋友可以参考下 本文实例展示了asp.net截屏功能实现截取web页面的方法,代码简洁易懂,分享给大家供大家参考. 具体实现代码如下: using System.Drawing; //打开该页面 System.Diagnostics.Process.Start("IEXPLORE.EXE", "http://localhost:56/Spacxxe.html"); System.

  • JAVASCRIPT实现的WEB页面跳转以及页面间传值方法 2014-10-21

    在WEB页面中,我们实现页面跳转的方法通常是用LINK,BUTTON LINK ,IMG LINK等等,由用户点击某处,然后直接由浏览器帮我们跳转. 但有时候,需要当某事件触发时,我们先做一些操作,然后再跳转,这时,就要用JAVASCRIPT来实现这一跳转功能. 下面是具体的做法: 一:跳转到新页面,并且是在新窗口中打开时: function gogogo() { //do someghing here... window.open("test2.html"); } window是一个