DevExpress Reporting是.NET Framework下功能完善的報(bào)表平臺(tái)，它附帶了易于使用的Visual Studio報(bào)表設(shè)計(jì)器和豐富的報(bào)表控件集，包括數(shù)據(jù)透視表、圖表，因此您可以構(gòu)建無與倫比、信息清晰的報(bào)表。

 DevExpress Reporting控件日前正式發(fā)布了v24.1，新版本重點(diǎn)針對(duì)報(bào)表查看器的一系列功能進(jìn)行了全面升級(jí)等，歡迎下載最新版產(chǎn)品體驗(yàn)！

DevExpress技術(shù)交流群10：532598169      歡迎一起進(jìn)群討論

Reporting for Web

原生React報(bào)表查看器組件

原生React報(bào)表查看器組件利用了DevExpress Angular報(bào)表查看器的內(nèi)部架構(gòu)和相關(guān)的輔助技術(shù)，與基于JavaScript封裝器的解決方案相比，新版本實(shí)現(xiàn)了更好的用戶體驗(yàn)和性能。新的React報(bào)表查看器附帶了以下內(nèi)置的自定義功能：

自定義工具欄

JavaScript

'use client';
import React from 'react';
import ReportViewer, { Callbacks, RequestSettings } from 'devexpress-reporting-react/dx-report-viewer';
import { TemplateEngine } from 'devexpress-reporting-react/dx-report-viewer/core/template-engine';
import { ActionId } from 'devexpress-reporting/viewer/constants';
import { CustomAction } from 'devexpress-reporting/dx-webdocumentviewer';

import "devextreme/dist/css/dx.light.css";
import "@devexpress/analytics-core/dist/css/dx-analytics.common.css";
import "@devexpress/analytics-core/dist/css/dx-analytics.light.css";
import "devexpress-reporting/dist/css/dx-webdocumentviewer.css";
import styles from "./page.module.css";

export default function Home() {
const templateEngine = new TemplateEngine();
templateEngine.setTemplate('slideshow', () => (
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 24 24">
<polygon className="dxd-icon-fill" points="4,2 4,22 22,12 " />
</svg>
));

const handleCustomizeMenuActions = ({ sender, args }: { sender: any, args: any }) => {
let interval: any;
const action = new CustomAction({
text: "Run Slide Show",
imageTemplateName: "slideshow",
visible: true,
disabled: false,
selected: false,
clickAction: function () {
if (this.selected) {
clearInterval(interval);
this.selected = false;
return;
}
var model = sender.GetPreviewModel();
if (model) {
this.selected = true;
interval = setInterval(function () {
var pageIndex = model.GetCurrentPageIndex();
model.GoToPage(pageIndex + 1);
}, 2000);
}
}
});
args.Actions.push(action);

var highlightEditingFieldsAction = args.GetById(ActionId.HighlightEditingFields);
if (highlightEditingFieldsAction)
highlightEditingFieldsAction.visible = false;
};

return (
<main className={styles.main}>
<ReportViewer reportUrl="Report" templateEngine={templateEngine}>
<RequestSettings invokeAction="/DXXRDV" host="http://localhost:5065" />
<Callbacks CustomizeMenuActions={React.useCallback(handleCustomizeMenuActions,[])} />
</ReportViewer>
</main>
);
}

參數(shù)自定義

下面的示例代碼為參數(shù)編輯器聲明了一個(gè)自定義模板，并將驗(yàn)證規(guī)則應(yīng)用于NumberBox組件(用于編輯“Age”報(bào)告參數(shù)值)：

JavaScript

const CustomizeParameterEditor = ({data}: {data: IEditorViewModel}) => (
<NumberBox showSpinButtons={true} value={data.value} disabled={data.disabled}>
<Validator validationRules={data.validationRules}>
</Validator>
</NumberBox>
);

