FineReport 报表采用 jQuery 框架，jQuery 是一个快速的，简洁的 JavaScript 库，使用户能更方便地处理 HTML ，实现动画效果，方便交互。

FineReport 报表解析后最终成为一个 HTML 页面，因此可以使用 JavaScript 对报表进行各种处理，您可以使用 jQuery 框架的所有方法对报表进行操作，在此基础上，FineReport 还提供了 API 供用户开发使用。本文将介绍在 FineReport 中如何使用 JavaScript 功能。

用户可以直接在模板中添加 JS 事件，也可以在自定义页面中调用 FineReport 提供的 JS 接口。

2.1 报表模板中使用

制作模板时，用户可以在报表模板中添加 JS 事件，即将代码直接写在模板中；或在外部创建一个 JS 文件后，放在工程目录下，在模板中引入现成的 JS 文件。如下图所示：

2.1.1 通过事件的方式添加

设计模板时可以给控件、工具栏按钮、整个报表添加 JS 事件，每个事件对应一个 function。当报表转为 HTML 页面时会将这些 function 加到 HTML 的头部 head。当事件被触发时如点击按钮时，或者导出打印报表时，对应的 function 就会被执行。

模板中多个位置都可以添加 JS 事件，如下图所示，给控件添加一个「编辑后」事件。支持添加事件的位置和不同事件类型介绍可参考： FineReport 的事件

2.1.2 通过引入 JS 文件的方式添加

制作模板时，可以引用放在报表工程下的 JS 文件。这样，相同的功能就可以用同一个文件，提高代码的可用性。除在模板中可添加事件的位置引用 JS 文件外，在菜单栏也有专门 JS 引用的位置。

• 若 JS 文件只用于单个模板，可以通过菜单栏点击「模板>模板 Web 属性>引用 JavaScript 」引用。

• 若 JS 文件用于报表工程下所有模板，可通过菜单栏点击「服务器>服务器配置>引用 JavaScript」统一引用。

如下图所示：

• 引用时，若选择「磁盘路径」，JS 文件需要提前放置在报表工程 %FR_HOME%\webapps\webroot 目录下。

• 引用时，若选择「绝对路径」，按格式填写路径即可，如 https://localhost:8075/webroot/demo.js 。

2.2 自定义页面中使用

可以在自定义页面中调用 FineReport 提供的 JS 接口。

2.2.1 使用 FineReport 的 JS 方法

通过获取 iframe 中的报表再使用 FineReport 的 JS 方法。如报表嵌入在 iframe 的 ID 为"reportFrame"时，调用报表的打印预览方法，代码如下：

document.getElementById('reportFrame').contentWindow.contentPane.printPreview();

2.2.2 引入文件再使用JS 方法

引入 FineReport 的 JS 文件再使用 FineReport 的 JS 方法，代码如下：

注：若该页面中引入了其他版本的 jQuery.js，可能会有 JS 冲突，因此建议您通过获取 iframe 中的报表再使用 FineReport 的 JS 方法。

<script type="text/javascript" src="/webroot/decision/view/report?op=resource&amp;resource=/com/fr/web/jquery.js"></script> 
<script type="text/javascript" src="/webroot/decision/view/report?op=emb&amp;resource=finereport.js"></script> 
<script type="text/javascript">
    function doPrint(){ 
        var url="http://localhost:8075/webroot/decision/view/report?viewlet=GettingStarted.cpt";//端口和ip根据具体情况设定 
        FR.doURLFlashPrint(url); 
    } 
</script>

添加事件时，用户可以直接在 JS 脚本边框中输入代码，编辑框支持「格式化代码」，点击右上角图标即可格式化。

为了避免 JS 代码输入错误，FineReport 提供了 JS 自动补全功能，使用方法如下：

1）设计器内默认不执行自动补全功能，点击「文件>选项>编辑器设置」，勾选「默认执行该操作」，启动自动补全功能。

如下图所示：

2）设计器内置 JS 自动补全快捷键为 Alt+/，但由于个人电脑，自己设置的快捷键不同，默认快捷键可能已经被占用，此时可修改快捷方式。双击自动补全快捷键：Alt+/，通过键盘操作一遍您需要的快捷方式，比如说，将自动补全的快捷方式更改为 Ctrl+Q，如下图所示，在弹出的快捷方式修改框中，先按住 Ctrl，然后按下Q键，快捷方式即已修改。

3）随意选择一处可以输入 JS 语句的地方，如选中单元格，右键选择「控件设置」，点击事件编辑，添加一个「初始化事件」，在右侧的 JS 输入框中输入 con，然后，操作快捷键 Ctrl+Q，右下角将会列出所有 con 开头的关键字。如下图所示：

编辑框中除了支持 JavaScript 自身的语法外，还支持 FineReport 提供一些 JS 相关的 API 接口。

4.1 普通的 JS 语法

JavaScript 自身的语法，如在事件编辑里面弹出对话框，使用 alert ，定义参数使用 var 。

4.2 jQuery 语法

jQuery 的基础语法是：$("tr")，美元符号 $ 定义  jQuery；选择符("tr")可以获取页面所在行。

更多 jQuery 方法请参考：jQuery 文档

4.3 报表内置的 JS 方法

FineReport 提供一些 JS 相关的 API 接口，可在事件编辑里面直接调用。如 使用 this.options.form.getWidgetByName

获取决策报表中报表块，并使用其 setVisible 的方法隐藏报表块。

this.options.form.getWidgetByName('report0').setVisible(false);  //隐藏报表块

FineReport 提供一些 JS 相关的 API 接口内容可以参考：帆软软件应用程序接口及开发指导文档  ，或参考帮助文档此目录下介绍接口的相关文档。