记录VUE项目中帆软报表的应用的一些细节

背景

主要使用帆软做比较简单的表格功能，在vue项目中使用iframe的方式嵌入帆软的url。通过postMessage进行数据通信。

一、官方网站及文档

1、FineReport文档：FineReport帮助文档 - 全面的报表使用教程和学习资料

2、遇到无法解决的问题可以在网站在线咨询。每人限2次机会，加入企业可以无限次机会。

二、设计器的使用

1、定义数据库连接、配置数据集。

入口：服务器-定义数据库连接&配置数据集 。作用：定义数据库连接可以连接数据库，配置数据集：写查询sql，准备需要展示的数据的视图。

2、配置数据列。

给单元格配置数据源，可以整行或者整列依次显示数据库数据，无需一个个手动添加。数据列属性- FineReport帮助文档 - 全面的报表使用教程和学习资料

3、如何在编辑状态下单元格不变成input框，还是依旧显示预览时的状态？

点击单元格-右侧控件设置-选择控件给空值。如果没办法选择空值，需要复制一个普通单元格过来粘贴，但是这样这个单元格设置的东西都没了，得重新设置。

4、如何使用公式，比如SUM？

点击单元格-右侧控件设置-插入元素选择：插入公式-弹框输入例如：SUM(H7,H9,H11,H13,H15,H16,H17)

5、如何限制单元格格式为数字，并且规定数字的位数，比如保留三位小数？

击单元格-右侧控件设置-格式-数字。并在第二行输入#0.000 表示保留三位小数

6、如何设置数据校验？

模板-报表填报属性-数据校验-内置校验：内置校验- FineReport帮助文档 - 全面的报表使用教程和学习资料

7、如何提交数据到数据库？

模板-报表填报属性-提交-内置sql：内置SQL提交- FineReport帮助文档 - 全面的报表使用教程和学习资料

8、如何给单元格设置同样的事件，例如给单元格设置【编辑结束】事件？

首先给一个单元格设置【编辑结束】事件，点击单元格-右侧控件设置-控件设置-事件-添加事件。

然后按住ctrl，多选单元格，最后一个点击刚刚设置的单元格。然后右侧事件设置那里点击【添加事件】下方的复制图标，会出现一个copyxxx

9、如何打印时给表格添加一个title跟结尾？

实现思路：在编辑跟预览状态下把title所在的单元格的高度设置为0，打印时不为0

选择要隐藏的单元格-右侧单元格属性-其他-高级：勾选第二三项

模板-模板web属性-分页预览设置-事件设置-添加【加载结束】事件-填入代码

// 隐藏第一二行

$("tr[tridx=0],tr[tridx=1]").height(0);

模板-模板web属性-填报页面设置 同上方法

10、预览时有些字段没显示出来，被隐藏了？

模板-页面设置-纸张大小-自定义：给多点，慢慢试试。

11、id这一栏我有需要用，但是不能让它显示出来？

如果是纵向一列或者横向一行，选择单元格与配置数据列方式相同，选择该列/行 右键-隐藏。这样该列/行的数据在，但是在任何情况下都不显示。

12、如何让报表自适应宽度，撑满整个页面？

模板-pc端自适应属性-为该模板单独设置-表格-横向自适应

三、与iframe结合时的使用技巧

13、我需要改变报表本身的一些样式，例如：将验证不通过的提示直接隐藏？

将写好的css文件放入你的帆软的服务器文件夹下面，例如我直接放在WEB-INF下面

模板-模板web属性-引用css-磁盘文件：选择你放的css文件，例如WEB-INF/common.css。记得最后要点击添加

引用js同上

14、我的页面使用iframe嵌入帆软报表。如何与之通信？

使用postMessage

模板-模板web属性-分页预览设置-事件设置-加载结束：

