锐浪报表+客户端+WebSocket并ajax方式(最推荐方式)

最新推荐文章于 2023-06-06 08:48:16 发布
最新推荐文章于 2023-06-06 08:48:16 发布
阅读量2.7k 收藏 9
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38961138/article/details/103489002
版权

记录下

 

URL协议方式不支持需要Cookie与Session会话的URL，另数据通讯方式是单向的，在报表任务完成后不能给WEB网页发送通知消息。

 

WebSocket方式是利用浏览器的WebSocket通讯功能与WEB报表客户端互相传递数据，WEB报表客户端是一个WebSocket的伺服服务器。对于有Cookie与Session会话的URL，可以采用ajax方式先把数据在网页中获取到，然后再传递给WEB报表客户端，这样就实现了对有Cookie与Session的报表支持。

 

 

<!DOCTYPE html>
<html>
<head>
    <title>WEB报表客户端使用教程(WebSocket) - 锐浪WEB报表</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Description" content="锐浪HTML5报表应用WEB报表客户端实现打印与数据导出。" />
    <meta name="Keywords" content="WEB报表,WEB打印,HTML5报表,WEB报表客户端" />
    <script src="grwebapp.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
        function window_onload() {
            //*这句特别重要*：只有在WEB报表客户端程序后，才能进行WebSocket通讯
            //如果WEB报表客户端程序为开机自启动，以下调用应该去掉。更多说明请参考帮助“WEB报表(B/S报表)->WEB报表客户端->部署与安装”部分中与谷歌Chrome浏览器的相关说明
            webapp_urlprotocol_startup(); //启动WEB报表客户端程序，以便侦听接受 WebSocket 数据
        }

        //消息响应函数，接受WEB报表客户端执行完打印与数据导出等任务回发的消息
        //如果不要响应任务执行完消息，此函数可以不用定义，直接去掉即可。
        function webapp_onmessage(event) {
            var message = JSON.parse(event.data);

            //在向打印机发送完打印数据后响应的消息，在函数体中完成自己的任务
            function OnPrintEnd() {
                var msg = "报表已经打印，输出打印机：" + message.PrinterName;
                if (message.reportid) {
                    msg += "\r\nreportid = " + message.reportid;
                }
                alert(msg);
            }

            //在执行了数据导出任务后响应的消息，在函数体中完成自己的任务
            function OnExportEnd() {
                var msg = "数据导出已经完成，导出文件：" + message.FileName;
                if (message.reportid) {
                    msg += "\r\nreportid = " + message.reportid;
                }
                alert(msg);
            }

            //alert(event.data);
            if (message.event == "PrintEnd") {
                OnPrintEnd();
            }
            else if (message.event == "ExportEnd") {
                OnExportEnd();
            }
        }
    </script>
