VueWebApi/obj/Release/Package/PackageTmp/Grid/webapp-ws-tutorial.htm
¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,152 @@
<!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"></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() {
            //参数具体说明请参考帮助文档中的“WEB报表(B/S报表)->WEB报表客户端->启动参数说明”部分
            var args = {
                report: urlAddRandomNo("../grf/产品流传单A5.grf"),
                data:
                {
                    "recordset": [
                        {
                            "seq": "1",
                            "wo_code": "PO202206280001_1",
                            "partcode": "1403-001-0001",
                            "partname": "圆钢F45MnVSφ20",
                            "partspec": "φ20",
                            "routename": "测试工艺路线1",
                            "orderqty": 166,
                            "lm_user": "Admin",
                            "lm_date": "2022-06-30",
                            "stepcode": "Step01",
                            "stepname": "测试工序一",
                            "plan_qty1": 166,
                            "good_qty": 0,
                            "ng_qty": 0,
                            "stepqrcode":"PO202206280001_1;Step01"
                        },
                        {
                            "seq": "2",
                            "wo_code": "PO202206280001_1",
                            "partcode": "1403-001-0001",
                            "partname": "圆钢F45MnVSφ20",
                            "partspec": "φ20",
                            "routename": "测试工艺路线1",
                            "orderqty": 166,
                            "lm_user": "Admin",
                            "lm_date": "2022-06-30",
                            "stepcode": "Step02",
                            "stepname": "测试工序二",
                            "plan_qty1": 166,
                            "good_qty": 0,
                            "ng_qty": 0,
                            "stepqrcode": "PO202206280001_1;Step02"
                        }
                    ]
                },
                //data: "../data/DataCenter.ashx?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: "preview",//print
                //showOptionDlg: true, //如果不显示打印对话框而直接打印,将此行注释去掉即可
                report: urlAddRandomNo("../grf/报工产出标签.grf"),
                //data: "../data/DataCenter.ashx?data=Customer"
                data:
                {
                    "recordset": [
                        {
                            "wo_code": "PO202206280001_1",
                            "partcode": "1403-001-0001",
                            "partname": "圆钢F45MnVSφ20",
                            "qty": "100",
                            "next_stepname": "测试工序2",
                            "qrcode": "PO202206280001_1;Step02"
                        },
                        {
                            "wo_code": "PO202206280001_1",
                            "partcode": "1403-001-0001",
                            "partname": "圆钢F45MnVSφ20",
                            "qty": "100",
                            "next_stepname": "测试工序2",
                            "qrcode": "PO202206280001_1;Step02"
                        }
                    ]
                }
            };
            webapp_ws_ajax_run(args);
        }
    </script>
</body>
</html>