调用浏览器的功能打印表单时，如何获得更好的效果?
李小翔
2013-10-17 10:44

内容列表

    当客户要求不高（不需要Office或者PDF套打）时，常使用浏览器自带的打印功能（window.print()）来实现所见即所得的表单打印，打印效果往往差强人意。
  常见的问题如：
页面太宽，无法打印到一页纸上，出现横向跨页的问题
操作栏等不希望打印出来的内容也被打印到纸上
希望在浏览器上看到的效果和打印出来的效果不一样，比如打印出来希望文字更大、表格线加粗等，甚至某些内容的打印布局都可能要求不一样
    针对问题一，bro-framework中提供了一个 printForm 的js方法，打印的时候自动将表格宽度设置为一张A4纸的大小，并且通过css隐藏了一些打印时不需要显示的内容，如操作栏、消息栏等。如果这个方法不能满足需求，可以在工程的application.js中自定义一个方法，或者写一个同名方法覆盖。
    针对打印内容、效果，bro-framework默认提供了一组样式表，用于设置打印时的效果，如果还是无法满足要求的话，可以自行设置打印时的css样式，甚至于在页面上输出两套内容，一套用于显示，一套用于打印，然后用css样式控制。比如：
    /** 浏览器显示时的样式 */
   .foo { 
       display: none;
    } 
   .bar { 
       font-weight: bold;
    } 
   /** 打印时的样式 */
   @media print { 
       .foo { 
           display: block;
        } 
       .bar { 
           display: normal;
        } 
    } 
    此外，在表单上添加打印按钮的代码示例如下：
    <div class=”buttons”>
        ......
       <span class=”button”><input class=”print” type=”button” onclick=”printForm()”
           value=”${ message(code:’default.button.print.label’, default:’Print’)} ”></span>
        ......
   </div>
   
    如果是通过bro-bpm流程定义工具配置的，可以配置一个自定义操作，其onclick事件配置为 printForm() 即可，当然还有Css类名也可以配置为print（即默认的打印图标）或其他。