</head>
<body onload="window_onload()">
    <h1>锐浪WEB报表客户端使用教程</h1>
    <h3><a href="webapp-overview.htm">关于锐浪WEB报表客户端</a></h3>
    
    <h3>特别提示：以下链接点击无响应，请下载安装<a href="webapp-download.htm">WEB报表客户端</a></h3>

    <h3>起步例子</h3>
    <p><a href='javascript:ws_ajax_preview();'>打印预览(AJAX)</a>通过AJAX方式获取报表模板与报表数据</p>
    <script language="javascript" type="text/javascript">
        function ws_ajax_preview() {
            var args = {
                report: urlAddRandomNo("/grf/1a.grf"),
                data: "/data/DataCenter.jsp?data=Customer",
                //dataUrlParams: "如果data参数为URL，且其需要额外的参数数据，则定义在此参数中", //例子演示不需要，所以注释掉
                type: "preview",
            };

            webapp_ws_ajax_run(args);
        }
    </script>

    <p> <a href='javascript:ws_ajax_print();'>打印(AJAX)</a>通过AJAX方式获取报表模板与报表数据</p>
    <script language="javascript" type="text/javascript">
        function ws_ajax_print() {
            var args = {
                type: "print",
                //showOptionDlg: false, //如果不显示打印对话框而直接打印，将此行注释去掉即可
                report: urlAddRandomNo("/grf/1a.grf"),
                data: "/data/DataCenter.jsp?data=Customer"
            };

            webapp_ws_ajax_run(args);
        }
    </script>

    <p><a href='javascript:ws_ajax_export_xls();'>导出Excel(AJAX)</a>通过AJAX方式获取报表模板与报表数据</p>
    <script language="javascript" type="text/javascript">
        function ws_ajax_export_xls() {
            var args = {
                type: "xls",
                report: urlAddRandomNo("/grf/1a.grf"),
                data: "/data/DataCenter.jsp?data=Customer",
                reportid: "1a" //这个参数不是必须的，只是用于回发消息标识报表身份
            };

            webapp_ws_ajax_run(args);
        }
    </script>

    <h3>自定义打印参数</h3>
    <p> <a href='javascript:print_arguments();'>自定义打印参数</a>：指定打印机，设置逐份打印与打印份数。</p>
    <script language="javascript" type="text/javascript">
        function print_arguments() {
            var args = {
                type: "print",   //如果是要进行打印，将 type 设置为 print
                report: urlAddRandomNo("/grf/1a.grf"),
                data: "/data/DataCenter.jsp?data=Customer",
                PrinterName: "Microsoft Print to PDF", //指定要输出的打印机名称
                Collate: false,  //不按逐份方式打印
                Copies: 5        //共打印5份
            }

            webapp_ws_ajax_run(args);
        }
    </script>
    
    <p> <a href='javascript:export_xls_custom();'>自定义导出Excel</a>：设置合适的选项参数，将数据导出为连续的表格，页眉页脚不导出，不显示导出参数对话框等。</p>
    <script language="javascript" type="text/javascript">
        function export_xls_custom() {
            var args = {
                report:urlAddRandomNo("/grf/1a.grf"),
                data: "/data/DataCenter.jsp?data=Customer",
                type: "xls",
                ExportPageBreak: false,
                ExportPageHeaderFooter: false,
                SameAsPrint: false,
                showOptionDlg: false,  //指定不显示导出选项对话框
                filename: "d:\\temp\\gridreport.xls", //指定导出的文件路径与文件名
                //open: false  //指定导出后不自动打开文件
            }

            webapp_ws_ajax_run(args);
        }
    </script>

    <h3>更多应用方式</h3>
    
    <p><a href='javascript:ws_data_from_string();'>打印预览(报表数据来自字符串)</a>：通过WebSocket直接将网页中的字符串数据传递给WEB报表客户端。</p>
    <script language="javascript" type="text/javascript">
        function ws_data_from_string() {
            var args = {
                type: "preview", //设置不同的属性可以执行不同的任务，如：preview print pdf xls csv txt rtf img grd
                report: urlAddRandomNo("/grf/1a.grf"),
                //实际应用中，data应该为程序中通过各种途径获取到的数据，最后要将数据转换为报表需要的XML或JSON格式的字符串数据
                data:"<xml>" +
                    "<row><CustomerID>HUNGC</CustomerID><CompanyName>五金机械</CompanyName><ContactName>苏先生</ContactName><ContactTitle>销售代表</ContactTitle></row>" +
                    "<row><CustomerID>CENTC</CustomerID><CompanyName>三捷实业</CompanyName><ContactName>王先生</ContactName><ContactTitle>市场经理</ContactTitle></row>" +
                    "<row><CustomerID>CACTU</CustomerID><CompanyName>威航货运</CompanyName><ContactName>刘先生</ContactName><ContactTitle>销售代理</ContactTitle></row>" +
                    "</xml>",
                    reportid: "ws_data_from_string" //这个参数不是必须的，只是用于回发消息标识报表身份
                };
            
            webapp_ws_ajax_run(args);
        }
    </script>

    <p><a href='javascript:ws_data_from_object();'>打印预览(报表数据来自JSON对象)</a>：通过WebSocket直接将网页中的JSON对象数据传递给WEB报表客户端。</p>
    <script language="javascript" type="text/javascript">
        function ws_data_from_object() {
            var args = {
                type: "preview", //设置不同的属性可以执行不同的任务，如：preview print pdf xls csv txt rtf img grd
                report: urlAddRandomNo("/grf/1a.grf"),
                //实际应用中，data应该为程序中通过各种途径获取到的数据，最后要将数据转换为报表需要的XML或JSON格式的字符串数据
                data:
                {
                    "recordset": [
                        {
                            "CustomerID": "ALFKI",
                            "CompanyName": "三川实业有限公司",
                            "ContactName": "刘小姐",
                            "Address": "大崇明路 50 号",
                            "City": "天津",
                            "Region": "华北",
                            "PostalCode": "343567",
                            "Phone": "(030) 30074321"
                        },
                        {
                            "CustomerID": "ANATR",
                            "CompanyName": "东南实业",
                            "ContactName": "王先生",
                            "Address": "承德西路 80 号",
                            "City": "天津",
                            "Region": "华北",
                            "PostalCode": "234575",
                            "Phone": "(030) 35554729"
                        }
                    ]
                },
                reportid: "ws_data_from_object" //这个参数不是必须的，只是用于回发消息标识报表身份
            };
            
            webapp_ws_ajax_run(args);
        }
    </script>

