脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → window.print打印指定区域

window.print打印指定div指定网页指定区域的方法

 更新时间：2014年08月04日 17:09:18   投稿：whsnow  
这篇文章主要介绍了window.print打印指定div指定网页指定区域的方法,需要的朋友可以参考下

第一种方法：指定不打印区域
使用CSS，定义一个.noprint的class，将不打印的内容放入这个class内。
细如下：

<style media=print type="text/css"> 
.noprint{visibility:hidden} 
</style>

要打印的内容。哈哈！

<p class="noprint">将不打印的代码放在这里。</p> 
<a href="javascript:window.print()" rel="external nofollow" target="_self">打印</a>

第二种方法：指定打印区域
把要打印的内容放入一个 span或div，然后通过一个函数打印。

<span id='div1'>把要打印的内容放这里</span> 
<p>所有内容</p> 
<div id="div2">div2的内容</div> 
<a href="javascript:printme()" rel="external nofollow" target="_self">打印</a> 
<script language="javascript"> 
function printme() 
{ document.body.innerHTML=document.getElementByIdx_x_x('div1').innerHTML+'<br/>'+document.getElementByIdx_x_x('div2').innerHTML; 
window.print(); 
} 
</script>

如果要打印的只是整个页面中的一小部分，就最好采用第二种方法。

第三种方法：如果要打印的页面排版和原web页面相差很大，采用此种方法。点打印按钮弹出新窗口，把需要打印的内容显示到新窗口中，在新窗口中调用window.print()方法，然后自动关闭新窗口。
window.print可以打印网页，但有时候我们只希望打印特定控件或内容，怎么办呢？

首先我们可以把要打印的内容放在div中，然后用下面的代码进行打印。

<html> 
<head> 
<script language="javascript"> 
function printdiv(printpage) 
{ 
var headstr = "<html><head><title></title></head><body>"; 
var footstr = "</body>"; 
var newstr = document.all.item(printpage).innerHTML; 
var oldstr = document.body.innerHTML; 
document.body.innerHTML = headstr+newstr+footstr; 
window.print(); 
document.body.innerHTML = oldstr; 
return false; 
} 
</script> 
<title>div print</title> 
</head> 

<body> 
//HTML Page 
//Other content you wouldn't like to print 
<input name="b_print" type="button" class="ipt" onClick="printdiv('div_print');" value=" Print "> 

<div id="div_print"> 

<h1 style="Color:Red">The Div content which you want to print</h1> 

</div> 
//Other content you wouldn't like to print 
//Other content you wouldn't like to print 
</body>
</html>
您可能感兴趣的文章:

相关文章

  • 微信开发 js实现tabs选项卡效果

    微信开发 js实现tabs选项卡效果

    这篇文章主要介绍了微信开发的学习笔记，js实现tabs选项卡效果,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-10-10
  • window.opener用法和用途实例介绍

    window.opener用法和用途实例介绍

    window.opener，是通过window.open打开子窗体的父窗体的引用，下面为大家详细介绍下其具体的使用方法，感兴趣的朋友可以参考下
    2013-08-08
  • 如何将一个String和多个String值进行比较思路分析

    如何将一个String和多个String值进行比较思路分析

    开发中我们经常需要将一个String和多个String值进行比较。直觉反应是使用||符号连接多个===完成，感兴趣的朋友可以了解下哈
    2013-04-04
  • JS返回iframe中frameBorder属性值的方法

    JS返回iframe中frameBorder属性值的方法

    这篇文章主要介绍了JS返回iframe中frameBorder属性值的方法,分析了frameBorder属性的功能及javascript获取frameBorder属性值的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-04-04
  • 史上最全JavaScript常用的简写技巧（推荐）

    史上最全JavaScript常用的简写技巧（推荐）

    这篇文章主要介绍了JavaScript常用的简写技巧,列举了20条js中常用的简写技巧，具体操作步骤大家可查看下文的详细讲解，感兴趣的小伙伴们可以参考一下
    2017-08-08
  • 详解Bootstrap插件

    详解Bootstrap插件

    这篇文章主要为大家针对Bootstrap插件的相关资料进行了详细介绍，Bootstrap 自带 12 种 jQuery 插件，扩展了功能，可以给站点添加更多的互动，感兴趣的小伙伴们可以参考一下
    2016-04-04
  • 详解webpack和webpack-simple中如何引入css文件

    详解webpack和webpack-simple中如何引入css文件

    这篇文章主要介绍了详解webpack和webpack-simple中如何引入css文件，非常具有实用价值，需要的朋友可以参考下
    2017-06-06
  • D3.js封装文本实现自动换行和旋转平移等功能

    D3.js封装文本实现自动换行和旋转平移等功能

    之前小编和大家分享了SVG中如何配合使用text和tspan来实现换行的功能，所以这篇文章对此功能进行一下封装，以后就可以直接用了。有需要的朋友们可以参考借鉴，下面来一起看看吧。
    2016-10-10
  • javascript编写贪吃蛇游戏

    javascript编写贪吃蛇游戏

    这篇文章主要介绍了javascript编写贪吃蛇游戏的代码，非常简单，也很好玩，有需要的童鞋们可以参考下。
    2015-07-07
  • JavaScript实现水平进度条拖拽效果

    JavaScript实现水平进度条拖拽效果

    这篇文章主要为大家详细介绍了JavaScript实现水平进度条拖拽效果的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-01-01

最新评论