ActiveReports 18 新特性-更便捷的WEB集成

    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等都做了流程简化、功能提升。感兴趣的小伙伴快来试试吧。

为什么不能全屏的

tangke888 发表于 2024-6-8 00:01
为什么不能全屏的

这个是一个css文件的样式导致的，您根据实际改一下就行，附件是我改的一版，您可以试试：

Eden.Sun 发表于 2024-6-11 14:24
这个是一个css文件的样式导致的，您根据实际改一下就行，附件是我改的一版，您可以试试：

可以了，谢谢

又有一个新问题，报表不能新增和保存

您开个贴把您遇到的问题和报错内容都上传描述一下。根据您的具体情况，看看怎么处理。