目录

VUE实战 iframe嵌入帆软报表FineReport

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

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

3.设计报表

 4. VUE页面嵌入

 5. 看页面嵌入效果

 6. 问题

---

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