[通用]JS实现移动端导出文件

1.1 版本依赖

1.2 应用场景

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

1.3 导出方案

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

目前只支持「普通报表」，详情参见：报表导出接口

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

_g().exportReportToExcel('sheet');

_g().exportReportToImage();

_g().exportReportToPDF();

_g().exportReportToWord();

本文示例仅支持在「填报预览」模式下生效。

2.1 准备模板

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

2.2 添加按钮控件

2.3 按钮添加事件

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

JavaScript 代码见「1.3导出方案」。

2.4 效果预览

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

注：IOS 暂不支持在企业微信中直接导出PDF。

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

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

4.1 iOS 端已知问题

4.1.1 导出 Word 乱码

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

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

4.1.2 导出图片

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

4.1.3 导出 Excel 

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

2）H5 导出 Excel 只能在 Safari 浏览器中进行。

操作步骤：预览模板>在 Safari 中打开>导出Excel>选择查看/接收 Excel 文件的 APP 。

注：只在V10.4.995 及之后的 H5 插件才支持。

3）现象1：模板中按钮控件添加导出 Excel 的 JS 事件，在企业微信/钉钉中使用 H5 效果预览模板，点击导出再返回，再点击写有 JS 的控件会报错，返回目录预览其他模板，模板空白。

现象2：单元格添加导出 Excel 的 JS 事件，在企业微信/钉钉中使用H5效果预览模板，点击导出再返回，再点击写有 JS 的单元格无反应，返回目录预览其他模板，模板空白。

解决方案：

根据挂载模板的类型（预览/填报/分析），在模板「web属性」里进行对应的页面设置，添加一个「加载结束」的JS事件，即可达到导出 Excel 后返回模板能重新加载的效果，不至于二次点击导出，模板弹出报错。

「加载结束」的 JS 事件代码：window.addEventListener('pageshow', function(){window.location.reload()})

4.1.4 导出 PDF

H5 导出 PDF 只能在 Safari 浏览器中进行。

操作步骤：预览模板>在 Safari 中打开>导出PDF>选择查看/接收 PDF 文件的 APP 。

注：只在V10.4.995 及之后的 H5 插件才支持。

4.2 Android 端已知问题

1）导出 Excel、PDF 的问题

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

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

2）导出 Word 的问题

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