历史版本3 :[通用]JS实现移动端导出文件 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 概述编辑

1.1 版本依赖

报表服务器版本HTML5移动端展现插件版本App版本
10.0V10.4.975V10.4.975

1.2 应用场景

移动端现在支持将 cpt 报表导出为:Word、Excel、PDF、图片。效果如下图所示:

1607067351651158.gif

1.3 导出方案

现移动端提供导出接口,用户可以通过 JavaScript 代码实现移动端导出文件的效果。

目前只支持 cpt 报表,且支持触发 JS 的位置都支持调用该接口:单元格超级链接、参数控件事件、填报控件事件、Web 事件等。

四种文件导出代码如下表所示:

JavaScript 代码参数说明
contentPane.exportReportToExcel('指定格式');
输出 Excel:参数为 page 时分页导出;simple 时原样导出;sheet 时分页分 sheet 导出
contentPane.exportReportToImage('指定格式');
导出图片: 参数可为 png、jpg、gif、bmp,无参数时格式为 png
contentPane.exportReportToPDF();
导出 PDF
contentPane.exportReportToWord()
导出 Word

2. 示例编辑

2.1 准备模板

打开设计器内置模板:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\Phone\industry\银行存贷汇总.cpt

2.2 添加按钮控件

模板上方添加 4 个填报按钮,从左到右分别用来导出Word、Excel、PDF、图片。如下图所示:

1607068561204390.png

2.3 按钮添加事件

以导出 Word 按钮为例,给按钮添加一个点击事件,填写导出代码,如下图所示。其他 3 个按钮同理设置,只需要改下代码即可。

1607068744863532.png

JavaScript 代码见1.3导出方案

2.4 效果预览

保存模板,点击移动端预览,选择填报预览的方式,使用企业微信扫一扫二维码,实际导出效果如下图所示:

1607067351651158.gif

3. 模板下载编辑

已完成模板参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\phone\JS\移动端导出文件.cpt

点击下载模板:移动端导出文件.cpt

4. 注意事项编辑

4.1 iOS 端已知问题

1)导出 Word 乱码的问题

  • APP:导出 Word 乱码,暂且不支持第三方应用打开。

  • H5:导出 Word 乱码,可以利用 WPS 打开文件(第三方集成可能不支持)。具体步骤:在 safari 中打开-->下载文件-->选择下载的文件-->共享到 WPS Office。

2)导出图片的问题

iOS 端导出图片后,可能会出现图片名称并非模板名称的问题。

3)导出 Excel 的问题

钉钉导出 Excel 文件后,中文文件名乱码,这是钉钉浏览器自己解析的问题。

4.2 Android 端已知问题

1)导出 Excel、PDF 的问题

个人微信中导出 PDF、Excel 文件时,如果直接用自带浏览器打开的话,可能出现会话失效,无法打开文件的问题。

现在的解决方案是建议安装QQ浏览器,在QQ浏览器中打开文件。

2)导出 Word 的问题

有些机型不支持打开 doc 文件,需要手动改文件后缀名(bin-->doc)。