用html横向、多页的分页打印，打印不出来，怎么办？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用html横向、多页的分页打印，打印不出来，怎么办？相关的知识，希望对你有一定的参考价值。
用html默认的打印功能打印表格，需要进行横向分页打印，但是打印不出来
现在我能分页，但是页面时横向的，多页就打印不出来
其实这个问题应该不关HTML事,而是IE打印功能太弱啦,没有分页,只有自己写控件了.
有分页的，需要使用css 这是有关打印的一些css属性
属性 版本 兼容性 继承性 简介
page CSS2 IE5.5+ 有 检索或指定显示对象容器时使用的页面类型（pagetype）。参阅@page规则
page-break-after CSS2 IE4+ 无 检索或设置对象后出现的页分割符
page-break-before CSS2 IE4+ 无 检索或设置对象前出现的页分割符
page-break-inside CSS2 NONE 有 检索或设置对象容器中出现的页分割符
marks CSS2 NONE 无 设置或检索什么样的标志是应该在页容器外边被给予
orphans CSS2 NONE 有 设置或检索对象内容内一定要留在一页范围底端以内的行的最少数量
size CSS2 NONE 有 检索或指定页面规格的调整
widows CSS2 NONE 有 检索或指定一定要留在页面顶部的行数
---------------------------------------------------------------
分页的时候一般用到page-break-after和page-break-before
page-break-after版本：CSS2 兼容性：IE4+ 继承性：无
语法：
page-break-after : auto | always | avoid | left | right | null
参数：
auto : 假如需要在对象之后插入页分割符
always : 始终在对象之后插入页分割符
avoid : 避免在对象后面插入页分割符
left : 在对象后面插入页分割符直到它到达一个空白的左页边
right : 在对象后面插入页分割符直到它到达一个空白的右页边
null : 空值。IE5用来取消页分割符设置
说明：
检索或设置对象后出现的页分割符。
IE5仅支持always值和空白值（null）。
在IE4中此属性不作用于br对象，但是IE5作用。
对应的脚本特性为pageBreakAfter。请参阅我编写的其他书目。
示例：
p page-break-after: always;
page-break-before版本：CSS2 兼容性：IE4+ 继承性：无
语法：
page-break-before : auto | always | avoid | left | right | null
参数：
auto : 假如需要在对象之前插入页分割符
always : 始终在对象之前插入页分割符
avoid : 避免在对象前面插入页分割符
left : 在对象前面插入页分割符直到它到达一个空白的左页边
right : 在对象前面插入页分割符直到它到达一个空白的右页边
null : 空值。IE5用来取消页分割符设置
说明：
检索或设置对象前出现的页分割符。
IE5仅支持always值和空白值（null）。
在IE4中此属性不作用于br对象，但是IE5作用。
对应的脚本特性为pageBreakBefore。请参阅我编写的其他书目。
示例：
p page-break-after: always;
---------------------------------------------------------------
举一个例子吧：
<HTML>
<HEAD>
<STYLE>
P page-break-after: always
</STYLE>
</HEAD>
<BODY>
<P>这是第一页的内容</P>
<P>这是第二页的内容</P>
剩下是第三页的内容
</BODY>
</HTML>
你在打印预览的时候就能看出效果了。
参考资料：http://faq.csdn.net/read/148159.html
参考技术A 鹅鹅鹅鹅鹅鹅WEB打印功能相关
最近项目要实现WEB打印功能，各种调试。
首先要实现WEB打印，这块用的window下的print方法，下面的代码实现了WEB打印和去页眉页脚的功能，打印分页需要在想要分页的元素上设置style="page-break-after:always"，我这里是在table元素上加的分页，其他元素没测
1 //打印代码 2 function Print() 3 { 4 var printStr = "<html> 5 <head> 6 <meta http-equiv=‘Content-Type‘ content=‘text/html; charset=utf-8‘> 7 <title>title</title> 8 <link rel=‘stylesheet‘ href=‘xxx.css‘ media=‘print‘ /> //打印预览的样式设置，此注释使用时要删掉 9 <style type=‘text/css‘ media=‘print‘> //去页眉页脚的代码，此注释使用时要删掉 10 @page 11 {size: auto;margin: 0mm;} 12 html{background-color: #FFFFFF;margin: 0px;} 13 body{ padding:0; margin: 10mm 15mm 10mm 15mm;} 14 </style> 15 </head> 16 <body>"; 17 var content = ""; 18 var str = document.getElementsByClassName(‘page‘); 19 //var str = document.getElementById(‘page1‘).innerHTML; //获取需要打印的页面元素 ，page1元素设置样式page-break-after:always，意思是从下一行开始分割。 20 for(var i=0;i<str.length;i++){ 21 content = content + str[i].innerHTML; 22 } 23 //str = document.getElementById(‘page2‘).innerHTML; //获取需要打印的页面元素 24 //content = content + str; 25 printStr = printStr+content+"</body></html>"; 26 var pwin=window.open("Print.htm","print"); //如果是本地测试，需要先新建Print.htm，如果是在域中使用，则不需要 27 pwin.document.write(printStr); 28 pwin.document.close(); //这句很重要，没有就无法实现 29 pwin.print(); 30 }
关于隐藏页眉页脚，这块主要是进入打印预览前控制页面的页边距，CSS的@page属性是针对打印页面的样式，原文链接http://stackoverflow.com/questions/1960939/disabling-browser-print-options-headers-footers-margins-from-page，代码如下
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <title>Print Test</title> 4 <style type="text/css"> 5 @page 6 { 7 size: auto; /* auto is the initial value */ 8 margin: 0mm; /* this affects the margin in the printer settings 主要是这里的设置把页眉页尾去掉了（相当于把页面的边距设为0），打印边距默认是10mm里面就包含了页眉页尾的内容，在chrome下左侧更多设置-选项去掉页眉页尾的勾选同样能去掉页眉页尾不过需要多一步手动操作*/ 9 } 10 11 html 12 { 13 background-color: #FFFFFF; 14 margin: 0px; /* this affects the margin on the html before sending to printer */ 15 } 16 17 body 18 { 19 border: solid 1px blue ; 20 margin: 10mm 15mm 10mm 15mm; /* margin you want for the content */ 21 } 22 </style> 23 </head> 24 <body> 25 <div>Top line</div> 26 <div>Line 2</div> 27 </body> 28 </html>
还需要考虑屏幕像素和纸张大小的比率，网上找了一些资料如下
显示时一般使用px,em或pt等逻辑单位,但在打印时要使用物理单位,比如cm或in(英寸)。对于常见的DPI(Dot Per Inch)为96的screen,px与cm的换算关系如下：
1 inch = 2.54 cm
1cm = 96/2.54 ≈ 37.80 px
1px = 2.54/96 ≈ 0.0265 cm
100px = 2.65 cm
A4纸的标准尺寸为:
21.0cm * 29.7 cm
在96DPI分辨率下,其对应的像素尺寸大约为:
794px * 1123px
因为不同的DPI下,其对应的像素尺寸是不同的,所以才要使用print css,使用物理单位来描述要打印的页面,这样打印效果就会一致了。
以为到这里就结束了？并没有。还有打印弹窗拦截的问题，chrome，ff，IE默认会拦截ajax内的打印弹窗，最开始的时候是用建a标签再去调click方法去调打印页面，但实际测试的问题有：
360急速在 兼容模式 、 IE11模式下会出现打印页面只启动一次的问题
360安全在兼容模式下 会出现打印页面只启动一次的问题
Firefox 会出现打印页面只启动一次的问题
在园友找到一个打印拦截的几个解决方案，http://www.cnblogs.com/catalina-/p/5846353.html
最后用如下代码解决的异步弹窗拦截问题，兼容性很好
1 var printtab=window.open(); 2 $.post(url, param, function(data){ 3 var url="xxx" 4 printtab.location= url; 5 });
不过还有一个打印权限的问题。因为要在异步请求后才能判断该用户是否有打印权限，这样就会碰到个问题当用户没权限时会给一个没权限的弹窗提示，但是这里var printtab=window.open();空白页已经建了，只能在success函数里设置一个全局变量来保存用户是否有权限再执行var printtab=window.open();和printtab.location= url; 不过调了半天还是没解决异步success内修改全局变量的问题。。这里谁知道怎么解决麻烦回复下:)
最后还是不行改回同步调用了，不过会出现一个用户体验差的提示
只能忽略了:)
以上是关于用html横向、多页的分页打印，打印不出来，怎么办？的主要内容，如果未能解决你的问题，请参考以下文章
如何在多页 NSPrintOperation 中更改页面方向？