Описание встроенных компонентов

Далее идёт описание компонентов, входящих в состав FastReport.Web. Мы не рекомендуем использование компонентов, отличных от WebReportContainer, т.к. они могут вести себя нестабильно вне стандартного дерева компонентов.

Однако, для более точной настройки отображения, вам может потребоваться использование других компонентов.

WebReportContainer

Основной и самый универсальный Blazor компонент, выполняющий отрисовку WebReport, является <WebReportContainer/>. Он находится в namespace FastReport.Web.Blazor.Components. Единственный параметр, который он принимает - объект класса WebReport. Это означает, что для использования данного компонента, вы должны создать объект класса WebReport, присвоить ему отчёт (Report), другие необходимые параметры и передать данный объект в параметры WebReportContainer.

Пример

<WebReportContainer WebReport="@UserWebReport" />

@code {
    public WebReport UserWebReport { get; set; }

    protected override void OnParametersSet()
    {
        var report = Report.FromFile(
        Path.Combine(
            directory,
            "My report.frx"));

        // Registers the application dataset
        Report.RegisterData(DataSet, "NorthWind");

        UserWebReport = new WebReport();
        UserWebReport.Report = Report;
    }
}

Данный компонент умеет определять различный Mode (Designer, Dialog и обычный Preview). Умеет подготавливать отчет, встраивать стили, определенные по умолчанию, и индивидуальные стили, отображать Toolbar, Outline и Tabs, работать с интерактивными отчетами и др.

WebReportPreview

Аналогичен предыдущему компоненту, однако не учитывает Designer Mode. Т.е. всегда пытается подготовить и отрисовать отчёт.

ReportContainer

Аналогичен предыдущему компоненту, однако не включает загрузку стилей WebReport (общих и индивидуальных для Toolbar/Tabs/Outline).

Занимается подготовкой отчёта и последующим отображением вместе с Toolbar и Tabs (по необходимости).

При работе какой-либо интерактивности (клики по отчёту/работа с диалоговыми формами) обновляется именно этот компонент.

ReportBody / ExportComponent

ReportBody вызывает отрисовку Outline (по необходимости) и "вкладывает" в себя компонент, который является отрисовкой самого отчёта (ExportComponent), который ему передаёт ReportContainer. Не рекомендуется для использования.

BlazorExport

Самым "нижним" уровнем компонента является вовсе не компонент, а сам BlazorExport - инструмент экспорта подготовленного отчёта в формат построения RenderTreeBuilder. Находится в FastReport.Web.Blazor.Export namespace.

Для построения данного экспорта необходимо:

  1. Подготовить данный отчёт
  2. Быть уверенным, что в этом отчёте не используются диалоговые формы (они отображаются с помощью DialogPageComponent и не рассматриваются в данном руководстве)
  3. Создать свой компонент и в нём явно определить способ построения (вызвать переопределение метода BuildRenderTree)
  4. В этом методе построения создать экземпляр BlazorExport, задать ему необходимые свойства и вызвать Export c передачей следующих параметров: отчёта (Report) и экземпляр builder, являющимся аргументом данного переопределенного метода.
        /// Main function
        protected override void BuildRenderTree(RenderTreeBuilder builder)
        {
            using (BlazorExport blazor = new BlazorExport())
            {
                blazor.StylePrefix = $"fr{WebReport.ID}";
                blazor.EmbedPictures = true;
                blazor.OnClick += ProcessClick;
                blazor.EnableMargins = WebReport.EnableMargins;
                blazor.SinglePage = true;
                blazor.CurPage = WebReport.CurrentPageIndex;

                blazor.Export(myReport, builder);
           }
       }

Online Designer

В данный момент Online Designer может работать в элементе iframe средствами JavaScript и он полностью совместим со сборкой Online Designer для Core.

Для использования только возможностей дизайнера, вы можете вызвать компонент <IFrameDesigner/> с передачей ему параметра WebReport с настроенным свойством Report и необязательными DesignerLocale и DesignerPath:

    <IFrameDesigner WebReport="CurrentWebReport" />

Однако напоминаем, что компонент WebReportContainer понимает, с каким Mode он в данный момент работает и вовсе не обязательно вызывать IFrameDesigner именно в таком виде.