一般动作
登录
Wiki: BROPEN ▼: Document Index
»
Space: FAQ ▼: Document Index
»
Page: 调用浏览器的功能打印表单时，如何获得更好的效果
搜索
zh
页面动作
导出 ▼: 以PDF格式导出 以RTF格式导出 以HTML格式导出
更多动作 ▼: 打印预览 察看源码
欢迎进入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上被李小翔创建

- 评论 （0）
- 附件 （0）
- 记录
- 信息

# 快速链接

- 首页
- 新闻动态
- FAQ

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