帆软报表使用url访问报表，自定义前端搜索，优化报表展示

最新推荐文章于 2025-09-16 11:44:45 发布

原创

最新推荐文章于 2025-09-16 11:44:45 发布 · 1.5k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #java #jvm #报表 #帆软 #fineReport

近期公司页面往报表方向迁移，正好选择了帆软报表，由我负责这一部分的业务代码修改，我们没有采用帆软的鉴权模式。再进行简单的报表展示后发现原始的帆软报表组件不符合前端的设计要求，查询帆软官网后发现要修改是比较繁琐的。

先看一下使用url访问报表

http://frhost:frport/webroot/decision/view/report?viewlet=frname.cpt&op=view&frparam=xxx

实战

这个的项目架构是前端vue，后端是springcloud

前端代码示例

报表页

<template>
  <styles-container class="page-container" notBg>
    <template #contMain>
      <div class="style-main" ref="pageContainer">
        <div class="style-box">
          <div class="style-box-head">
            <div>
              <el-date-picker
                  style="height: 30px;"
                  v-model="dateRangeValue"
                  type="daterange"
                  placeholder="请选择日期"
                  value-format="YYYY-MM"
                  start-placeholder="请选择开始日期"
                  end-placeholder="请选择结束日期"
                  @change="getTableList"
              />
              <el-input v-model="areaName" style="width: 240px" placeholder="请输入地区" @change="getTableList" class="search_title"/>
<!--              <el-input v-model="industry" style="width: 240px" placeholder="请输入行业" @change="getTableList" class="search_title"/>-->
              <el-input v-model="name" style="width: 240px" placeholder="请输入名称" @change="getTableList" class="search_title"/>


            </div>
            <div>
              <q-button color="query" @click="getTableList">
                <svg-icon name="icon-sousuo"/>
                搜索
              </q-button>
            </div>
          </div>
        </div>
      </div>


      <div class="style-box report_box">
        <report class="report_style" :reportUrl="reportUrl">

        </report>
      </div>
    </template>
  </styles-container>
</template>

<script setup lang="ts">
import {
     
     getSdqyzchzb} from "/@/project/report/report";
import {
     
     AES_Decrypt} from "/@/utils/secret";

const reportUrl = ref('')
const areaName = ref('')
const industry = ref('')
const powerSupplyName = ref('')
const dateRangeValue = ref(['2022-08', '2024-08'])
const getTableList = () => {
     
     
  getSdqyzchzb({
     
     
    'startTime': dateRangeValue.value[0],
    'endTime': dateRangeValue.value[1],
    'areaName': areaName.value,
    'industry': industry.value,
    'name': name.value
  }).then(res => {
     
     
    console.log("res :" + JSON.stringify(AES_Decrypt(res.msg)));
    reportUrl.value = AES_Dec