JS实现页面打印

JS实现浏览器打印、打印预览⽰例

⽬前正在做浏览器端采⽤JS⽅式实现打印这么⼀个功能，JS打印实现的⽅法很多，但是兼容各个浏览器实现打印预览的功能有些棘⼿，现将实

现的内容及遇到的问题记录下来，希望有⼤⽜看到所提的问题后可以给予解答，在此感谢啦。

1.JS实现打印的⽅式

⽅式⼀：window.print()

window.print();会弹出打印对话框，打印的是window.document.body.innerHTML中的内容，下⾯是从⽹上摘到的⼀个局部打印的例⼦，该例⼦

的不⾜是打印会修改页⾯的内容。

局部打印案例

1不需要打印的地⽅

2这⾥不要打印啊

打印内容~~

打印

不打印的地⽅啊哈哈哈哈

2

⽅式⼆：使⽤html 标签引⼊Webbrowser控件

这种⽅式是其只兼容IE，其他浏览器不可使⽤，同时IE10以下的浏览器才可以使⽤，调⽤⽅式如下：

这种⽅式优势是在IE下可以弹出打印预览，这是打印很⼈性化的功能，但是遗憾的是⾼版本的IE浏览器不⽀持WebBrowser了

⽅式三：采⽤document.execCommand(”print”)

该⽅式也兼容各个版本的浏览器，同window.print()⼀样，其启动的是打印对话框，chrome的打印对话框⾃带预览功能，但是IE、⽕狐仅仅只弹

出打印设置对话框，没有预览功能。

⽅式四：采⽤JQuery插件

使⽤jQuery浏览插件可以很⽅便的进⾏局部打印，常⽤的插件有：

这两种⽅式使⽤都很简单，1）通过$("#id").print(/*options*/);调⽤；2）通过$('#id').printArea(/*options*/); 其中的option可选项可以在下载地址下

载下来后看⽰例代码，⼀般options不⽤传即可，⽰例代码如下：

JQuery打印

function printit(){

$("#ganburenmianbaio").print({iframe:true,prepend:''});

JS实现页面打印

方法多多，自己收集一下

1、js实现（可实现局部打印）

[html] view plain copy

1.

2.

3.

4.

7.

8.

9.

不需要打印的地方

10.

11.

30.

XXXXX

31. 要打印的内容

32.

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

2、调用windows底层打印，报安全警告，不建议使用（不支持局部打印）

[html] view plain copy

1.

2.

3. javascript打印-打印页面设置-打印预览代码

4.

5.

24.

25.

26.

27.

28.

29. classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 name=wb>

30.

31.

32.

33. 一按开始的减肥了卡时间段

34.

36.

3、jQuery实现（支持局部打印）

[html] view plain copy

1.

2.

3.

13.

14.

15.

16.

17.

18.

19.

JavaScript实现打印,打印预览,打印设置

WebBrowser是IE内置的浏览器控件，⽆需⽤户下载.

⼀、WebBrowser控件

⼆、WebBrowder控件的⽅法 //打印WebBrowser1.ExecWB(6,1);

//打印设置

WebBrowser1.ExecWB(8,1);

//打印预览

WebBrowser1.ExecWB(7,1);

关于这个组件还有其他的⽤法，列举如下：WebBrowser.ExecWB(1,1) 打开 Web.ExecWB(2,1) 关闭现在所有的IE窗⼝，并打开⼀个新窗⼝ Web.ExecWB(4,1)

保存⽹页 Web.ExecWB(6,1) 打印 Web.ExecWB(7,1) 打印预览 Web.ExecWB(8,1)

打印页⾯设置 Web.ExecWB(10,1)

查看页⾯属性 Web.ExecWB(15,1)

好像是撤销，有待确认 Web.ExecWB(17,1)

全选 Web.ExecWB(22,1) 刷新 Web.ExecWB(45,1)

关闭窗体⽆提⽰ 但是打印是会把整个页⾯都打印出来的,页⾯⾥⾯有什么东西就打印出来,我们有时候只需要打印数据表格,这时我们就要写⼀个样式了:

把不想打印的部份隐藏起来： 样式内容：

然后使⽤样式就可以：

不需要打印的地⽅

代码如下:

复制代码 代码如下:

JS网页打印设置技巧

最近写一些东西需要提供网页打印功能，所以归纳总结了一下，本节主要讲述使用IE6支持打印功能，不同浏览器安全设置与支持有差异，如果不支持，请使用您的浏览器自带打印功能(或手动设置启用ActiveX控件)。书写有不足或描述不清的地方请大家指正。^-^

利用CSS样式打印是经常使用的一种打印方法，利用它可以非常方便的实现打印页面中的指定内容和分页打印，下面将通过具体实例介绍如何利用CSS样式打印。

［分析］：

1.打印样式区分：打印网页带页面样式，需指明一个media='print'的样式，建议分开，如下创建军一个bankprint.css打印样式文件。

href="/public/default/css/bank.css" />

href="/public/default/css/bankprint.css" />

例：

说明：

media类型是CSS属性媒体类型，用于直接引入媒体的属性。其语法格式如下：

@media screen | print | projection | braille | aural | tv |

handheld | all

参数说明

screen：指计算机屏幕。

print：指用于打印机的不透明介质。

projection：指用于显示的项目。

braille：盲文系统，指有触觉效果的印刷品。

aural：指语音电子合成器。

tv：电视类型的媒体。

handheld：指手持式显示设备。

all：用于所有媒体。

2.WebBrowser控件

同其他控件一样，首先我们需要在页面中嵌入WebBrowser控件，不过由于该控件是IE浏览器自带的，支持浏览器默认安全设置，因此避免了安全性设置的麻烦。对于IE7及以上安全性要求更高的浏览器，您或许还是需要自定义IE的安全性级别。

下面就是该控件涉及打印的功能调用，用户可以在JavaScrip中调用：

wb.execwb(6,1); //打印，打印当前页面