欢迎进入Wiki » FAQ » 调用浏览器的功能打印表单时,如何获得更好的效果?

调用浏览器的功能打印表单时,如何获得更好的效果?

在2013-10-17 10:44上被李小翔修改
评论 (0) · 附件 (0) · 记录 · 信息

    当客户要求不高(不需要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(即默认的打印图标)或其他。

标签: BroFramework 打印
在2013-10-17 10:44上被李小翔创建

Copyright © 2013 北京博瑞开源软件有限公司
京ICP备12048974号