`
joerong666
  • 浏览: 418364 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

JS实现局部打印和预览

阅读更多

JS实现局部打印和预览:

第一种:

JS 实现简单的页面局部打印 
function preview(oper)
...
...{
if (oper < 10)......{
bdhtml
=window.document.body.innerHTML;//获取当前页的html代码
sprnstr="<!--startprint"+oper+"-->";//设置打印开始区域
eprnstr="<!--endprint"+oper+"-->";//设置打印结束区域
prnhtml=bdhtml.substring(bdhtml.indexOf(sprnstr)+18); //从开始代码向后取html

prnhtml
=prnhtml.substring(0,prnhtml.indexOf(eprnstr));//从结束代码向前取html
window.document.body.innerHTML=prnhtml;
window.print();
window.document.body.innerHTML
=bdhtml;


}
 else ......{
window.print();
}


}


使用很简单 将页面内要打印的内容加入中间
<!--startprint1-->XXXXX<!--endprint1-->
再加个打印按纽 onclick
=preview(1

第二中:组件法

 

WebBrowser是IE内置的浏览器控件,无需用户下载.

一、WebBrowser控件 
  
<object ID='WebBrowser' WIDTH=0 HEIGHT=0 CLASSID='CLSID:8856F961-340A-11D0-A96B-00C04FD705A2'></object> 
二、WebBrowder控件的方法 
//打印 

WebBrowser1.ExecWB(
6,1); 

//打印设置 

WebBrowser1.ExecWB(
8,1); 

//打印预览 

WebBrowser1.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) 关闭窗体无提示 
但是打印是会把整个页面都打印出来的,页面里面有什么东西就打印出来,我们有时候只需要打印数据表格,这时我们就要写一个样式了:把不想打印的部份隐藏起来:
样式内容:
<style type="text/css" media=print>
.noprint...
...{display : none }
</style>
然后使用样式就可以:
<p class="noprint">不需要打印的地方</p>

代码如下:

<script language="javascript"> 
function printsetup()......
// 打印页面设置 
wb.execwb(8,1); 
}
 
function printpreview()......
// 打印页面预览 

wb.execwb(
7,1); 

}
 

function printit() 
...
...
if (confirm('确定打印吗?')) ......
wb.execwb(
6,6
}
 
}
 
</script> 

<OBJECT classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2" height=0 id=wb name=wb width=0></OBJECT> 
<input type=button name=button_print value="打印" class="noprint" onclick="javascript:printit()"> 
<input type=button name=button_setup value="打印页面设置" class="noprint" onclick="javascript:printsetup();"> 
<input type=button name=button_show value="打印预览" class="noprint" onclick="javascript:printpreview();"> 

分享到:
评论

相关推荐

    JS实现浏览器打印、打印预览示例

    JS实现浏览器打印和打印预览的知识点主要包括以下方面: 1. window.print()方法:这是一个JavaScript内置方法,可以触发浏览器的打印对话框。使用此方法时,打印的是当前window.document.body.innerHTML中的内容。...

    页面实现预览和打印(页面整体打印和局部打印)

    本主题将详细探讨如何在HTML和JSP页面中实现这两种功能,包括整体页面的预览和打印以及局部元素(如表格和文档)的处理。 首先,我们需要理解基本的打印原理。在浏览器中,打印功能通常依赖于CSS样式控制,尤其是...

    chrome浏览器实现打印预览打印功能.zip

    要实现打印预览和局部打印,我们可以利用jQuery库中的插件,如`jquery.PrintArea.js`。该插件允许开发者选择页面上的特定区域进行打印,而不是整个页面。只需在需要打印的元素上添加特定的CSS类或者ID,然后调用`$(...

    js iframe 打印 打印预览 页眉页脚的设置

    在打印预览和打印过程中,我们可以利用iframe来加载需要打印的页面,并对其进行控制。 1. 创建iframe: 在JavaScript中,可以通过`document.createElement('iframe')`创建一个iframe元素。然后,为其设置`src`属性...

    js实现局部页面打印预览原理及示例代码

    JavaScript 实现局部页面...总的来说,JavaScript 实现局部页面打印预览是通过查找和提取页面中的特定区域,然后在打印之前临时改变页面内容来实现的。这种方法既简单又实用,广泛应用于需要精确控制打印内容的场景。

    LodopFuncs.js打印、前端开发直连打印机打印、js调用驱动 不经过传统预览页面后才可打印问题

    前端LodopFuncs.js打印,js打印,web打印,jq打印,html打印,不需要经过预览页面 直接调起默认打印机进行局部打印。该打印js可局部打印也可全局打印而且该驱动...局部打印功能和jQuery.print.min.js使用方法一样简单。

    jquery打印插件制作页面局部打印预览插件

    总结来说,"jquery打印插件制作页面局部打印预览插件"涵盖了jQuery选择器、DOM操作、窗口操作、事件处理以及媒体查询等多个JavaScript和Web开发的关键知识点。通过这样的插件,开发者可以为用户提供更加便捷和定制化...

    js或jquery实现页面打印可局部打印

    本文将详细介绍如何使用JavaScript(以及jQuery库)来实现这样的局部打印功能。 首先,我们来看一下**纯JavaScript**实现的局部打印方法。在示例代码中,通过`&lt;input&gt;`按钮触发打印操作。点击“打印”按钮会调用`...

    二维码生成实例+局部打印

    为了实现局部打印,开发者可能需要创建一个模拟打印视图,只显示需要打印的部分,并确保二维码的尺寸、位置和清晰度在打印预览中与预期相符。此外,还需要考虑到不同浏览器和打印机的兼容性问题,以确保在各种环境下...

    jQuery网页局部打印代码.zip

    在这个特定的场景下,"jq_printarea"可能是一个实现了局部打印功能的JavaScript插件。这个插件的工作原理可能是:首先,它允许开发者通过CSS选择器来指定需要打印的元素。例如,如果希望打印id为"content"的div,...

    可局部打印的网页打印插件jQuery.PrintArea

    总结来说,`jQuery.PrintArea`是一款实用的网页打印插件,它基于`jQuery`库,提供局部打印功能,适用于那些需要对网页内容进行精确控制打印的场合。通过简单的API调用,开发者可以轻松地集成到自己的项目中,提高...

    js控制web打印(局部打印)方法整理

    接着,使用 JavaScript 操作控件的方法,如打印、打印预览和打印设置: ```javascript // 打印 WebBrowser1.ExecWB(6, 1); // 打印设置 WebBrowser1.ExecWB(8, 1); // 打印预览 WebBrowser1.ExecWB(7, 1); ...

    批量打印之jquery局部打印

    本话题主要探讨的是如何利用jQuery库实现局部打印的功能。jQuery是一个强大的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作和Ajax交互。在本文中,我们将详细解析“批量打印之jQuery局部打印”这一主题,...

    局部打印的方法

    总结起来,局部打印借助于LODOP这一工具,可以在Web环境中方便地实现对文档特定部分的打印,同时允许自定义打印机、页数和份数等设置。这对于处理大量数据的业务场景尤其有用,能帮助用户有效地管理和打印文档,提升...

    jquery网页打印控件制作页面局部打印文本效果

    4. **设置样式**:为了确保在打印预览和实际打印时,样式正确显示,需要为iframe内的元素添加打印样式。这些样式通常会覆盖页面上的默认样式,只保留对打印有效的部分。例如: ```css @media print { #printFrame...

    javascript 局部页面打印实现代码

    总结来说,本文介绍了一种使用JavaScript实现Web页面局部打印的方法。这种方法不依赖于特定的浏览器插件,兼容性好,可以很好地适应不同浏览器环境。在打印前,确保提前定义好打印内容的标签和样式,使得打印出来的...

    JS实现页面打印(整体、局部)

    在网页开发中,JS提供了多种方法来实现页面的打印功能,包括整体打印和局部打印。以下是对这些方法的详细说明: ### 整体打印 整体打印最简单的方式是使用JavaScript的`window.print()`函数。当你点击一个链接或者...

Global site tag (gtag.js) - Google Analytics