export default function Home() {
const templateEngine = new TemplateEngine();
templateEngine.setTemplate('custom-parameter-editor', CustomizeParameterEditor);

const handleCustomizeParameterEditors = React.useCallback((event: any): void => {
const parameter = event.args.parameter;
const info = event.args.info;
const curYear = new Date().getFullYear();
if (parameter.type === 'CustomParameterType') {
info.validationRules = info.validationRules || [];
info.validationRules.push({
type: 'range',
min: 1900,
max: curYear,
message: `The Birth Year parameter value should be in a range from 1900 to ${curYear}.`
});
info.editor.header = "custom-parameter-editor";
}
}, []);

return (
<main className={styles.main}>
<ReportViewer reportUrl="CustomParameterReport" templateEngine={templateEngine}>
<RequestSettings invokeAction="/DXXRDV" host="http://localhost:2119/" />
<Callbacks CustomizeParameterEditors={handleCustomizeParameterEditors} />
</ReportViewer>
</main>
);
}

原生Angular報(bào)表查看器

工具欄自定義API

在這個(gè)版本中， （報(bào)表查看器）允許您根據(jù)需要定制它的內(nèi)置工具欄，下面的代碼片段使用 事件處理程序隱藏工具欄項(xiàng)：

CustomizeMenuActions(event) {
var actionSearch = event.args.GetById(ActionId.Search);
if (actionSearch)
actionSearch.visible = false;
}

var highlightEditingFieldsAction = e.GetById(DevExpress.Reporting.Viewer.ActionId.HighlightEditingFields);
if (highlightEditingFieldsAction)
highlightEditingFieldsAction.visible = false;
}

下面的代碼片段使用相同的事件處理程序?qū)⒆远x導(dǎo)出選項(xiàng)添加到工具欄：

function CustomizeMenuActions(event) {
const actionExportTo = event.args.GetById(ActionId.ExportTo);
const newFormat = { format: 'NewFormat', text: 'New Format' };
if (actionExportTo) {
actionExportTo.events.on('propertyChanged', (args) => {
const formats = actionExportTo.items[0].items;
if (args.propertyName === 'items' && formats.indexOf(newFormat) === -1) {
formats.push(newFormat);
}
});
}
}

OnPush更改檢測(cè)策略支持

DevExpress v24.1還增加了對(duì)OnPush更改檢測(cè)策略的支持，Angular的OnPush變更檢測(cè)策略通過減少不必要的渲染周期和只在輸入引用發(fā)生變化時(shí)觸發(fā)變更檢測(cè)來提高性能。通過此更新，可以通過在@Component裝飾器中添加changeDetection屬性，將檢測(cè)策略從默認(rèn)更改為ChangeDetectionStrategy.OnPush，如下所示：

import { Component, ViewEncapsulation } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { DxReportViewerModule } from 'devexpress-reporting-angular';

@Component ({
selector: 'app-root',
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
standalone: true,
imports: [
CommonModule,
RouterOutlet,
DxReportViewerModule
],
templateUrl: './app.component.html',
styleUrls: [...]
})

export class AppComponent {
title = 'DXReportViewerSample';
reportUrl: string = 'TestReport';
hostUrl: string = '//localhost:5001/';
invokeAction: string = '/DXXRDV';
}

ASP. NET Core、Blazor、Angular的全新獨(dú)立參數(shù)面板組件

全新的Report Parameters Panel（報(bào)表參數(shù)面板）組件基于從后端提供的報(bào)表實(shí)例自動(dòng)為報(bào)表參數(shù)編輯器(包括關(guān)聯(lián)的分組)生成布局。

該組件解決了各種使用場(chǎng)景，包括需要以編程方式創(chuàng)建報(bào)表并將其導(dǎo)出或通過郵件發(fā)送，無需向最終用戶顯示其打印預(yù)覽。新的獨(dú)立參數(shù)面板有助于減少應(yīng)用程序的整體內(nèi)存占用，因?yàn)樗嗽诤笈_(tái)生成報(bào)表圖像并將其發(fā)送到客戶端應(yīng)用程序的需要。

