vue3使用iframe嵌入ureport2设计器,解决预览时NullPointerException异常问题

 更新时间:2023年10月11日 09:10:06   作者:slxz001  
这篇文章主要介绍了vue3使用iframe嵌入ureport2设计器,解决预览时NullPointerException异常问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

1. 后端准备

关于SpringBoot集成UReport2的文章网络上有很多,这里只记录2个容易踩坑的地方:

配置类

很多文章在写后端集成的时候,都在配置类中使用@Bean注解创建ServletRegistrationBeanUReportPropertyPlaceholderConfigurer对象。

但在实际使用过程中发现,如果要将SpringBoot创建的DataSource作为UReport2的内置数据源,则需要将@Bean注解放到配置类以外的地方,否则DataSource无法注入。

@Configuration
public class ReportBean {
    //添加 report 的servlet
    @Bean
    public ServletRegistrationBean<Servlet> ureport2Servlet() {
        return new ServletRegistrationBean<>(new UReportServlet(), "/ureport/*");
    }
    //这一步省略了创建配置文件
    @Bean
    public UReportPropertyPlaceholderConfigurer UReportPropertyPlaceholderConfigurer() {
        UReportPropertyPlaceholderConfigurer propertyConfigurer = new UReportPropertyPlaceholderConfigurer();
        propertyConfigurer.setIgnoreUnresolvablePlaceholders(true);
        ClassPathResource pathResource = new ClassPathResource("config/config.properties");
        propertyConfigurer.setLocation(pathResource);
        return propertyConfigurer;
    }
}
@Configuration
//导入ureport-console-context.xml文件
@ImportResource("classpath:config/context.xml")
@Slf4j
public class ReportConfig implements BuildinDatasource {
    @Autowired
    private DataSource dataSource;
    /**
     * 数据源名称
     **/
    @Override
    public String name() {
        return "ReportSource";
    }
    /**
     * 获取连接
     **/
    @Override
    public Connection getConnection() {
        try {
            return dataSource.getConnection();
        } catch (SQLException e) {
            log.error("Ureport 数据源 获取连接失败!");
            e.printStackTrace();
        }
        return null;
    }
}

report.fileStoreDir配置

在ureport的配置文件中,ureport.fileStoreDir表示报表的xml文件在磁盘上的存储目录。

配置完这个目录,必须手动创建,否则在设计器中保存报表时会报错。

2. 前端嵌入

假设后端集成完毕后,报表设计器的访问路径在http://localhost:9000/ureport/designer

<template>
	<div v-loading="loading" class="h-full">
		<iframe :src="src" frameborder="no" class="wh-full" scrolling="auto" />
	</div>
</template>
<script setup lang="tsx">
import { ref } from 'vue';
const src = ref<string>('/ureport/designer');
const loading = ref<boolean>(true);
</script>

可以看到,我们没有直接将iframe的src指向http://localhost:9000/ureport/designer,否则会由于跨域问题而无法显示。

这里我们配了一个报表设计器的相对路径,并将“ureport”进行前端代理。

'/ureport': {
	target: envConfig.secondUrl,
    changeOrigin: true,
    rewrite: path => path.replace(new RegExp(`^${envConfig.urlPattern}`), '/ureport')
}

这里我们让代理拦截前缀为"/ureport"的请求。

由于报表后端路径也是以"/ureport"开头,所以rewrite中不需要将"/ureport"删掉,也可以不写rewrite。

3. 预览问题

假设我们的前端工程以8000端口启动。

将ureport报表设计器嵌入到iframe后,点击左上角的预览,浏览器将打开一个新的tab页,其URL地址为http://localhost:8000/ureport/preview?_u=p

其中,参数_u表示要预览的报表文件名称,在预览时约定文件名为p。此时页面无法正常打开,只显示NullPointerException。

经过跟踪ureport2源码,发现_u参数没有发送到后端。

4. 问题排查与解决

1.尝试使用后端端口直接访问http://localhost:9000/ureport/preview?_u=p发现可以访问,但无法预览。阅读源码发现ureport预览报表时,报表内容随session传递。因此前后端端口不一致时找不到报表内容,无法预览。

2.尝试新建一个vue页面,来进行请求转发发现行不通。直接转发到后端依然存在跨域问题,通过前端代理进行转发,参数还是传不到后端。

3.使用postman调用前端地址(注意,调用8000端口)http://localhost:8000/ureport/preview?_u=p,发现参数可以传递到后端。

到这一步就比较尴尬了。同一地址,使用postman请求,前端代理可以把URL完整传递到后端。使用浏览器请求,前端代理不发送URL参数到后端。

