HTML 打印问题汇总

前帮客户做合同和协议打印的时候，收集过一些打印相关的资料，整理了一下内容，分享给有需要的朋友。

如何发起打印
如何只局部打印
分页
不询问直接打印
无边距打印
自定义页码
横向打印
双面打印
打印多份

发起打印的方法

window.print() 打印整个页面，所有主要浏览器都支持 print() 方法，执行后会启动一个打印对话框，Chrome的打印对话框自带预览功能，IE、火狐只弹出打印设置对话框，没有预览功能。
document.execCommand("print") 该方式也兼容各个版本的浏览器，功能同window.print()一样，不过已经不建议使用了。
使用html 标签<object>引入Webbrowser控件，这种方式只兼容IE，部分调用方式如下：

<body>
  <object id="WebBrowser" classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height="0" width="0"></object>
</body>
<script>
  WebBrowser.ExecWB(1,1) // 打开 
  WebBrowser.ExecWB(2,1) // 关闭现在所有的IE窗口，并打开一个新窗口 
  WebBrowser.ExecWB(4,1) // 保存网页
  //--------------- 常用 --------------
  WebBrowser.ExecWB(6,1) // 打印
  WebBrowser.ExecWB(6,6) // 直接打印
  WebBrowser.ExecWB(7,1) // 打印预览
  WebBrowser.ExecWB(8,1) // 打印页面设置
  //------------------------------------- 
  WebBrowser.ExecWB(10,1) // 查看页面属性
  WebBrowser.ExecWB(15,1) // 撤销
  WebBrowser.ExecWB(17,1) // 全选
  WebBrowser.ExecWB(22,1) // 刷新
  WebBrowser.ExecWB(45,1) // 关闭窗体无提示
</script>

直接用JQuery插件

jquery.print.js 地址：https://github.com/DoersGuild/jQuery.print

jquery.print-preview.js 地址：https://github.com/etimbo/jquery-print-preview-plugin

通过$("#id").print(/options/)和$('#id').printArea(/options/)调用，其中的options可以配置一些选项，具体看对应的说明文档。

采用第三方浏览器插件

收费的、不收费的都有，这里就不多提了。

复杂的套打可以选第三方插件。jQuery插件是封装的print方法，我前几年给银行网点做了个小系统需要局部打印，选了插件，其实没有很理想，需要自己做一些调整才行。大部分情况用print就能解决。

局部打印

页面上显示的内容与最终需要打印的内容之间总是存在差异的，从两个方向解决这个问题，一个是打印时只显示需要打印的部分，另一个是打印前调整页面的内容，只保留需要打印的部分。可以用到下面几个方法：

css media query 可以写一些只在打印时有效的样式，例如控制页面某个按钮打印时隐藏

@media print{
    .no-print{
        display:none
    }
}

可以用onbeforeprint和onafterprint在打印前重新编辑内容，专门送去打印，打印后又处理回来。