組件實(shí)現(xiàn)基于報(bào)表查看器組件中的參數(shù)面板，因此它允許您訪問與報(bào)表參數(shù)相關(guān)的同一組組件公共屬性和事件，下面是Angular平臺(tái)上的一個(gè)組件定義示例：

<dx-report-parameters-panel class="parametersPanel" [reportUrl]="yourReportName" height="560px" width="400px">
<dxrpp-request-options [invokeAction]="invokeAction" host="http://yourhostname:port/"></dxrpp-request-options>
<dxrpp-callbacks (BeforeRender)="onBeforeRender($event)"></dxrpp-callbacks>
</dx-report-parameters-panel>

該面板允許您創(chuàng)建自定義提交按鈕并處理相關(guān)的單擊事件，這將使您能夠序列化輸入?yún)?shù)值，將它們發(fā)送到后端應(yīng)用程序，然后將其應(yīng)用到XtraReport類的實(shí)例中(在打印或?qū)?出操作之前)：

下面的代碼片段在后端應(yīng)用參數(shù)值：

C#

public async Task<IActionResult> ExportWithParameters(
[FromServices]IReportParametersSerializer reportParametersSerializer,
[FromForm]string serializedParameters,
[FromForm]string reportUrl) {
var report = await reportParametersSerializer.ApplyParametersStateAsync(reportUrl, serializedParameters);
report.ExportToPdf("yourFilePath");
return Ok(new { Message = "A report has been successfully exported" });
}

Web報(bào)表設(shè)計(jì)器 - 隱藏/限制參數(shù)編輯

新版本引入一組新的API來幫助自定義參數(shù)、參數(shù)組和參數(shù)分隔符的編輯設(shè)置，當(dāng)創(chuàng)建一組帶有強(qiáng)制/隱藏參數(shù)的"canned"或預(yù)定義報(bào)告時(shí)，此API將很有價(jià)值。

新的類包含以下影響屬性面板、字段列表和參數(shù)編輯器的設(shè)置：

• - 隱藏參數(shù)添加和刪除按鈕。
• - 隱藏參數(shù)組添加和刪除按鈕。
• - 隱藏參數(shù)分隔符添加和刪除按鈕。
• - 禁用參數(shù)和組的屬性編輯器。
• - 隱藏向上和向下按鈕并禁用拖放操作。

下面的代碼片段將ASP. NET Core應(yīng)用程序的參數(shù)、參數(shù)組和分隔符變?yōu)橹蛔x(用戶不能添加/刪除參數(shù)/組/分隔符，編輯/重新排序相關(guān)屬性)：

Razor

@{
var designerRender = Html.DevExpress().ReportDesigner("reportDesigner")
.ParameterEditingSettings( configure => {
configure.AllowEditParameterCollection = false;
configure.AllowEditParameterSeparators = false;
configure.AllowEditParameterGroups = false;
configure.AllowEditProperties = false;
configure.AllowReorderParameters = false })
.Height("100%")
.Bind("TestReport");
@designerRender.RenderHtml()
}

新版本還引入了一個(gè)新的CustomizeParameterProperties事件，允許您在Web報(bào)表設(shè)計(jì)器級(jí)別自定義特定參數(shù)或禁用/隱藏特定屬性編輯器。

例如，下面的代碼片段隱藏了所有參數(shù)的允許空值屬性編輯器(在屬性面板和參數(shù)編輯器中)，并隱藏了參數(shù)組的刪除按鈕：

function customizeParameterProperties(s, e) {
if (e.parameter) {
let allowNullInfo = e.getEditor('allowNull');
if (allowNullInfo) {
allowNullInfo.visible = false;
}
}
if (e.parameterPanelLayoutItem.layoutItemType === 'Group') {
e.editOptions.allowDelete = false;
}
}