</body>
</html>

 

blogs_ken
关注
  • 1
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
c# 结合锐浪报表Grid++Report6 实现推送数据打印，代码简单易懂，写了一个案例给大家
04-20
c# 结合锐浪报表Grid++Report6 实现推送数据打印，代码简单易懂，写了一个案例给大家
HTML5报表统计静态页面
09-18
4. **WebSocket**：如果报表需要实时更新，可能用到WebSocket协议，它提供双向通信，使服务器能主动推送数据到客户端，实现数据的即时更新。 5. **媒体元素**：HTML5对音频和视频的支持使得在报表中嵌入多媒体资源...
RDLC报表
Mobidogs Blog
04-29 1161
                RDLC报表（一）                 RDLC报表（二）                 RDLC报表（三）                 RDLC报表（四）                 RDLC报表（五）                 RDLC报表（六）                 RDLC报表（七）                
如何在浏览器中打开webapp目录下的js文件进行调试
qq_30434271的博客
06-11 458
如何在浏览器中打开webapp目录下的js文件进行调试
javaweb 锐浪报表导出文件，并上传服务器解决方案
qq_40103997的博客
03-23 853
在开发时，遇到一个需求，需要将报告的PDF文件导出到服务器 在查看各个api，没有发现直接的方法，后来和同事探究了一个折中的方案 环境： 服务器：window10 javaweb项目 首先前端页面，实现将报表导出文件导出到本地，其中的地址 "Z:\"后面需要使用 var dataStr = JSON.stringify(r.data); // 获取控制部分报表控件的显示控制 var displayFlag = $.trim(r.data.data[0].displayFlag);
锐浪报表-实现导入导出
gaoCSDN996的博客
06-08 1487
锐浪报表-实现导入导出实现思路新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 实现思路 导出实现思路: 我们使用锐浪报表自带的导出功能导出 XX.grf 后,鼠标右键是可以像编辑文本一样编辑内容的.由此突发奇想,用记事本
webQQ(ext+asp.net)
02-26
【标题】"WebQQ(ext+asp.net)"是一个基于Ext JavaScript库和ASP.NET技术实现的Web版QQ客户端模拟项目。这个项目结合了强大的前端框架Ext JS和后端的ASP.NET平台，为用户提供了一种无需安装桌面应用程序即可在浏览器...
java报表开发
09-25
报表不仅需要在服务器端生成，还需要在客户端进行展示。这涉及HTML、JavaScript和CSS等前端技术，以及AJAX、Websocket等实现动态交互的方法。 10. **报表API与自定义扩展** 了解报表框架提供的API，可以方便地...
在线和实时统计在线人数
11-23
1. **Socket编程**：Java的Socket类是实现客户端和服务器之间通信的基础，通过建立Socket连接，服务器可以监听并接收来自客户端的连接请求，从而判断用户是否在线。每当一个用户连接到服务器，我们就增加在线人数；...
java开源包1
06-28
WebSocket4J 并未实现客户端通讯协议，所以不能用它来连接 WebSocket 服务器。 Struts验证码插件 JCaptcha4Struts2 JCaptcha4Struts2 是一个 Struts2的插件，用来增加验证码的支持，使用时只需要用一个 JSP 标签 ...
中国软件开发者的Web报表工具——Ming-WebReport
03-16
【好消息】 客户端为DHTML浏览方式的例子已经可以推出，敬请访问：http://www.soft2web.biz/WebReport/basicreport.asp，同时推出繁体中文版与英文版，届时欢迎本公司网站下载试用！http://www.soft2web.biz/WebReport/reportdownload.asp 【重要提示】 如果您是第一次试用该软件，请您在下载安装后先运行在线注册。如果由于其他原因，您无法注册成功，请先注册网站会员，并用安装组中的客户号工具生成客户号并发给我们，信中附带上您的会员账号，我们会尽快发给您license，谢谢您的合作与支持！ Ming-WebReport是深圳明宇科技有限公司研发的，功能强大且简单易用的专业Web报表开发工具。很好地解决了B/S架构软件中报表制作及预览、打印等难题，用它能轻松地完成复杂而美观的Web报表的制作、打印（包括套打），并能存取、分析、分享数据，以及转换、分发、管理报表，与国外同类报表工具相比，具有极高的性价比，而且更好地解决了中国式报表问题，是真正适合中国软件开发者的Web报表工具！ ??Ming-WebReport可以将报表紧密集成到ASP、.NET、J2EE等应用中，很好地做到了报表设计与应用程序开发的分离；支持多种类型数据源，包括：表、SQL、存储过程、XML，并支持ACCESS、SQL Server、Oracle、DB2、Sybase等多种数据库；可以运行于多种操作系统Windows、Unix、Linux以及多种Web平台，提供简繁体中文、英文等多个语种的版本，是一套完整的Web报表解决方案。 Ming-WebReport包括三个部分，Report Designer（报表设计器），用于设计制作报表；Report Engine（报表引擎），用于服务器端处理报表；Report Browser（报表浏览器），用于客户端浏览报表。 在这里有大量精美的典型报表和行业应用报表示例供您观赏，敬请访问：http://www.soft2web.com/webreport/index.htm
JAVA上百实例源码以及开源项目
01-03
　Tcp服务端与客户端的JAVA实例源代码，一个简单的Java TCP服务器端程序，别外还有一个客户端的程序，两者互相配合可以开发出超多的网络程序，这是最基础的部分。 递归遍历矩阵 1个目标文件，简单！ 多人聊天室 3...
Java导出Excel的各种尝试
12-22
- **Server-Sent Events (SSE)**：类似于WebSocket，但更简单，服务器向客户端发送实时更新，前端监听事件并做出反应。 - **Promises或者async/await**：在支持Promise的环境中，可以使用Promise来处理异步操作，...
AppMonitorWeb
05-25
为了实现异步数据通信，AppMonitorWeb可能会用到AJAX或Fetch API，用于向服务器发送请求并接收响应。理解这两个API的工作原理和使用方式，可以帮助我们了解AppMonitorWeb如何收集和上报数据。 五、性能分析 ...
Java Web动态图表编程
12-30
3. WebSocket：对于需要实时更新的图表，WebSocket提供了双向通信的能力，可以在服务器数据更新时即时推送到客户端。 四、实践应用 1. 数据可视化：在数据分析、监控系统或仪表盘应用中，动态图表可以帮助用户快速...
看看Angular有啥新玩法！手把手教你在Angular15中集成报表插件
葡萄城技术团队博客
06-06 669
Angular15中引入报表插件
URL后面追加随机数的意义
shenxiaomo1688的博客
06-24 2468
在做前端开发时，明明我们改了引用JS的代码，替换了图片，但是重新加载后，效果还是原来的。经过排查，发现是浏览器缓存导致的。起初，我想的办法是清除浏览器缓存。但是这个比较费劲。后来无意中发现，在URL后面追加时间戳或者随机数，这样浏览器每次都会以为是一个新的请求，而不会去读取缓存。具体实现是在原先链接后面加上下面的代码： 1、添加时间： ?new Date().getTime(); 2、添加随机数： ?number=Math.random(); 二者二选一。 ...
在Web中如何运用JavaScript实现打印功能
如果可以，我愿争取
06-13 849
概述：在Web中想用JavaScript实现打印功能，需要一个浏览器控件WebBrowser。WebBrowser是IE内置的浏览器控件，无需用户下载，只需要在页面简单的设置，就可以Dom方法获取到该对象. 本文将详细介绍如何运用WebBrowser实现打印功能。 在Web中想用JavaScript实现打印功能，需要一个浏览器控件WebBrowser。WebBrowser是IE内置的浏览器控件，
配置白名单 输入链接不用登陆直接访问 锐浪打印功能
qq_41438838的博客
09-09 500
配置白名单 输入链接不用登陆直接访问 锐浪打印功能
golang+gin+websocket客户端和服务端
最新发布
08-09
Golang中的Gin框架提供了一种简单而强大的方法来构建Web应用程序。与此同时，Golang标准库中的"net/http"包提供了构建WebSocket服务器和客户端的功能。 首先，我们来看一下如何使用Gin和WebSocket构建WebSocket服务器。首先，需要导入相关的包： ```go import ( "github.com/gin-gonic/gin" "github.com/gorilla/websocket" ) ``` 接下来，在Gin中创建一个WebSocket处理函数： ```go func WebSocketHandler(c *gin.Context) { upgrader := websocket.Upgrader{ ReadBufferSize: 1024, WriteBufferSize: 1024, } conn, err := upgrader.Upgrade(c.Writer, c.Request, nil) if err != nil { c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()}) return } for { messageType, message, err := conn.ReadMessage() if err != nil { c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()}) return } err = conn.WriteMessage(messageType, message) if err != nil { c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()}) return } } } ``` 上面的代码创建了一个基本的WebSocket处理函数。它使用WebSocket标准库中的Upgrader结构来处理升级连接并创建一个WebSocket连接。 然后，我们需要在Gin中设置路由来处理WebSocket请求： ```go router := gin.Default() router.GET("/ws", WebSocketHandler) ``` 以上代码将在根路径下创建一个WebSocket处理函数。 接下来，我们来看一下如何使用Golang和Gin构建WebSocket客户端。首先，我们需要导入所需的包： ```go import ( "github.com/gorilla/websocket" "net/http" ) ``` 然后，我们可以使用以下代码来创建一个WebSocket客户端： ```go func main() { c, _, err := websocket.DefaultDialer.Dial("ws://localhost:8080/ws", nil) if err != nil { log.Fatal("dial:", err) } defer c.Close() done := make(chan struct{}) go func() { defer close(done) for { _, message, err := c.ReadMessage() if err != nil { log.Println("read:", err) return } log.Printf("recv: %s", message) } }() ticker := time.NewTicker(time.Second) defer ticker.Stop() for { select { case <-done: return case <-ticker.C: err := c.WriteMessage(websocket.TextMessage, []byte("Hello, Server!")) if err != nil { log.Println("write:", err) return } } } } ``` 上面的代码创建了一个WebSocket客户端，它使用WebSocket标准库中的`DefaultDialer`结构来建立WebSocket连接。 以上就是使用Golang Gin和WebSocket构建WebSocket客户端和服务器的简单示例。这些代码可以帮助我们使用Gin和Golang的标准库来构建强大的Web应用程序，并处理WebSocket通信。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值