葡萄城报表的在线设计器是一个完全基于Web浏览器的报表设计器，报表设计人员不必安装即可使用，随时随地都可以设计报表。
在线报表设计器的默认打开方式是从报表管理门户中启动。如果想要允许用户从业务系统的网页中启动葡萄城报表的在线设计器，可以将在线设计器集成到业务系统的网页中。
（1）实现原理
要将葡萄城报表的在线设计器集成到业务系统的页面，首先需要调用葡萄城报表的REST API，实现用户登录，以获得具备报表设计权限的令牌（Token）。
实现用户登录之后，可以用网址（即URL）直接打开在线设计器，从而实现用户从业务系统页面直接启动在线设计器的效果。
在线设计器的URL有两种形式，分别针对两种设计场景：
- 开始一个新报表的设计： http://localhost:8080/Designer/#New
- 打开一个旧报表进行修改： http://localhost:8080/Designer/<ReportId>
其中，ReportId是指报表的ID，可从报表查看页面的URL中获得。从报表管理门户页面查看报表时，浏览器的URL栏内容应为如下内容：
http://localhost:8080/Default.aspx?ReportId=5a2c0a51ff122c02dc9fdc01&ReportAction=Preview&portal=1&ReportName=%E4%BA%BA%E5%91%98%E7%BB%93%E6%9E%84%E5%88%86%E6%9E%90&mobile=0
其中的 ReportId=5a2c0a51ff122c02dc9fdc01 参数值（5a2c0a51ff122c02dc9fdc01）就是报表的ID。
（2）实现步骤
首先，请将下面的文件下载，保存到葡萄城报表安装目录下的Site子目录中（默认路径为 C:\葡萄城报表\Site）。
然后，在业务系统页面代码中，以POST方式调用WebDesigner.ashx，在表单数据中提供用户登录信息和报表ID等信息。如果是设计新报表，仅提供用户登录信息即可。
下面是一个HTML页面+JavaScript代码的示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>葡萄城报表集成</title>
<script type=text/javascript>
function post(URL, PARAMS) {
var temp = document.createElement("form");
temp.action = URL;
temp.method = "post";
temp.style.display = "none";
for (var x in PARAMS) {
var opt = document.createElement("textarea");
opt.name = x;
opt.value = PARAMS[x];
temp.appendChild(opt);
}
document.body.appendChild(temp);
temp.submit();
return temp;
}
</script>
</head>
<body>
<div class="top">
这个示例展示业务系统以POST方式集成葡萄城报表的在线设计器。<br/>
</div>
<br />
<input id="Button1" type="button" value="创建新报表" onclick="return post('http://localhost:8080/WebDesigner.ashx', { username: 'admin', password: 'adminPassword' });" />
<br /> <br />
<input id="Button2" type="button" value="修改旧报表" onclick="return post('http://localhost:8080/WebDesigner.ashx', { username: 'admin', password: 'adminPassword', reportid: '5a2c0a51ff122c02dc9fdc01' });" />
<br />
</body>
</html>
将上述文本以UTF-8编码方式保存为一个html文件，然后用浏览器打开，可以看到一个网页：
点击其中的【创建新报表】，可启动在线设计器，开始一个新建报表的设计。
点击【修改旧报表】，可启动在线设计器，并且打开指定的报表，以便对原有设计进行修改。
注意：
上述示例中将用户名和登录密码从浏览器端Post到服务器端，如果担心由此引发的安全性问题，可在业务系统的后台调用葡萄城报表的REST API，获取令牌，再将令牌放到会话（Session）中，然后在WebDesigner.ashx文件中，不再要求用户登录信息，直接使用这个令牌即可。