1.1 导出方式

报表支持三种导出方式:PDF、EXCEL、WORD。

使用方法:

  • 在.w页面上放一个toolbars组件
  • 在toolbars组件里放一个exportBar组件

157图5.1  导出工具栏设计图

158

图5.2  导出工具栏运行结果图

除了使用组件也可以使用javascript调用接口:

API(js):

导出pdf :justep.xbl(‘reportid’).exportPDF();

导出word :justep.xbl(‘reportid’).exportWord();

导出excel :justep.xbl(‘reportid’).exportExcel();

 1.2  打印设置

报表的打印与预览功能,需要使用到adobe reader的浏览器插件,所以在使用前请先正确安装adobe reader。可以从Adobe官方网站或者平台提供的软件更新功能中进行下载。

 159图5.3  打印第三方控件下载图

要实现报表的打印、预览、页面设置功能,可以使用组件printBar。

使用方法:

  • 在.w页面上放一个toolbars组件
  • 在toolbars组件里放一个printBar组件

160

图5.4  打印工具栏设计图

161

图5.5  打印工具栏运行结果图

在打印设置的窗口中,可以对纸张大小、边距、方向、页眉页脚大小进行设置。

162

163

图5.6  报表页面设置示例图

除了使用组件也可以使用javascript调用导出接口:

API(js):

打印:justep.xbl(‘reportid’).print();

预览:justep.xbl(‘reportid’).preview();

页面设置:justep.xbl(‘reportid’).pageSetup();

1.3   分页打印

1.3.1  网格报表分页

设计时:

164

图5.7   打印分页属性设计图

  • 在A1、A2、A3中,添加批注table-header:true,表示第一、二、三行为报表表头。分页后,这三行会作为表头在每页显示。
  • 在B4中,添加批注record-per-page:20,表示报表输出时每页显示20行数据,如果同时添加批注auto-fill-row:true代表如果最后一页的行数不够20行的话,自动添加空行补充满20行。

运行时:

165

图5.8   打印分页属性运行结果图

1.3.2  分组报表分页

设计时:

166

图5.9   分组报表分页属性设计图

  • 在A1、A2、A3中,添加批注table-header:true,表示第一、二、三行为报表表头。分页后,这三行会作为表头在每页显示。
  • 在B4中,添加批注group-break:true,表示报表输出时按照产品类别分组进行分页显示。

运行时:

167图5.10   分组报表分页属性运行结果图

1.4  分栏打印

设计时:

168

图5.11   分类打印属性设计图

  • 在A1、A2、A3中,添加批注table-header:true,表示第一、二、三行为报表表头。分页后,这三行会作为表头在每页显示。
  • 在A1中,再添加批注colcount:2,表示报表输出时在一页中分两栏同时显示报表数据。

169图5.12   分类打印属性运行结果图

1.5  整体显示

在卡片报表预览和打印时,常常会遇到这样一个问题:当一页显示不下一张卡片报表时,该报表的一部分会被拆分到另一页显示。

170图5.13   整体显示属性设计图

在包含select关键字的单元格中插入批注:keep-together:true 就可以了。

本文由WeX5君整理,WeX5一款开源免费的html5开发工具H5 App开发就用WeX5!

阅读其他app 开发相关文章:http://doc.wex5.com/?p=3443