js打印研究整理

JS实现打印的方式

方式一:window.print()

方式二:使用html 标签引入Webbrowser控件这种方式是其只兼容IE,其他浏览器不可使用,同时IE10以下的浏览器才可以使用,调用方式如下:



   




方式三:采用document.execCommand(”print”)

该方式也兼容各个版本的浏览器,同window.print()一样,其启动的是打印对话框,chrome的打印对话框自带预览功能,但是IE、火狐仅仅只弹出打印设置对话框,没有预览功能。

方式四:采用JQuery插件

使用jQuery浏览插件可以很方便的进行局部打印,常用的插件有:

1)jquery.print.js 下载地址:https://github.com/DoersGuild/jQuery.print

2)jquery.print-preview.js 下载地址:https://github.com/etimbo/jquery-print-preview-plugin

这两种方式使用都很简单,1)通过$("#id").print(/options/);调用;2)通过$('#id').printArea(/options/); 其中的option可选项可以在下载地址下载下来后看示例代码,一般options不用传即可

方式五:采用浏览器打印第三方插件 比如Lodop插件

比如Lodop插件,这个挺好用,套打,局部打印都杠杠的,不过是收费的,免费的含有水印,比较蛋疼。

window.print()方法打印,所有主要浏览器都支持 print() 方法。

想要局部打印,通过jQuery插件就可以实现,现在网上有很多这样的插件,比如jqprint插件等等。也可以通过一个打印前和打印后的事件onbeforeprint、onafterprint。可以在打印前的时候重新编辑一些格式,专门送去打印,打印后又处理回来。

    function window.onbeforeprint()

    { //将一些不需要打印的隐藏 }

    function window.onafterprint()

    { //放开隐藏的元素 }

则可以用数据嵌套在 一个 div 里,获得 div

var printData = document.getElementById("dvData").innerHTML;

获得 div 里的所有 html 数据

window.document.body.innerHTML = printData;  

//把 html 里的数据 复制给 body 的 html 数据 ,相当于重置了 整个页面的 内容

window.print(); // 开始打印

调用window.print()时,可以利用css来控制页面中的东西是否显示

1.    

HTML如下:

1.    
2.    
3.    
5.    
6.  
4.

使用打印分页css,相当于分页符,总是在此div后分页

1.  

ps:关于page-break-after的使用:http://www.w3school.com.cn/cssref/pr_print_page-break-after.asp 需要特别注意的是它应用于:position 值为 relative 或 static 的非浮动块级元素。当时absolute的时候是不起作用的。

2.将界面分为两个div,一个div中用于进行界面展示,另一个div进行打印填充,两个div

一个为界面展示时的样式,另一个为打印时的样式,单击打印时页面div隐藏,对另外一个div进行填充,打印方法执行完成后,页面div显示,另一个div隐藏。

用法:

1,点打印按钮弹出新窗口,把需要打印的内容显示到新窗口中,在新窗口中调用window.print()方法,然后自动关闭新窗口。如果要打印的页面排版和原web页面相差很大,采用此种方法。


1.    
2.    
3.    
4.    
5.    
6.  打印测完  
7.    
8.    
9.    
10.    
13.    
14.    
15.  
aaa
16.
bbb
17.
ccc
18. 20. 46. 47.

2.打印第三放页面不用打开该页面

    
    MDN Example 
   
 
   

Print external page!

3,打开一个弹窗用于打印页面,打印完毕后自动关闭窗口

   
     JavaScript Window Close Example  
   
  
  

To try out the afterprint event, click the link below to open the window to print. You can also try changing the code to use beforeprint to see the difference.

Open Popup Window

4.window.print()直接打印,不弹出设置打印参数的对话框

现在有两种解决方案,

(1).第一种是需要安装插件,网上下载ScriptX.cab文件

下载成功后将文件放在项目某个目录下,然后在页面body中写上:

(记得codebase属性为ScriptX.cab文件的放置路径,是绝对路径)

把window.print()改成:factory.printing.Print(false)即可;

远程访问时需要在IE浏览器设置:

1.安全 -> 受信任的站点 -> 站点 -> 添加受信任访问站点(如果是访问远程那么是对方IP地址,例如http://192.168.172.1)

(2).第二种是无需要安装插件

首先需要在页面body中写上:

把window.print()改成:document.getElementById("WebBrowser").ExecWB(6,2)即可;

最后记住一定需要在IE浏览器设置:

1.安全 -> 本地Intranet -> 自定义级别 - 找到ActiveX控件和插件项,选择对未标记为可安全执行的ActiveX控件初始化并执行脚本,再选择启用

2.安全 -> 受信任的站点 -> 自定义级别 - 找到ActiveX控件和插件项,选择对未标记为可安全执行的ActiveX控件初始化并执行脚本,再选择启用

3.安全 -> 受信任的站点 -> 站点 -> 添加受信任访问站点(如果是访问远程那么是对方IP地址,如果是本地则是本机IP.例如http://192.168.172.1))

http://blog.csdn.net/hdchangchang/article/details/46504417

http://blog.csdn.net/ww130929/article/details/71977187

http://blog.csdn.net/baohuan_love/article/details/49744363

https://bbs.csdn.net/topics/390978377

https://www.cnblogs.com/pijiaxiang/p/4475378.html

你可能感兴趣的:(js打印研究整理)