E
Published on
· Last modified on
· Public

使用JavaScript打印页面的技巧和要点

这两天做一个表格页面打印输出的功能,发现如果不经过任何处理而直接打印的话会出现很不理想的效果,例如默认打印当前页面<body>内部的静态HTML内容,并且不能显示media声明为screen的CSS样式。

可以简单采用几个要点来使之达到较为合适的效果:

  • 使用响应式布局设置打印的效果
  • 在合适的时候打印背景图片和颜色
  • 添加显示的网址或页面链接,以供参考
  • 使用css filter 提高打印的图形效果

针对打印的样式,而不是屏幕显示样式

可以使用媒体查询(media query)专门写针对打印样式设置:

@media print {

}
也可以将原有的样式表写成:
<link rel="stylesheet" media="all" href="style.css")">
这样就会让打印样式和显示样式一致。 还可以专门写一个针对打印页面的样式表然后写成:
<link rel="stylesheet" media="print" href="print.css")">
不过如果是新建空白页打印的话,有可能外部链接的打印样式表会不生效,因此只能将其改为<style>写入当前页内。 如果不想打印当前页的<body>内的全部内容,可以使用以下方法打印指定div区域的内容:
<script>
function myPrint(obj){
    var newWindow=window.open("打印窗口","_blank");//打印窗口要换成页面的url
    var docStr = obj.innerHTML;
    newWindow.document.write(docStr);
    newWindow.document.close();
    newWindow.print();
    newWindow.close();
}
</script>
<div id="print">
<hr />
   打印演示区域,点击打印后会在新窗口加载这里的内容!
<hr />
</div>
<button onclick="myPrint(document.getElementById('print'))">打 印</button>
当然,如果只有小部分区域的内容不显示的话,可以对不需要打印的div加入一个class如noprint,然后在media=print的样式表内设置:
<style media=print type="text/css"> 
.noprint{
display:none;
//或者visibility:hidden:
</style>
另外,如果想要先弹出一个打印预览页面,建议使用一个modal弹出层的<iframe>将需打印的内容复制进去,然后再进行打印,那么上面的方法需要把代码改为:
function myPrint(obj){
    var newWindow=window.open("打印窗口","_blank");//打印窗口要换成页面的url
    var $print_content = $('#print-modal-content').contents().find("*").html();//获取id为print-modal-content的iframe内的所有内容
    var docStr = $print_content ;
    newWindow.document.write(docStr);
    newWindow.document.close();
    newWindow.print();
    newWindow.close();
}
大多数的浏览器会自动根据打印更改颜色,以节省打印原料,但是我们还是尽可能的手工设置一下。 为了达到最佳效果,使颜色清晰明了,我们至少需要包含一下基本的打印样式。
@media print { body { color: #000; background: #fff; } }
为了保证不被跨页打印,如一个标题和内容在页面底部被分开:
h2, h3 { page-break-after: avoid;
另一中情况是要防止图片过宽而超出纸张边缘:
img {
   max-width: 100% !important;
}
第三个要点是确保 articles 文章标签的内容,在新的一页开始:
article {
   page-break-before: always;
}
最后,还要注意列表和图片不被分开在不同的页:
ul, img {
   page-break-inside: avoid;
}

背景图片和颜色

对于一些网站,颜色和背景图还是非常必要需要遵循的。如果用户是在 webkit 内核浏览器上打印的话,我们可以强制打印机打印屏幕上所看到的颜色(即强制在打印页面上出现任何的背景图和颜色),一般来说彩色打印机可以做到这点,我们需要一个单独的媒体查询:
@media print and (color) {
   * {
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
   }
}
老版本的IE可能需要针对设置了背景的div区域使用:
.myprogress {  
    background: #f5f5f5!important;  
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#fff9f9f9', GradientType=0);  
}

Z
Published on

只有一星,符合条件才能提交表单。

Sign in or Sign up Leave Comment