Web 编辑器-如何实现保存文件到本地及打开本地文件

在线设计器在初始状态下不包含新建，保存，打开等按钮，因为每个项目的业务场景不同，因此我们将该方法都开放出来，让用户根据自己的需要去定制这些方法，实现与业务逻辑的切合。

但因为很多开发人员需要自己在本地测试在线设计器的保存按钮，常常需要将报表文件保存到本地并打开本地的JSON 文件。
本文主要描述了如何通过 designer.setActionHandlers() 重写OnSave 和OnOpen()

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

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

添加报表设计器的宿主元素
在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);            
    }      
});

Web 编辑器-如何实现保存文件到本地及打开本地文件

LanLan_Guo

引用和评论

纯JS集成报表系列教程7-样式自定义

通过 SAP 官方帮助网站自学 SAP 业务知识的一种办法

一软一硬：记录我的工作电脑两次出现性能问题的分析思路和解决过程

这才是真正的IntelliJ IDEA在线版

Obsidian学习笔记-Annotator插件的安装与使用

什么是半角字符和全角字符

一键在本地部署代码大模型系列教程——Ollama篇