在线设计器在初始状态下不包含新建，保存，打开等按钮，因为每个项目的业务场景不同，因此我们将该方法都开放出来，让用户根据自己的需要去定制这些方法，实现与业务逻辑的切合。
但因为很多开发人员需要自己在本地测试在线设计器的保存按钮，常常需要将报表文件保存到本地并打开本地的JSON 文件。 本文主要描述了如何通过 designer.setActionHandlers() 重写OnSave 和OnOpen()。
1. 创建HTML 页面
`
<title>ARJS Report designer</title>
<meta name="description" content="ARJS Report designer" />
<meta name="author" content="GrapeCity" />
2. 安装 ActiveReportsJS
`
`3. 添加报表设计器的宿主元素
在body 标签中添加 div 元素。
在 head 标签中添加designer-host 元素
4. 初始化设计器
<script> var designer = new GC.ActiveReports.ReportDesigner.Designer("#designer-host"); </script>
5. 调用 designer.setActionHandlers(）
{
onCreate: function () {
const reportId = `NewReport${++this.counter}`;
return Promise.resolve({
definition: reportTemplates.CPL,
id: reportId,
displayName: reportId,
}
);
},
onSave: function (info)
{
console.log(info);
const reportId = info.id || `NewReport${this.counter + 1}`;
//获取报表文件并下载
const fileName = `NewReport${this.counter + 1}.rdlx-json`;
const blob = new Blob([JSON.stringify(info.definition)],{type:"application/json"})
this.download(fileName, blob);
this.counter++;
return Promise.resolve({displayName: reportId});
},
onOpen:function()
{
const input=document.createElement("input");
input.id="input";
input.type="file";
input.style.opacity=0;
input.addEventListener('change',() => {
let files = document.getElementById("input").files;
if(files.length){
let file = files[0];
let reader = new FileReader();
reader.onload = function(){
console.log(this.result);
};
reader.readAsText(file);
}
});
if( document.getElementById('input')){
$("#input").click();
}
document.body.appendChild(input);
designer.setReport(input);
}
});
