<!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 = {
|
// http://localhost:8001/grf/%E4%BA%A7%E5%93%81%E6%B5%81%E4%BC%A0%E5%8D%95A5.grf
|
// report: urlAddRandomNo("../grf/产品流传单A5.grf"),
|
report: urlAddRandomNo("http://121.196.36.24:8001/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>
|
|
<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.ashx?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.ashx?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.ashx?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>
|
