在线设计器在初始状态下不包含新建，保存，打开等按钮，因为每个项目的业务场景不同，因此我们将该方法都开放出来，让用户根据自己的需要去定制这些方法，实现与业务逻辑的切合。
但因为很多开发人员需要自己在本地测试在线设计器的保存按钮，常常需要将 表文件保存到本地并打开本地的JSON 文件
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="微软雅黑"><linkrel="stylesheet"href="https://cdn.grapecity.com/activereportsjs/2.latest/styles/ar-js-ui.css"type="text/css"/><linkrel="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 表控件| 下载试用
ActiveReports 是一款专注于 .NET 平台的 表控件，全面满足 HTML5 / WinForm / ASP.NET / ASP.NET MVC / WPF 等平台下 表设计和开发工作需求，作为专业的 表工具为全球超过 300,000 开发人员提供了全面的 表开发服务。
如果您对我们的产品还有任何疑问，欢迎咨询在线客服>>
标签：
声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！