function window.onbeforeprint()
{ //将一些不需要打印的隐藏 }

function window.onafterprint()
{ //放开隐藏的元素 }

// polyfill
// 对于基于Webkit的浏览器，您可以创建一个等效的结果window.matchMedia('print')。
// var mediaQueryList = window.matchMedia('print');
// mediaQueryList.addListener('change', function(mql) {
//   if(mql.matches) {
//     console.log('webkit equivalent of onbeforeprint');
//   }
// });

onbeforeprint 在设置页面打印之后但是在打印对话框出现之前执行 JavaScript

onafterprint 定义为在设置页面打印且打印对话框已出现之后，执行一段 JavaScript。只有 Internet Explorer 和 Firefox 支持 onafterprint 事件属性。但是：在 IE 中，onafterprint=属性在打印对话框出现之前而不是之后发生。

onbeforeprint fired before dialog appears and allows one to change html and so on.onafterprint is fired just before dialog appears. It is not even possible to know, whether document was actually printed or user canceled it. Needless to say about when printing finished (if started at all).Again: no event is available to track anything happened in print dialog, i.e. answer to your question is no.Moreover, I hope what your need will never be implemented, cause this allows to frustrate user. He/she asks to print one document, but got something different.

改变页面内容的方式体验比较糟糕，个人不推荐，jq插件默认是用iframe，其实还可以window.open一个单独的打印页面，预览和打印都好解决，两种方式都需要注意样式表是在原来的页面，需要稍微注意下样式是否有缺失。

分页

page-break-before:always;
page-break-after:always;
page-break-inside:avoid;

用样式可以控制主动使用分页符，没用过的可以看下这里

http://www.w3school.com.cn/cssref/pr_print_page-break-after.asp

不询问直接打印

有3种办法，但都有限制

使用插件实现

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

<object id="factory" name="factory" style="display: none" classid="clsid:1663ed61-23eb-11d2-b92f-008048fdd814" codebase="ScriptX.cab" viewastext></object>

codebase属性为ScriptX.cab文件的放置路径(绝对路径)
调用：factory.printing.Print(false)即可

webbrowser实现

需要修改IE浏览器安全设置，否则还是会弹出对话框

安全 -> 本地Intranet -> 自定义级别 - 找到ActiveX控件和插件项,选择对未标记为可安全执行的ActiveX控件初始化并执行脚本,再选择启用
安全 -> 受信任的站点 -> 自定义级别 - 找到ActiveX控件和插件项,选择对未标记为可安全执行的ActiveX控件初始化并执行脚本,再选择启用
安全 -> 受信任的站点 -> 站点 -> 添加受信任访问站点(如果是访问远程那么是对方IP地址,如果是本地则是本机IP.例如http://192.168.172.1)

然后执行

document.getElementById('WebBrowser').ExecWB(6,2,3)

vb实现结合webbrowser实现

可以使用vb，但是IE11开始已经被微软废弃，无法执行vb代码了。

execScript('document.getElementById("WebBrowser").ExecWB 6, 2, 3','vbscript');

无边距打印

无边距打印是打印机的一种功能，即全幅打印，打印纸不留空白。
适用于照片打印，广告打印，海报打印等。
目前的主流打印机都有支持该功能的型号。
当在应用程序中创建用于打印的数据时，需要调整数据到打印纸的尺寸。如果应用程序中有边距设置，应确保在打印前将它们设为零。
注意：
使用此功能进行打印将比普通打印要花更长时间。
使用此功能打印输出的顶部和底部区域的打印质量可能会下降，或者在上面未列出的介质上打印时该区域可能会污损。在打印大量的作业之前先打印一页以检查打印质量。

自定义页码

遇到的一个需求，只打印合同中需要填写数据的几页，不能使用自带的页码，所以把自带的页码去掉，然后写个div定位到原来页码的位置，里面的内容就可以自己控制了。需要注意：
1. 页面打印区域的原因，不是在任意打印机上都可以把页码打印在纸张的边缘，需要根据打印机的可打印区域调整。
2. 页码需要使用到绝对定位，所以要求打印的内容是确定的，目前遇到有这个需求的，打印内容也都是固定的。

横向打印

chrome 支持 @page 规则

@page{size : A4 lanscape;}

双面打印

需要在打印首选项中设置。

注意：有时候需要通过加个空白页来让后面的内容从新的一张纸开始打印。

打印份数

打印设置里可以修改，不过很难用程序控制打印份数。可以曲线实现，在打印的时候，直接把内容重复N遍再打印一份出来的就是N份了。

时代变得真快，现在的IE都已经退出了历史舞台。新框架一个接一个冒出来，老系统里的这些老代码，不知道什么时候会消失。

多时候，你想给一个按钮，在网页上通过一个实际的打印机打印出网页的内容。

JavaScript可使用window对象的print函数就可以实现这样的功能。

当执行JavaScript的print函数window.print()将会打印当前页面。可以使用onclick事件如下直接调用此函数：

<head>
<script type="text/javascript">
<!--
//-->
</script>
</head>
<body>
<form>
<input type="button" value="Print" onclick="window.print()" />
</form>
</body>1234567891011复制代码类型：[javascript]

这将产生以下按钮，打印此页。

这符合打印出来的页面，但这个不是一个推荐的方式。打印机友好的页面实际上只是一个文本，没有图像，图形或广告页面。

可以使用以下页式打印机友好方式：

使页面的副本，并离开了不需要的文本和图形，然后从原始链接到该打印机友好的页面。

如果你不想让页面的额外副本，那么可以使用像适当的注释标记打印文本 .....  然后你可以使用PERL或其他脚本在后台清除打印文本和显示进行最后的打印。网站使用同样的方法给打印设备对我们网站的访客。

如何打印页面：

如果没有人在提供上述设备，那么你可以使用浏览器的标准工具栏让网页打印出来。按照链接如下：

File --> Print --> Click OK button.

开课吧广场-人才学习交流平台

印网页资料，被禁用了右键不让复制，这个方法可以简单的帮我们解决。

今天来了一位客户，想打印一些资料，内容是来自某个网站上的一些文字，当我去复制的时候，才发现不让复制，被禁用了鼠标右键，无论你怎么点都没反应，整个页面像是一幅图片，于是搜索各种解除办法，但都是比较繁琐的一些招数，看的头晕眼花，有的还要让你下载插件安装，这些都不能快速解决，不是我想要的方法，弄了好一会，终于找到了有效还简单的方法，现在分享出来，让有需要的人不在走弯路，节省时间，收藏一下以备不时之需要。

首页用浏览器打开不让复制的页面，这里可以用普通浏览器或是某60浏览器，打开页面后，我们要按一下键盘上的F12，这时候就会在当前网页右边跳出一个小页面，点一下上面的小齿轮，一般我们把它称做“设置”

进入小齿轮后，默认是第一个分类，我们要滑动鼠标轮，往下走到最底部，找到调试程序下面的第一个选项，停用JavaScript，给前面的方框打上对沟，这个时候不要关闭这个小页面，要是关闭了就失效了，也就是从头要再来一次。

这个时候你再去复制网页上的内容，看看是不是可以复制了。

说到这里，我还找到了一个更简单的办法，这个方法也给大家分享出来，希望有更多的人知道和学会。

在不让复制的页面，我们直接按下键盘上的ctrl+p，试试效果，是不是非常轻松的就解决了不让复制的问题，这个办法更简单，更快捷，还可以直接打印，也可以把内容复制出来。

寻找方法不容易，喜欢的就收藏一下，您的支持就是我的动力。

在线咨询

上一篇：html元素水平居中
下一篇：（原创）css3旋转、缩放、倾斜

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商