【前端】VUE前端利用iframe嵌入帆软报表

代码：

<template>
  <div class="app-container">
    <iframe id="reportFrame" width="100%" height="800" frameborder="0" scrolling="auto"
            :src= "fr_cpt_url">
    </iframe>
  </div>
</template>
<script>
export default {
  name: "WarnModel",
  data() {
    return {
      //本地&本地
      fr_cpt_url: process.env.VUE_APP_FR_BASE_HOST + "decision/view/report?viewlet=%25E5%25A4%25AA%25E9%2593%2581%25E6%258B%259B%25E8%2581%2598%25E6%2595%25B0%25E6%258D%25AE%25E5%25BD%2595%25E5%2585%25A5%25E5%25B9%25B3%25E5%258F%25B0%252F%25E7%25AD%25BE%25E7%25BA%25A6%25E6%2583%2585%25E5%2586%25B5%25E6%258A%25A5%25E8%25A1%25A8.cpt",
      //线上
    }
  }
};
</script>

其中process.env.VUE_APP_FR_BASE_HOST在文件.env.development中定义：

【需要注意的是必须以地址命名VUE_APP_开头才能被识别】

# 页面标题
VUE_APP_TITLE = 数据录入平台

# 开发环境配置
ENV = 'development'

# 若依管理系统/开发环境
VUE_APP_BASE_API = '/dev-api'

# 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true

# 帆软地址
VUE_APP_FR_BASE_HOST = 'http://localhost:8075/webroot/'