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 中运行以下命令，从 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">
<!-- No Virtual Directory -->
<base href="/">
<!-- designer-related css -->
<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>
<!-- designer-related js -->
<script src="web-designer.js"></script>
<!-- designer root div -->
<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 将在您的浏览器中打开
页:
[1]