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

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

先看一下使用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_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>

<script setup lang="ts">
const props = defineProps({
  reportUrl: {
    type: String,
    default: 'https://www.baidu.com',
  },
  height:{
    type: [String, Number],
    default: '100%'
  }
});
</script>

<style scoped lang="scss">

</style>

请求类

export function getFdyhtjhzb(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
 */
const KEY = CryptoJS.enc.Utf8.parse('test')

export const AES_Encrypt = (plaintext) => {
    let ciphertext = CryptoJS.AES.encrypt(plaintext, KEY, {
        mode: CryptoJS.mode.ECB,
        padding: CryptoJS.pad.Pkcs7
    }).toString()
    return ciphertext
}

后端代码示例

控制器

	@GetMapping("/getReport")
    public R<String> getFdyhtjhzb(@RequestParam String date) {
        ParameterVO parameterVO = null;
        parameterVO = new ParameterVO();
        parameterVO.setViewlet("report.cpt");
        parameterVO.setItems(Arrays.asList(new ItemVO("op", "view"), new ItemVO("year", date)));
        return R.ok(AESUtil.encryptFromString(fineRequest.getUrl(parameterVO), Mode.ECB, Padding.PKCS5Padding));
    }

工具类

package com.qctc.servers.utils;

import java.nio.charset.StandardCharsets;

import javax.crypto.spec.IvParameterSpec;
import javax.crypto.spec.SecretKeySpec;

import cn.hutool.crypto.Mode;
import cn.hutool.crypto.Padding;
import cn.hutool.crypto.symmetric.AES;

public class AESUtil {
    public static final String ENCODE_KEY = "test";
    public static final String IV_KEY = "test";

    public static String encryptFromString(String data, Mode mode, Padding padding) {
        AES aes;
        if (Mode.CBC == mode) {
            aes = new AES(mode, padding, new SecretKeySpec(ENCODE_KEY.getBytes(), "AES"), new IvParameterSpec(IV_KEY.getBytes()));
        } else {
            aes = new AES(mode, padding, new SecretKeySpec(ENCODE_KEY.getBytes(), "AES"));
        }
        return aes.encryptBase64(data, StandardCharsets.UTF_8);
    }

    public static String decryptFromString(String data, Mode mode, Padding padding) {
        AES aes;
        if (Mode.CBC == mode) {
            aes = new AES(mode, padding, new SecretKeySpec(ENCODE_KEY.getBytes(), "AES"), new IvParameterSpec(IV_KEY.getBytes()));
        } else {
            aes = new AES(mode, padding, new SecretKeySpec(ENCODE_KEY.getBytes(), "AES"));
        }
        byte[] decryptDataBase64 = aes.decrypt(data);
        return new String(decryptDataBase64, StandardCharsets.UTF_8);
    }
}