`

JS打印指定区域内容

 
阅读更多

来源:http://www.cnblogs.com/dudumao/archive/2012/10/04/2711571.html

 

很多时候,我们在做系统的时候要做打印功能,打印在js中其实很简单,不过这个很简单的代码并不能满足我们的特定需求,比如我们需要打印的表单在很多文字的中间,或者文字中包含一些广告或者图片什么的,这就很难用:window.print();这时,我们就要分区域的打印,将需要打印的内容提取出来让打印机知道,而不是一股脑的全部打印!

下面是两种实现的方法:

  第一种:区域划分法。将要打印的部分用特殊的字符标记起来进行打印。这样下来还是有页眉和页脚,可以写去页眉页脚的方法放进去。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='wb' WIDTH=0 HEIGHT=0 CLASSID='CLSID:8856F961-340A-11D0-A96B-00C04FD705A2'></object> //放进<body>中
  WebBrowder控件的方法 :

 

//打印
wb.ExecWB(6,1);
//打印设置
wb.ExecWB(8,1);
//打印预览
wb.ExecWB(7,1);

 关于这个组件还有其他的用法,列举如下: 

 

  wb.ExecWB(1,1) 打开
  wb.ExecWB(2,1) 关闭现在所有的IE窗口,并打开一个新窗口
  wb.ExecWB(4,1) 保存网页
  wb.ExecWB(6,1) 打印
  wb.ExecWB(7,1) 打印预览
  wb.ExecWB(8,1) 打印页面设置
  wb.ExecWB(10,1) 查看页面属性
  wb.ExecWB(15,1) 好像是撤销,有待确认
  wb.ExecWB(17,1) 全选
  wb.ExecWB(22,1) 刷新
  wb.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代码,代码如下:

<script>
var HKEY_Root,HKEY_Path,HKEY_Key;
HKEY_Root="HKEY_CURRENT_USER";
HKEY_Path="\\Software\\Microsoft\\Internet Explorer\\PageSetup\\";
//设置网页打印的页眉页脚为空
function PageSetup_Null()
{
try
{
var Wsh=new ActiveXObject("WScript.Shell");
HKEY_Key="header";
Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"");
HKEY_Key="footer";
Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"");
}
catch(e)
{

}
}
//设置网页打印的页眉页脚为默认值
function PageSetup_Default()
{
try
{
var Wsh=new ActiveXObject("WScript.Shell");
HKEY_Key="header";
Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"&w&b页码,&p/&P");
HKEY_Key="footer";
Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"&u&b&d");
}
catch(e)
{}
}

</script>

 

注意有可能执行时,会出现没有效果的错误,这时原因是可能你的浏览器限制了active对象的创建,只要取消限制就好了,取消方法如下:打开你的ie浏览器internet选项—— 安全—— 自定义级别—— 把对没有标记为安全的activex控件进行初始化和脚本运行设置为启用,这样在加打印按钮的时候,只要加个事件触发就好了。

 

分享到:
评论

相关推荐

    好用的JS打印指定区域

    "好用的JS打印指定区域"这个主题聚焦于如何利用jQuery库来高效地实现网页特定部分的打印功能。jQuery,作为一个广泛使用的JavaScript库,提供了简洁的API,使得开发者可以更加便捷地操作DOM元素,包括对页面区域的...

    JS打印指定区域,方便使用

    本项目提供了一个JS实现的解决方案,使得用户能够方便地打印指定的页面区域,而不是整个网页。这个功能在很多场景下都非常实用,例如用户可能只想打印一份报告的某个部分,而不是整页内容。 首先,我们需要理解...

    js打印指定区域打印预览打印设置,简单方便

    test.html 每个按钮调用一个函数,实现打印指定区域,可预览,可设置

    非常好用的Html指定区域打印js代码.rar

    在网页开发中,有时我们需要实现特定功能,让用户能够打印页面上的某一特定区域,而不是整个页面。这个场景就涉及到了HTML的指定区域打印技术。本文将详细介绍如何使用JS来实现这一功能,结合提供的压缩包文件"非常...

    JQuery打印指定区域

    提到的`jquery.PrintArea.js`文件是一个JQuery插件,用于实现打印特定区域的功能。在引入JQuery之后,我们也需要引入这个插件: ```html &lt;script src="jquery.PrintArea.js"&gt; ``` 3. **配置打印区域** 在HTML...

    打印指定区域 JavaScript jsp html

    本文将详细介绍几种常见的打印指定区域的方法,包括使用CSS隐藏不需打印的内容、通过JavaScript动态调整页面结构进行打印等。 #### 一、使用CSS隐藏不需打印的内容 这种方法的基本思想是利用CSS中的`@media print`...

    js自定义区域打印

    JavaScript(简称JS)是一种轻量级的脚本语言,广泛应用于网页和网络应用开发,包括交互式用户界面、数据验证以及我们今天要讨论的主题——自定义区域打印。自定义区域打印允许用户仅打印网页中特定的部分,而不是...

    js调用iframe实现打印页面内容的方法

    JavaScript(简称JS)提供了多种方式来实现网页内容的打印,包括打印整个页面或页面上的特定区域。本知识点主要介绍如何使用JS调用iframe元素来实现页面内容的打印功能。 ### 知识点一:使用iframe实现区域打印 ...

    js print打印网页指定区域内容的简单实例

    &lt;title&gt;js print打印网页指定区域内容的简单实例 function myPrint(obj) { var newWindow = window.open("打印窗口", "_blank"); var docStr = obj.innerHTML; newWindow.document.write(docStr); newWindow...

    js实现网页特定部分截屏或打印.zip

    为了打印特定区域,我们需要创建一个新的`iframe`,将要打印的内容注入到`iframe`中,然后调用`window.print()`。 4. **事件监听**:为了让用户能够选择截屏或打印的区域,我们通常需要添加鼠标拖动事件监听器。...

    js指定打印页面部分内容代码

    ()"&gt;打印指定内容 ``` 5. **HTML结构和CSS布局**: 为了有效地选择和打印网页部分,需要合理地组织HTML结构,确保需要打印的内容在独立的区块中。同时,使用适当的CSS布局(如Flexbox或Grid)可以使内容更容易定位...

    js打印WEB页面与打印预览

    JS打印WEB页面与打印...我们可以使用不同的方法来实现这个功能,例如使用CSS隐藏不打印内容、指定打印区域、使用新窗口打印等。同时,我们也可以使用JavaScript来控制打印设置,例如选择打印机、纸张大小、页边距等。

    Js打印功能,支持局部打印

    "Js打印功能,支持局部打印"这一主题,主要涉及的是JavaScript在网页中实现打印的功能,特别是如何实现对特定区域(局部)的打印。 JavaScript是一种广泛用于网页开发的脚本语言,它可以直接在用户的浏览器上运行,...

    JavaScript打印网页指定区域的例子

    本文详细介绍了使用JavaScript打印网页指定区域的技术原理和实现方法。在网页设计和内容展示中,经常会遇到需要打印特定内容的需求,例如打印一张发票、一个表格或某个页面上的特定部分。传统的网页打印方法通常会...

    PrintMe:一个简单的js文件打印库——打印特定区域,同时隐藏其他打印区域

    PrintMe 是一个专门为 JavaScript 设计的轻量级打印库,其主要功能是允许用户打印页面中的特定区域,同时可以隐藏不希望在打印时显示的其他内容。这个库尤其适合那些需要对打印内容进行精确控制的网页应用。在本文中...

    工具-打印:js打印插件

    总的来说,"工具-打印:js打印插件"的主题涉及到JavaScript在网页打印中的应用,包括打印特定区域、兼容性处理、样式控制和用户体验优化等多个方面。开发者需要具备扎实的JavaScript和CSS基础,以及对浏览器特性的...

    jquery打印区域

    - `mode`:可以设置为`"area"`(打印指定区域)或`"document"`(打印整个文档)。 - `target`:设置要打印的元素,可以是ID、类名或元素选择器。 - `exclude`:排除不打印的元素。 例如,如果想使用弹出窗口...

    js 打印插件

    6. **RitsC-PrintArea-2.4.0-0-g2cc7234**:这可能是另一个JavaScript打印解决方案的版本号,它可能提供了一个选择打印区域的功能,允许用户仅打印网页的特定部分,而不是整个页面。 7. **javascript实现页面打印...

    实现打印页面带有指定的水印内容

    通过前台代码用于打印页面带有指定的水印内容,用于防伪和表明出处。所给代码是简易版的HTML页面,包含2部分,主体内容和附加水印

Global site tag (gtag.js) - Google Analytics