我们在网页开发过程中经常会有打印页面的需求，通过JS来实现的方法有很多，这里我做了一个整理，供大家参考。

方式一：window.print()

整体打印

1打印

现在就轻松实现了页面的打印，但是这种方式会将整个页面打印，如果想要实现指定区域的打印需要通过下面的设置

局部打印

首先，在html中，通过star和end来标记打印区域

1

2

3

4

5

6

7

8

这块内容不需要打印

这里是需要打印的内容

.....

这块内容不需要打印

然后，在点击事件中添加如下代码

1

2

3

4

5

6

7

8

9function 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

3

4

5

6

7

8

预览

打印

这里是需要打印的内容

.....

上面的预览和打印按钮不希望打印，如果要过滤的话可以做下面的样式设置

1

2

3

4

5

6

7

@mediaprint {

.noprint{

display:none;

}

}

or

1

2

3

4

5

.noprint{

display:none;

}

两种写法任选其一

分页打印

使用 window.print() 打印时，如果内容超出会自动分页。但是我们如果需要自定义分页范围，如碰到表格分页打印，可以通过进行如下设置：

1

2

方式二、jqprint()

jqprint是一个基于jQuery编写的页面打印的一个小插件，但是不得不承认这个插件确实很厉害，最近的项目中帮了我的大忙，在Web打印的方面，前端的打印基本是靠window.print()的方式进行打印的，而这个插件在其基础上进行了进一步的封装，可以轻松实现打印网页上的某个区域，这是个亮点。

请注意!很多朋友遇到 Cannot read property 'opera' of undefined 错误问题是juqery版本兼容问题

解决方法：加入迁移辅助插件 jquery-migrate-1.0.0.js可解决版本问题

引入

1

2

js

1

2

3

4

5

function a(){

$("#ddd").jqprint();

}

html

1

2

3

4

5

6

7

8

9

10

11

12

设置模板打印

1

2

3

4

5

6$("#printContainer").jqprint({

debug:false,//如果是true则可以显示iframe查看效果(iframe默认高和宽都很小，可以再源码中调大)，默认是false

importCSS:true,//true表示引进原来的页面的css，默认是true。(如果是true，先会找$("link[media=print]")，若没有会去找$("link")中的css文件)

printContainer:true,//表示如果原来选择的对象必须被纳入打印(注意：设置为false可能会打破你的CSS规则)。

operaSupport:true//表示如果插件也必须支持歌opera浏览器，在这种情况下，它提供了建立一个临时的打印选项卡。默认是true

});

附言

另外还可以使用html 标签引入Webbrowser控件(只兼容IE)或者调用windows底层打印，报安全警告，不建议使用(不支持局部打印)

这里只介绍两种方式，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

如您对本文有所疑义或者有任何需求，请点击访问脚本社区，百万网友为您解惑!

原文链接：/p/40dfd2d6c344?utm_source=tuicool&utm_medium=referral