关于前端:如何实现前端可视化编辑器保存到本地功能

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

但因为很多开发人员须要本人在本地测试在线设计器的保留按钮，经常须要将报表文件保留到本地并关上本地的 JSON 文件。
本文次要形容了如何通过 designer.setActionHandlers() 重写 OnSave 和 OnOpen()

<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>

<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>

在 body 标签中增加 div 元素。

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

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

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

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

调用 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>

关于前端:如何实现前端可视化编辑器保存到本地功能

1. 创立 HTML 页面

2. 装置 ActiveReportsJS

3. 增加报表设计器的宿主元素

4. 初始化设计器