ActiveReports在线设计器集成教程 - 如何实现保存报表到本地及打开本地报表

转帖|使用教程|编辑:龚雪|2021-06-21 09:46:13.467|阅读 28 次

概述:本文主要描述了如何实现保存报表到本地及打开本地报表,欢迎下载最新版ActiveReports体验!

# 31款JAVA开发必备控件和工具 # 企业数字化建设合规无风险[专题]

相关链接:

点击获取ActiveReports v15.0下载

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

但因为很多开发人员需要自己在本地测试在线设计器的保存按钮,常常需要将报表文件保存到本地并打开本地的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 报表控件| 下载试用

ActiveReports 是一款专注于 .NET 平台的报表控件,全面满足 HTML5 / WinForm / ASP.NET / ASP.NET MVC / WPF 等平台下报表设计和开发工作需求,作为专业的报表工具为全球超过 300,000 开发人员提供了全面的报表开发服务。

本文转载自葡萄城官网

如果您对我们的产品还有任何疑问,欢迎咨询在线客服>>


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至hey@evget.com

文章转载自:葡萄城

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
在线咨询
联系我们
TOP
在线客服系统
live chat