在线设计器在初始状态下不蕴含新建，保留，关上等按钮，因为每个我的项目的业务场景不同，因而咱们将该办法都凋谢进去，让用户依据本人的须要去定制这些办法，实现与业务逻辑的切合。

但因为很多开发人员须要本人在本地测试在线设计器的保留按钮，经常须要将报表文件保留到本地并关上本地的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 元素。

<div id="designer-host"></div>

在 head 标签中增加designer-host 元素

<style>  #designer-host {    margin: 0 auto;    width: 100%;    height: 100vh;  }</style>

4. 初始化设计器

<script>  var designer = new GC.ActiveReports.ReportDesigner.Designer("#designer-host");  </script>

  1. 调用 designer.setActionHandlers(）
    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>