1. 下载帆软报表FineReport设计器

下载设计器https://www.finereport.com/product/download

下载后安装，安装过程参考官方文档，正常双击下一步下一步执行即可。

如果遇到dll问题，不要管它，重启电脑再次安装即可。

2. 准备数据，外链oracle数据库。

打开设计器，选择‘服务器' > ‘定义数据链接’

注意url链接，如果连接的服务名：jdbc:oracle:thin:@localhost:1521/risk_control

如果连接的是SID：jdbc:oracle:thin:@localhost:1521:risk_control

点击测试连接，连接成功，搞定。连接失败，会有错误提示，根据提示查看问题就行。

3.设计报表

（1）添加数据查询（2）输入查询语句（3）点确定添加数据（4）拖动字段到单元格

（5）点保存（6）点预览

预览效果如下：

4. VUE页面嵌入

<template><div class="app-container"><iframe id="reportFrame" width="100%" height="400" frameborder="0" scrolling="auto":src= "fr_cpt_url"></iframe></div>
</template>
<script>
export default {name: "WarnModel",data() {return {fr_cpt_url: process.env.VUE_FR_BASE_HOST + "/decision/view/report?viewlet=riskReport%252FwarnModel.cpt",}}
};
</script>

5. 看页面嵌入效果

6. 问题

（1）localhost拒绝连接，修改成127.0.0.1或者Ip 都不作用，

解决办法：进入决策管理系统，关闭安全设置Security Headers

参考：FineReport之localhost拒绝了我们的连接请求_S!nber.的博客-CSDN博客将FineReport报表插入到自己的项目时,显示localhost拒绝请求,报表无法显示https://blog.csdn.net/weixin_44627459/article/details/103346236

2 VUE实战 iframe嵌入帆软报表FineReport相关推荐

用帆软报表FineReport打造公司数字化经营报表
如何高效进行报表制作与设计呢?这篇文章给大家分享超级实用的报表软件--帆软报表FineReport.帆软公司持续深耕报表应用,针对不同场景提供了多元的报表开发模式,并巩固基础,提升产品性能.稳定性和安 ...
帆软报表(FineReport) 的初步学习和使用
我们公司在做ERP项目,我是根据项目进行的学习,常用知识点记录如下: 1,FineReport 使用时的配置帆软报表 ->服务器->定义数据连接->写入数据数据库的连接URL,用户 ...
帆软报表(FineReport)版本9打开版本10的报表
最近做帆软报表,我本地的版本是10版本,服务器帆软报表为9,辛辛苦苦做的10版本的系列报表在版本9上打不开,查了官网,说是不支持降级打开报表,10能打开9的,但9打不开10的,也没发现解决方案.(漏看 ...
帆软报表FineReport学习实践
最佳学习文档和视频:查看帆软官网的学习社区 https://help.fanruan.com/finereport/ https://bbs.fanruan.com/edu/guide/finerep ...
帆软报表FineReport出现数据在一页呈现，并且多行挤在一起的情况
帆软问题如图所示数据挤兑,无法进行分页问题原因查找后发现在帆软中模板-报表引擎属性-取消启动后台分页就可以恢复正常行间距保存设置-预览能成功预览,该文章仅用于个人笔记.
解决Iframe嵌入帆软BI系统后，Chrome升级后跨域出现登录界面，Cookie写入不成功。
1 先看效果: cookie写入不成功,是因为google chrome的高版本为了防止CSRF 攻击,默认将Cookie的SameSite设置为lax了,导致cookie跨域的时候就写不成功了.如果 ...
帆软报表跨域之跨域登录
我们再集成帆软报表的时候一般采用iframe嵌入帆软报表的方式,此时需要登录,就会碰到跨域调用帆软的登录方法的问题. 比如用iframe嵌入一张报表: <iframe id="_ifr ...
finereport 格式化金额函数_帆软报表（finereport）常用函数
帆软报表FineReport中数据连接之Websphere配置JNDI连接以oracle9i数据源制作的模板jndi.cpt为例来说明如何在FineReport中的Websphere配置JNDI连接 ...
帆软报表调用python脚本_帆软报表（finereport）实现自动滚屏效果
例如Demo:IOS平台年度数据报表. 展示内容丰富,一个页面中存在多个图表.内容,超出了浏览器窗口的大小导致内容展示不全. 为了能够预览这个报表的全部内容,可以使用JS滚屏效果来实现. 操作步骤: ...

2 VUE实战 iframe嵌入帆软报表FineReport