文章末尾点击“了解详情”获得工具
在线设计师在初始状态下不包含“新建”、“保存”、“打开”等按钮。因为不同的项目有不同的业务场景,所以将所有这些方法都开放,以便用户可以根据业务逻辑进行自定义。
但因为很多开发人员需要自己在本地测试在线设计器的保存按钮,常常需要将报表文件保存到本地并打开本地的JSON 文件
本文主要描述了如何通过 de() 重写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=";
type="text/css"
/>
<link
rel="stylesheet"
href=";
type="text/css"
/>
<script src=";></script>
<script src=";></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.Ac("#designer-host"); </script></font>
5. 调用 de()
<font face="微软雅黑">de(
{
onCreate: function () {
const reportId = `NewReport${++}`;
return Promi({
definition: re,
id: reportId,
displayName: reportId,
}
);
},
onSave: function (info)
{
con(info);
const reportId = in || `NewReport${ + 1}`;
//获取报表文件并下载
const fileName = `NewReport${ + 1}.rdlx-json`;
const blob = new Blob([JSON.stringify)],{type:"application/json"})
(fileName, blob);
++;
return Promi({displayName: reportId});
},
onOpen:function()
{
const input=document.createElement("input");
in;input";
in;file";
in;
in('change',() => {
let files = document.getElementById("input").files;
i){
let file = files[0];
let reader = new FileReader();
reader.onload = function(){
con);
};
reader.readAsText(file);
}
});
if( document.getElementById('input')){
$("#input").click();
}
document.body.appendChild(input);
de(input);
}
});
</font>
本文转载自葡萄城官网
1.《报表工具ActiveReports在线设计器集成 - 实现保存报表到本地》援引自互联网,旨在传递更多网络信息知识,仅代表作者本人观点,与本网站无关,侵删请联系页脚下方联系方式。
2.《报表工具ActiveReports在线设计器集成 - 实现保存报表到本地》仅供读者参考,本网站未对该内容进行证实,对其原创性、真实性、完整性、及时性不作任何保证。
3.文章转载时请保留本站内容来源地址,https://www.lu-xu.com/guonei/1959392.html