经过比对和测试,发现浏览器发送请求时,其header头的Accept内容为“text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7”。当使用postman发送请求时,其header头的Accept内容为“*/*”

跟踪了代理的rewrite方法,发现使用浏览器访问时,传入的path是不带参数的。阅读vite的部分源码,并结合查询到的一些资料,发现在配置代理时,除了常规的target、rewrite以外,还可以配置
configure和bypass

源码如下:

export declare interface ProxyOptions extends HttpProxy.ServerOptions {
    /**
     * rewrite path
     */
    rewrite?: (path: string) => string;
    /**
     * configure the proxy server (e.g. listen to events)
     */
    configure?: (proxy: HttpProxy.Server, options: ProxyOptions) => void;
    /**
     * webpack-dev-server style bypass function
     */
    bypass?: (req: http.IncomingMessage, res: http.ServerResponse, options: ProxyOptions) => void | null | undefined | false | string;
}

可以看到,configure和bypass方法,都可以取得一个req变量,其类型是http.IncomeingMessage

跟踪req对象,发现其存在两个属性:

  • req.client.originalUrl,其属性值为/ureport/preview?_u=p
  • req.url,其属性值为/ureport/preview

到这里,终于有了些许思路。我们最终的目的就是利用前端代理来访问ureport的预览界面,只要解决了前端代理的参数传递问题,就可以直接预览了。

因此,目前的思路就是让代理直接转发req.client.originalUrl就好。

因此我们改造一下定义代理的配置语句,增加bypass配置:

'/ureport': {
    target: envConfig.secondUrl,
    changeOrigin: true,
    rewrite: path => path.replace(new RegExp(`^${envConfig.urlPattern}`), '/ureport'),
    bypass: (req, res, proxyOption) => {
      req.url = req.originalUrl;
    }
}

在这里,我们在代理转发请求之前,将他本来要转发的地址强行替换为原url地址。

此时请求的参数可以转发到后端,预览页面成功打开。

5. 总结

1.虽然在分析过程中,知道了浏览器请求和postman请求时,由于Header中的Accept不同导致了不同的结果,但最终还是没有精力去找具体是哪段代码导致了这个差异。换句话说,vite用到的http-proxy组件在不同情况下对URL地址进行了不同的处理,如果有知道原理的大神可以留个言。

2.vue2下没测出来类似的问题,等有时间要查查vue2前端代理用的组件和vue3有什么不同。

3.nginx的代理可以完美转发请求,不存在丢参数的情况。

4.我们最终在bypass中强行修改了代理转发的url地址,并成功打开了页面,但这种做法有违http-proxy的设计原理。目前不清楚这种做法会造成什么其他未知后果,不过想来问题不大,因为bypass只对"/ureport"开头的请求进行了代理,不影响系统的其他请求。

5.这个小问题排查了两三天,看见很多关于ureport2集成的文章下面都有人问这个预览的问题如何解决。所以就临时整理思路写了这篇文章,问题排查部分写的可能比较乱,凑合看吧。以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue3实现多个表格同时滚动并固定表头

    vue3实现多个表格同时滚动并固定表头

    这篇文章主要给大家介绍了vue3中多个表格怎么同时滚动并且固定表头,文中通过代码示例给大家讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2024-02-02
  • vue内置组件component--通过is属性动态渲染组件操作

    vue内置组件component--通过is属性动态渲染组件操作

    这篇文章主要介绍了vue内置组件component--通过is属性动态渲染组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • vue3+vite中使用vuex的具体步骤

    vue3+vite中使用vuex的具体步骤

    在vue3+vite创建的项目中使用vuex,要注意的是vite有部分写法和之前的webpack是不同的,这篇文章主要介绍了vue3+vite中使用vuex的具体步骤,需要的朋友可以参考下
    2022-11-11
  • vue项目中使用lib-flexible解决移动端适配的问题解决

    vue项目中使用lib-flexible解决移动端适配的问题解决

    这篇文章主要介绍了vue项目中使用lib-flexible解决移动端适配的问题解决,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • vue项目部署上线遇到的问题及解决方法

    vue项目部署上线遇到的问题及解决方法

    这篇文章主要介绍了vue项目部署上线遇到的问题及解决方法,本文给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2018-06-06
  • vue3的动态组件是如何工作的

    vue3的动态组件是如何工作的

    这篇文章主要介绍了vue3的动态组件是如何工作的,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下
    2021-03-03
  • 深入了解Vue组件七种通信方式

    深入了解Vue组件七种通信方式

    vue组件通信的方式,这是在面试中一个非常高频的问题。其实Vue组件的通信方式除了props和 $emit还有很多,本文将对vue组件通信方式进行一下总结,感兴趣的可以学习一下
    2021-12-12
  • Vue this.$router.push(参数)实现页面跳转操作

    Vue this.$router.push(参数)实现页面跳转操作

    这篇文章主要介绍了Vue this.$router.push(参数)实现页面跳转操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • 深入理解vue中的 slot-scope=“scope“

    深入理解vue中的 slot-scope=“scope“

    这篇文章主要介绍了理解vue中的 slot-scope=“scope“,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • Electron 如何调用本地模块的方法

    Electron 如何调用本地模块的方法

    这篇文章主要介绍了Electron 如何调用本地模块的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02

最新评论