反馈已提交

网络繁忙

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

  • 文档创建者:Leo.Tsai
  • 历史版本:13
  • 最近更新:RosieY 于 2023-01-06
  • 1. 概述

    1.1 版本依赖

    报表服务器版本HTML5移动端展现插件版本App版本
    11.0V11.0.37V11.0.37

    1.2 应用场景

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

    1607067351651158.gif

    1.3 导出方案

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

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

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

    JavaScript 代码
    参数说明
    _g().exportReportToExcel('sheet');
    普通报表导出Excel
    _g().exportReportToImage();
    普通报表中导出图片
    _g().exportReportToPDF();
    普通报表导出PDF
    _g().exportReportToWord();
    普通报表导出Word

    2. 示例

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

    2.1 准备模板

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

    2.2 添加按钮控件

    1)在最上方插入行,并调整行距。

    2021-10-26_17-40-52.png

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

    以导出Word为例,合并 B2、C2 单元格,并选中添加「按钮控件」,设置按钮名字「导出Word」、按钮图标。

    2021-10-26_18-03-06.png

    2.3 按钮添加事件

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

    2021-10-26_18-09-00.png

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

    2.4 效果预览

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

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

    1607067351651158.gif

    3. 模板下载

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

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

    4. 注意事项

    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 的单元格无反应,返回目录预览其他模板,模板空白。

    image-2022-01-13-21-54-07-849 (1).png


    解决方案:

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

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

    2022-02-28_11-45-02.png


    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)。

    附件列表


    主题: 移动端应用
    已经是第一篇
    已经是最后一篇
    • 有帮助
    • 没帮助
    • 只是浏览
    中文(简体)

    鼠标选中内容,快速反馈问题

    鼠标选中存在疑惑的内容,即可快速反馈问题,我们将会跟进处理。

    不再提示

    10s后关闭



    AI

    联系我们
    在线支持
    获取专业技术支持,快速帮助您解决问题
    工作日9:00-12:00,13:30-17:30在线
    页面反馈
    针对当前网页的建议、问题反馈
    售前咨询
    采购需求/获取报价/预约演示
    或拨打: 400-811-8890 转1
    qr
    热线电话
    咨询/故障救援热线:400-811-8890转2
    总裁办24H投诉:17312781526
    提交页面反馈
    仅适用于当前网页的意见收集,帆软产品问题请在 问答板块提问前往服务平台 获取技术支持