if (!window.a) {
        function send(val) {
                sendMessage(val);
        }
        (function(win, doc) {

                var ifr = win.parent;

                var cb = function(msg) {
                        eval(msg);
                };
                var sendMessage = function() {
                        if (win.postMessage) {
                                if (win.addEventListener) {
                                        win.addEventListener("message", function(e) {
                                                 
                                                cb.call(win, e.data);
                                        }, false);
                                } else if (win.attachEvent) {
                                        win.attachEvent("onmessage", function(e) {
                                                cb.call(win, e.data);
                                        });
                                }
                                return function(data) {
                                      
                                        ifr.postMessage(data, '*');
                                };
                        } else {
                                var hash = '';

                                setInterval(function() {
                                        if (win.name !== hash) {
                                                hash = win.name;
                                                cb.call(win, hash);
                                        }
                                }, 200);
                                return function(data) {
                                        ifr.name = data;
                                };
                        }
                }
                win.sendMessage = sendMessage();
 
                send('loaded')
              
        })(window, document);
        window.a = 1;
}

页面中监听：

mounted中：

if (window.postMessage) {
      window.addEventListener('message', this.bindMessageEvent, false)
    }

methods中：

     bindMessageEvent(e) {
     // e.data是从帆软报表的js中传的参数，可以传不同的参数，以此判断用途
      if (e.data === 'loaded') {
        this.bindEvent()
      } else if (((e.data || {}).type || ``) === 'writeSuccess') {
        // 提交返回success
        this.addHistory()
      } else if (((e.data || {}).type || ``) === 'writeFailure') {
        // 提交返回error
      }
    },

15、我需要在iframe外面定义按钮，按钮的作用是校验数据，通过校验则提交。

vue中：

 document.getElementById('reportFrame').contentWindow._g().verifyReport()

帆软中：

模板-模板web属性-分页预览设置-事件设置-校验后：

if (fr_verifyinfo.success) {
// 如果校验通过，提交报表
    _g().writeReport();
    return false;
}

16、如果修改完一个单元格直接点击vue中的按钮提交，此时单元格没有触发【编辑结束】事件，如何手动触发？

直接随便选择一个帆软里面的单元格，手动click，触发编辑结束事件

document.getElementById('reportFrame').contentWindow.document.getElementById('B1-0-0').click()

17、编辑完一个单元格后，如果通知父页面？

编辑状态下，当编辑完一个单元格（失去焦点，会触发单元格的【编辑结束】事件）。

以下例子是通过点击的当前单元格，获取它的横纵单元格的值（对应哪一行，哪一列）然后通过postMessage传递数据变化。

// 当前td的坐标
var ctd = this.options.location;
// 行政区名称
var adnm = JSON.parse(_g().getCell('B' + ctd.slice(1)).getValue()).value
// 种类名称
var typename = JSON.parse(_g().getCell(ctd[0] + '2').getValue()).value
// row id 
var rowId = JSON.parse(_g().getCell('O' + ctd.slice(1)).getValue()).value


    // post message 向上传递值
window.parent.postMessage({
    type: 'editTd',
    td: ctd,
    adnm: adnm,
    typename: typename,
    originValue: this.options.value,
    newValue: this.getValue(),
    rowId:rowId
}, '*');

18、如何批量修改单元格样式？

按住ctrl多选单元格。可统一设置。

可使用格式刷

19、数字的字体格式？

Times New Roman

20、发布之后我希望直接预览编辑，不需要登录。

需要解除模板认证，不做身份验证模板认证- FineReport帮助文档 - 全面的报表使用教程和学习资料

21、外部调用打印

window.FR.doURLPrint({
        printUrl: this.frURL,
        isPopUp: false,
        data: {
          reportlets: '[{reportlet: ' + this.viewlet + '}]'
        },
        printType: 0
      })
      
//      frURL: '/jeecg-fine/decision/view/report',
//     viewlet: 'FourteenthFiveYearPlanControl0208.cpt'

22、外部调用导出

document
          .getElementById('reportFrame')
          .contentWindow._g()
          .exportReportToExcel('simple')