`
jveqi
  • 浏览: 321747 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

js 打印

 
阅读更多
方法多多,自己收集一下

1、js实现(可实现局部打印)

Html代码 
1.<input id="btnPrint" type="button" value="打印" onclick="javascript:window.print();" /> 
2. 
3.<input id="btnPrint" type="button" value="打印预览" onclick=preview(1) /> 
4.<style type="text/css" media=print> 
5..noprint{display : none }  
6.</style> 
7. 
8. 
9.<p class="noprint">不需要打印的地方</p> 
10. 
11.<script> 
12.function preview(oper)         
13.{  
14.if (oper < 10)  
15.{  
16.bdhtml=window.document.body.innerHTML;//获取当前页的html代码  
17.sprnstr="<!--startprint"+oper+"-->";//设置打印开始区域  
18.eprnstr="<!--endprint"+oper+"-->";//设置打印结束区域  
19.prnhtml=bdhtml.substring(bdhtml.indexOf(sprnstr)+18); //从开始代码向后取html  
20. 
21.prnhtmlprnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));//从结束代码向前取html  
22.window.document.body.innerHTML=prnhtml;  
23.window.print();  
24.window.document.body.innerHTML=bdhtml;  
25.} else {  
26.window.print();  
27.}  
28.}  
29.</script> 
30.<p>XXXXX</p> 
31.<!--startprint1-->要打印的内容<!--endprint1--> 
32. 
33.再加个打印按纽 onclick=preview(1)  
<input id="btnPrint" type="button" value="打印" onclick="javascript:window.print();" />

<input id="btnPrint" type="button" value="打印预览" onclick=preview(1) />
<style type="text/css" media=print>
.noprint{display : none }
</style>


<p class="noprint">不需要打印的地方</p>

<script>
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();
}
}
</script>
<p>XXXXX</p>
<!--startprint1-->要打印的内容<!--endprint1-->

再加个打印按纽 onclick=preview(1)




2、调用windows底层打印,报安全警告,不建议使用(不支持局部打印)

Html代码 
1.<HTML> 
2.<HEAD> 
3.<TITLE>javascript打印-打印页面设置-打印预览代码</TITLE>   
4.<META http-equiv=Content-Type content="text/html; charset=gb2312" />   
5.<SCRIPT language=javascript>    
6.  function printsetup(){    
7.  // 打印页面设置    
8.  wb.execwb(8,1);    
9.  }    
10.  function printpreview(){    
11.  // 打印页面预览    
12.        
13.  wb.execwb(7,1);           
14.        
15.  }    
16. 
17.  function printit()    
18.  {    
19.  if (confirm('确定打印吗?')) {    
20.  wb.execwb(6,6);   
21.  }    
22.  }    
23.  </SCRIPT>   
24.</HEAD>   
25.<BODY>   
26. 
27.<DIV align=center>   
28.<OBJECT id=wb height=0 width=0    
29.classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 name=wb></OBJECT>   
30.<INPUT onclick=javascript:printit() type=button value=打印 name=button_print />    
31.<INPUT onclick=javascript:printsetup(); type=button value=打印页面设置 name=button_setup />    
32.<INPUT onclick=javascript:printpreview(); type=button value=打印预览 name=button_show />    
33.一按开始的减肥了卡时间段  
34.</DIV>   
35.</BODY>   
36.</HTML>  
<HTML>
<HEAD>
<TITLE>javascript打印-打印页面设置-打印预览代码</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312" />
<SCRIPT language=javascript> 
  function printsetup(){ 
  // 打印页面设置 
  wb.execwb(8,1); 
  } 
  function printpreview(){ 
  // 打印页面预览 
     
  wb.execwb(7,1);        
     
  } 

  function printit() 
  { 
  if (confirm('确定打印吗?')) { 
  wb.execwb(6,6);
  } 
  } 
  </SCRIPT>
</HEAD>
<BODY>

<DIV align=center>
<OBJECT id=wb height=0 width=0 
classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 name=wb></OBJECT>
<INPUT onclick=javascript:printit() type=button value=打印 name=button_print /> 
<INPUT onclick=javascript:printsetup(); type=button value=打印页面设置 name=button_setup /> 
<INPUT onclick=javascript:printpreview(); type=button value=打印预览 name=button_show /> 
一按开始的减肥了卡时间段
</DIV>
</BODY>
</HTML>


3、jQuery实现(支持局部打印)



Html代码 
1.<script type="text/javascript" src="jquery-1.4.2.min.js"></script>   
2.<script type="text/javascript" src="jquery.PrintArea.js"></script>   
3.<script> 
4.$(document).ready(function(){  
5.  $("input#biuuu_button").click(function(){  
6. 
7.  $("div#myPrintArea").printArea();  
8. 
9.});  
10.});  
11.   
12.</script> 
13.   
14. 
15. 
16. 
17.<input id="biuuu_button" type="button" value="打印"></input> 
18. 
19.<div id="myPrintArea">.....文本打印部分.....</div>  
分享到:
评论

相关推荐

    原生JS打印插件之jQuery.EasyPrint.js使用文档

    javascript打印大全;通用;js实现打印的方式;JS怎么实现页面打印呢?JavaScript 实现打印,打印预览,打印设置;JS打印和报表输出;原生js打印插件Print.js;js控制分页打印、打印分页示例;js 打印插件;js使用...

    用Javascript打印网页指定标签的内容

    用Javascript打印网页指定标签的内容 用Javascript打印网页指定标签的内容是指在网页上选择指定的标签,然后将其内容导出到另一个页面上,最后进行打印的操作。这种方法可以灵活地控制打印的内容和格式。下面将详细...

    通过调用 JS 打印图片信息

    "通过调用 JS 打印图片信息"这个主题就是针对这一需求展开的。本文将深入探讨如何利用 JavaScript 实现这一功能,特别是在解决谷歌浏览器首次打印时图片不显示及去除IE浏览器页眉页脚的问题。 首先,我们需要理解为...

    javascript,js打印

    在JavaScript(JS)中,打印功能是通过与浏览器的交互来实现的,允许用户将网页内容或者特定元素发送到打印机。这个过程涉及到一系列的技术和方法,包括DOM操作、CSS样式控制以及利用JavaScript库如jQuery来简化操作...

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

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

    JS打印报表控件

    "JS打印报表控件"是专门为JavaScript设计的一种工具,它允许开发者在Web应用中实现报表的打印功能,包括分页打印和打印预览,从而提供更丰富的用户体验。 在Web开发中,打印功能通常是必不可少的,尤其是对于那些...

    js 打印以及预览功能实现

    在JavaScript(js)中实现打印和预览功能是一项常见的需求,尤其在Web开发中。本文将详细介绍如何基于JavaScript实现这一功能,并确保其在IE、Firefox和Google等主流浏览器中的兼容性。 首先,我们需要理解...

    工具-打印:js打印插件

    "工具-打印:js打印插件"的标题暗示了我们将在讨论如何利用JavaScript来创建或集成一个打印插件,以便用户能够方便地打印网页中的特定部分,同时确保该功能在不同的浏览器环境下具有良好的兼容性。 **JS打印插件的...

    js 打印控件

    “lodop47”可能是一个名为LODOP的JavaScript打印服务程序的版本,它是一个跨浏览器的打印解决方案。LODOP通过在客户端提供一个对象,使得开发者可以调用一系列方法来控制打印过程,如设置页面布局、选择打印机、...

    javascript打印如何自定义纸张大小(代码)[借鉴].pdf

    JavaScript 打印自定义纸张大小 本文档讨论了使用 JavaScript 实现自定义纸张大小的打印方法,并解决了页脚、页眉、横向和纵向的问题。同时,本文还介绍了使用 IE 的 WebBrowser控件来实现打印预览和设置打印纸张...

    js 打印插件

    JavaScript打印插件是一种用于网页打印和预览的技术,它基于JavaScript语言,允许用户在不离开当前页面的情况下进行打印操作。这种技术广泛应用于各种浏览器环境中,包括IE、Firefox和Chrome等主流浏览器,为用户...

    js打印WEB页面与打印预览

    JS打印WEB页面与打印预览是指在WEB页面中使用JavaScript语言来实现页面的打印和预览功能。以下是实现这个功能的三种方法: 第一种方法:使用CSS隐藏不打印内容 在这个方法中,我们可以使用CSS来隐藏不需要打印的...

    js打印实现各个浏览器预览插件

    总结来说,实现跨浏览器的JS打印预览功能,需要考虑不同浏览器的特性,如IE的ActiveXObject,以及利用jQuery插件来提供统一的用户体验。`jquery-print-preview-plugin`这类插件简化了这一过程,提供了丰富的定制选项...

    js打印excel文档,打印table

    总结来说,使用JavaScript打印HTML中的table并将其导出为Excel文档,需要结合jQuery、printArea插件以及可能的FileSaver.js库。通过DOM操作获取表格数据,转换成CSV格式,再创建并保存为Excel文件。这种方法在前端...

    js打印设置页边距

    在JavaScript中实现对打印页面的定制化设置,如页边距、页眉和页脚的配置,是一项进阶技能,尤其对于需要精确控制打印输出的Web应用而言至关重要。本文将深入探讨如何使用JavaScript来调整打印时的页边距,设置或...

    JS打印页面代码JS打印页面代码

    JS打印页面代码JS打印页面代码JS打印页面代码JS打印页面代码JS打印页面代码JS打印页面代码JS打印页面代码

    JS打印的几种实现方法

    JavaScript打印功能需要注意不同浏览器之间的差异,确保在所有主流浏览器(如Chrome、Firefox、Safari、IE/Edge)下都能正常工作。 9. **性能优化**: 在大量数据或者复杂页面结构的情况下,优化打印性能,比如...

    js打印文件,一个WEB打印的JS脚本

    一个WEB打印的JS脚本,支持WEB程序开发,可实现WEB页面直接打印。

    Lodpo6.0js打印组件

    Lodop6.0js打印组件是一款高效且功能丰富的JavaScript打印解决方案,专为网页开发者设计,以满足在浏览器环境中进行多样化的打印需求。这个组件能够帮助开发者轻松地实现在网页上进行打印预览、局部打印以及自定义...

    好用的JS打印指定区域

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

Global site tag (gtag.js) - Google Analytics