本帖最后由 Eden.Sun 于 2024-8-22 11:40 编辑
AR18 中增强了 ASP.NET 中间件，为开发人员简化了 ActiveReports.NET Web 组件的集成。简化了将报告功能嵌入到 Web 应用程序中的过程，可以更流畅、更高效的将报表的集成到我们的项目中。为开发人员带来更加良好的使用体验。
我们以VueJS应用程序（ASP.NET Core）嵌入ActiveReports WebDesigner组件。来介绍 Vue、ASP.NET Core 和 JavaScript 模板来创建应用程序。
1. 创建项目
在Visual Studio中创建一个 Vue and ASP.NET Core 项目：
2. 添加AR18包
项目创建完成之后，还需要在项目中引入 AR18 的两个包，下面只有Designer的添加方式，需要按照相同的方法把Viewer也添加进来：
MESCIUS.ActiveReports.Aspnetcore.Designer // 报表设计器
MESCIUS.ActiveReports.Aspnetcore.Viewer // 报表查看器
然后在项目的根目录下添加一个resources 目录，后续如果有需要查看的报表文件，也都统一放在这个目录下。我们后面通过WEB设计器创建的报表文件，也会保存到 resources 目录下面：
3. 修改 Program.cs
修改 Program.cs 文件，修改的内容如下
using GrapeCity.ActiveReports.Aspnetcore.Designer;
using GrapeCity.ActiveReports.Aspnetcore.Viewer;
using GrapeCity.ActiveReports.Web.Designer;
var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddReportViewer();
builder.Services.AddReportDesigner();
builder.Services.AddMvc(options => options.EnableEndpointRouting = false);
var app = builder.Build();
app.UseHttpsRedirection();
if (!app.Environment.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
var ResourcesRootDirectory =
new DirectoryInfo(Path.Combine(Directory.GetCurrentDirectory(), "resources"));
app.UseReportViewer(config => config.UseFileStore(ResourcesRootDirectory));
app.UseReportDesigner(config => config.UseFileStore(ResourcesRootDirectory, null, FileStoreOptions.NestedFoldersLookup));
app.UseDefaultFiles();
app.UseStaticFiles();
app.Run();
3. 修改 package.json
然后再项目中的 package.json 文件中增加 AR18 的依赖，这里的版本和前面安装的AR18的包版本保持一致即可：
4. 创建 WebDesigner.vue 文件
在 src\components 目录下，创建 WebDesigner.vue 文件，，代码如下：
<template>
<div id="ar-web-designer"></div>
</template>
<script>
import { arWebDesigner } from '@mescius/activereportsnet-designer';
import { createViewer } from '@mescius/activereportsnet-viewer';
export default {
mounted() {
let serverUrl = 'https://localhost:7226';
arWebDesigner.create('#ar-web-designer', {
rpx: { enabled: true },
appBar: { openButton: { visible: true } },
editor: { showGrid: false },
data: { dataSets: { visible: true, canModify: true }, dataSources: { canModify: true } },
server: {
url: serverUrl + '/api'
},
preview: {
openViewer: (options) => {
if (this.viewer) {
this.viewer.openReport(options.documentInfo.id);
return;
}
this.viewer = createViewer({
element: '#' + options.element,
renderFormat: 'svg',
reportService: {
url: serverUrl + '/api/reporting',
},
reportID: options.documentInfo.id
});
}
}
});
}
}
</script>
<style>
#ar-web-designer {
height: 100vh;
float: right;
width: 100%;
}
</style>
5. 修改 App.vue 文件
打开 src 文件夹中的“App.vue”，并将其默认内容替换为以下代码：
<template>
<div class="main">
<WebDesigner />
</div>
</template>
<script>
import "@mescius/activereportsnet-viewer/dist/jsViewer.min.css";
import "@mescius/activereportsnet-designer/dist/web-designer.css";
import WebDesigner from './components/WebDesigner.vue';
export default {
name: 'app',
components: {
WebDesigner
},
methods: {
}
}
</script>
<style>
.main {
width: 100%;
overflow-x: hidden
}
</style>
5. 禁止浏览器启动
要禁用浏览器启动，请在“launchSettings.json”中将“launchBrowser”设置为“false”
6. 查看预览
至此就完成了在VUE项目中集成报表设计器的功能，启动项目，就可以看到效果：
在 AR18 中，针对于当前流行的WEB项目框架的集成都做了很大的提升，不仅仅是Vue，还有React、angular等都做了流程简化、功能提升。感兴趣的小伙伴快来试试吧。
|
陕公网安备：61019002000258 |
隐私政策 |
网站地图