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

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

先看一下使用url访问报表

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

实战

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

前端代码示例

报表页

<template><styles-containerclass="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_Decrypt(res.msg);});}onMounted(() =>{getTableList();})
</script>
<style scoped lang="scss">
.style-box{height: auto;}.report_box{margin-top: 15px;height:calc(100% - 57px);}::v-deep(.el-input__wrapper){border-radius: 5px 0 0 5px !important;}.search_btn{width: 35px;height: 30px;border-radius: 0 5px 5px 0;border-left: none;color: #1EACA6;}.report_style{height: 100%;width: 100%;}.search_title{margin-left: 10px;}</style>

框架类

<template><iframe:src="reportUrl":height="height"allowfullscreen="allowfullscreen"></iframe></template><scriptsetuplang="ts">const props =defineProps({reportUrl:{type: String,default:'https://www.baidu.com',},height:{type:[String, Number],default:'100%'}});</script><stylescopedlang="scss"></style>

请求类

exportfunctiongetFdyhtjhzb(query?: Object){return http.getRequest(preUrl +'/getReport', query);}

工具类

import CryptoJS from"crypto-js";//引用AES源码js/**
 * AES 加密
 * @param word: 需要加密的文本
 * KEY: // 需要前后端保持一致
 * mode: ECB // 需要前后端保持一致
 * pad: Pkcs7 //前端 Pkcs7 对应 后端 Pkcs5
 */constKEY= CryptoJS.enc.Utf8.parse('test')exportconstAES_Encrypt=(plaintext)=>{let ciphertext = CryptoJS.AES.encrypt(plaintext,KEY,{mode: CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7
    }).toString()return ciphertext
}

后端代码示例

控制器

@GetMapping("/getReport")publicR<String>getFdyhtjhzb(@RequestParamString date){ParameterVO parameterVO =null;
        parameterVO =newParameterVO();
        parameterVO.setViewlet("report.cpt");
        parameterVO.setItems(Arrays.asList(newItemVO("op","view"),newItemVO("year", date)));returnR.ok(AESUtil.encryptFromString(fineRequest.getUrl(parameterVO),Mode.ECB,Padding.PKCS5Padding));}

工具类

packagecom.qctc.servers.utils;importjava.nio.charset.StandardCharsets;importjavax.crypto.spec.IvParameterSpec;importjavax.crypto.spec.SecretKeySpec;importcn.hutool.crypto.Mode;importcn.hutool.crypto.Padding;importcn.hutool.crypto.symmetric.AES;publicclassAESUtil{publicstaticfinalStringENCODE_KEY="test";publicstaticfinalStringIV_KEY="test";publicstaticStringencryptFromString(String data,Mode mode,Padding padding){AES aes;if(Mode.CBC== mode){
            aes =newAES(mode, padding,newSecretKeySpec(ENCODE_KEY.getBytes(),"AES"),newIvParameterSpec(IV_KEY.getBytes()));}else{
            aes =newAES(mode, padding,newSecretKeySpec(ENCODE_KEY.getBytes(),"AES"));}return aes.encryptBase64(data,StandardCharsets.UTF_8);}publicstaticStringdecryptFromString(String data,Mode mode,Padding padding){AES aes;if(Mode.CBC== mode){
            aes =newAES(mode, padding,newSecretKeySpec(ENCODE_KEY.getBytes(),"AES"),newIvParameterSpec(IV_KEY.getBytes()));}else{
            aes =newAES(mode, padding,newSecretKeySpec(ENCODE_KEY.getBytes(),"AES"));}byte[] decryptDataBase64 = aes.decrypt(data);returnnewString(decryptDataBase64,StandardCharsets.UTF_8);}}