在线设计器在初始状态下不包含新建,保存,打开等按钮,因为每个项目的业务场景不同,因此我们将该方法都开放出来,让用户根据自己的需要去定制这些方法,实现与业务逻辑的切合。
但因为很多开发人员需要自己在本地测试在线设计器的保存按钮,常常需要将报表文件保存到本地并打开本地的JSON 文件
本文主要描述了如何通过 designer.setActionHandlers() 重写OnSave 和OnOpen()
1. 创建 HTML 页面
<font face="微软雅黑"><!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>ARJS Report designer</title> <meta name="description" content="ARJS Report designer" /> <meta name="author" content="GrapeCity" /> </head> <body></body> </html></font>
2. 安装 ActiveReportsJS
<font face="微软雅黑"><link rel="stylesheet" href="https://cdn.grapecity.com/activereportsjs/2.latest/styles/ar-js-ui.css" type="text/css" /> <link rel="stylesheet" href="https://cdn.grapecity.com/activereportsjs/2.latest/styles/ar-js-designer.css" type="text/css" /> <script src="https://cdn.grapecity.com/activereportsjs/2.latest/dist/ar-js-core.js"></script> <script src="https://cdn.grapecity.com/activereportsjs/2.latest/dist/ar-js-designer.js"></script></font>
3. 添加报表设计器的宿主元素
在body 标签中添加 div 元素。
<font face="微软雅黑"><div id="designer-host"></div></font>
在 head 标签中添加designer-host 元素
<font face="微软雅黑"><style> #designer-host { margin: 0 auto; width: 100%; height: 100vh; }</style></font>
4. 初始化设计器
<font face="微软雅黑"><script> var designer = new GC.ActiveReports.ReportDesigner.Designer("#designer-host"); </script></font>
5. 调用 designer.setActionHandlers()
<font face="微软雅黑">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); } }); </font>
ActiveReports 是一款专注于 .NET 平台的报表控件,全面满足 HTML5 / WinForm / ASP.NET / ASP.NET MVC / WPF 等平台下报表设计和开发工作需求,作为专业的报表工具为全球超过 300,000 开发人员提供了全面的报表开发服务。
本文转载自葡萄城官网