ActiveReports 16 新特性-纯 JavaScript 集成web设计器

登录

Activereports的web设计器支持纯技术集成，只需要引用对应的JS和CSS文件就可以快速创建一个web设计器
首先让我们使用 ActiveReports 创建一个 ASP.NET Core 应用程序并在 Web Designer 中呈现报表。
1、要使用 npm 包，您的项目必须包含package.json文件。在安装任何代码依赖项之前，打开工具菜单 > NuGet 包管理器并在包管理器中运行以下命令：

npm init -y

复制代码

2、接下来，在 Package Manager Console 中运行以下命令，从 [size=undefined]NPM 下载并安装与 Web Designer 相关的文件和文件夹。 Designer 文件/文件夹将下载到您的当前目录：.\node_modules\@grapecity\ar-designer\dist

npm install @grapecity/ar-designer

复制代码

3、复制以下设计器文件/文件夹并将其粘贴到示例项目wwwroot子文件夹中。如果您没有看到“wwwroot”文件夹，请创建具有相同名称的文件夹。

web-designer.css
web-designer.js
vendor folder

4、在解决方案资源管理器中，右键单击“wwwroot”文件夹并选择添加> 现有项。
添加 web-designer.css 和 web-designer.js 文件

5、在解决方案资源管理器中，右键单击“wwwroot”文件夹并选择添加> 新建项。
添加 Html页面
选择HTML Page项目类型，输入index.html并单击添加。

6、在解决方案资源管理器中，找到新增的index.html并修改其内容如下

<!DOCTYPE html>
<html>
<head>
<title>Web Designer Sample</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<base href="/">
<link rel="stylesheet" href="vendor/css/bootstrap.min.css" />
<link rel="stylesheet" href="vendor/css/fonts-googleapis.css" type="text/css">
<link rel="stylesheet" href="web-designer.css" />
</head>
<body>
<script src="web-designer.js"></script>
<div id="designer-id" style="width: 100%; height: 100%;"></div>
<script>
// create designer options
var designerOptions = GrapeCity.ActiveReports.WebDesigner.createDesignerOptions();
/* Optional: Save Report */
designerOptions.saveButton.visible = true;
/* Optional: Save Report As */
designerOptions.saveAsButton.visible = true;
/* Optional: Open Report */
designerOptions.openButton.visible = true;
/* Optional: Add/Edit/Remove Data Sets */
designerOptions.dataTab.dataSets.canModify = true;
/* Optional: Add/Edit/Remove Data Sources */
designerOptions.dataTab.dataSources.canModify = true;
// render designer application
GrapeCity.ActiveReports.WebDesigner.renderApplication('designer-id', designerOptions);
</script>
</body>
</html>

复制代码

7、运行，带有空白 RDL 报告的 Web Designer 将在您的浏览器中打开

		自动登录	找回密码
密码			立即注册

[ActiveReports] ActiveReports 16 新特性-纯 JavaScript 集成web设计器

本帖子中包含更多资源

0 个回复

圣诞拼拼乐

微信认证勋章

讲师达人

悬赏达人

元老葡萄