html页面部分打印,js网页打印,js打印,javascript局部打印,网页局部打印方法

在网页中经常看到有打印功能，点击之后，只针对特定区域进行的打印。网上看了一下，大体上有2中实现方法，一种是用css @media控制，另一种是直接用js控制。下面分别来对其进行说明一下！

一、css控制网页局部打印

关于css控制打印，我之前的一篇文章写过css @media，不知道大家有没有印象了~~主要是介绍Media Query方法，地址：http://www.haorooms.com/post/css3media

也引进了css2的media

media可以是all,也可以是print ,加入是print，那么这个css只有在打印的时候才加载。那么这样就好办了，我们可以写针对css打印的样式，有些地方在打印的时候不显示，那么直接用display：none来设置不就可以了嘛！

除了上面的这种写法之外，还可以这么写

@media print {

.noprint { display: none; }

}

当你打印的时候noprint 类下面的所有内容不显示，不打印的时候显示。

举例：

width="0">

这些内容在打印之前是显示的，当你点击打印的时候，会用上面的样式，不显示。达到了局部打印的效果！

二、js局部打印

直接上案例

haorooms js局部打印案例

function doPrint() {

bdhtml=window.document.body.innerHTML;

sprnstr="";

eprnstr="";

prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17);

prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));

window.document.body.innerHTML=prnhtml;

window.print();

}

1不需要打印的地方

2这里不要打印啊

打印标题

打印内容~~

打印

1haorooms博客不打印的地方啊哈哈哈哈

2

可以把上面的代码黏贴到网页中，试一试，只有做了标记的地方打印了，代码很简单，相信你也看得懂。

延伸

通过上面的案例，我们可以看到，只要我们把要打印的东西放到document.body.innerHTML中就可以了

无论是一行内容，还是图片，还是文字，只要我们把拿到的html代码，赋值给document.body.innerHTML，然后在运用window.print(); 就可以对赋值的代码进行打印了！

问题

上面的方法打印完毕之后，body的内容变掉了，不是我们想要的结果，我们可以使用一个jquery插件来实现：这个插件名字是jquery.printarea.js

使用方法：

function doPrint() {

$("#dayin").printArea();

}

haorooms打印标题

haorooms打印的文字

关于网页打印，今天就说这么些，希望大家留言相互交流啊！