Report Writer with Blazor Application

To add the Bold Reports^® Report Writer to a Blazor application, create a Blazor Server application, install the BoldReports.Net.Core NuGet package and add a Web API controller that exports RDL reports.

Prerequisites

Before you get started with the Bold Reports^® Blazor Report Writer, make sure that your development environment includes the following requirements.

• Visual Studio 2022 with ASP.NET and Web Development workloads.
• .NET 8.0 or .NET 9.0 SDK.

Create a Blazor application

To get started, create a Blazor Server App template application and name it BlazorReportingTools using Visual Studio 2022. If this template is not available, follow the Microsoft Blazor tutorial installation steps to configure the system environment.

The source code for this Blazor reporting components application is available on GitHub.

Starting with Bold Reports^® version 8.1.1, support for .NET versions lower than .NET 8.0 (including .NET Core 3.1, .NET 5.0, .NET 6.0, and .NET 7.0) has officially ended, with only limited support available for these versions. To continue receiving new features, improvements, and full support, upgrade to .NET 8.0 or later. If you need to stay on an earlier .NET version, use Bold Reports^® version 7.1.10 or earlier.

Which NuGet packages does the Blazor Report Writer need?

The Bold Reports^® Blazor Report Writer needs the BoldReports.Net.Core package and the dependency packages listed in the following tables.

1. In the Solution Explorer tab, right-click the project or solution , and choose Manage NuGet Packages. Alternatively, select the Tools > NuGet Package Manager > Manage NuGet Packages for Solution menu command.

2. Search for BoldReports.Net.Core package, and install it in your Blazor application. The following table provides details about the packages and their usage.

To learn more about installing and configuring Report Writer NuGet packages, see the NuGet Packages section.

The following table provides details about the dependency packages and their usage.

In this tutorial, you use the sales-order-detail.rdl report, which you can download as the sales order detail sample report. You can get the reports from the Syncfusion^® installation location. For more information, refer to the samples and demos section.

Create a PDF Document in Web API

Create a Web API controller that uses the Bold Reports^® Report Writer to export the provided RDL reports.

• Create a folder Resources into the wwwroot folder in your application. Copy and paste the sample RDL reports into the Resoures folder.

• Create an empty API controller by right-clicking the Data folder, choosing Add > Controller, and then naming it BoldReportWriterController.cs.

• Create local variables inside the BoldReportWriterController class.

  // IWebHostEnvironment used with sample to get the application data from wwwroot.
  private Microsoft.AspNetCore.Hosting.IWebHostEnvironment _hostingEnvironment;
  
  // IWebHostEnvironment initialized with controller to get the data from application data folder.
  public BoldReportWriterController(Microsoft.AspNetCore.Hosting.IWebHostEnvironment hostingEnvironment)
  {
      _hostingEnvironment = hostingEnvironment;
  }

• Open the BoldReportWriterController.cs file in your application and add the Export() function to load the report as a stream. Refer to the following code snippet:

  [HttpGet]
  public IActionResult Export(string writerFormat)
  {
      // Here, we have loaded the sales-order-detail sample report from application the folder wwwroot\Resources.
      FileStream inputStream = new FileStream(_hostingEnvironment.WebRootPath + @"\Resources\sales-order-detail.rdl", FileMode.Open, FileAccess.Read);
      MemoryStream reportStream = new MemoryStream();
      inputStream.CopyTo(reportStream);
      reportStream.Position = 0;
      inputStream.Close();
      ......
  }

• Initialize the Report Writer instance with the report stream and set the specified export format and file name for the export document.

  public IActionResult Export(string writerFormat)
  {
      ......
  
      BoldReports.Writer.ReportWriter writer = new BoldReports.Writer.ReportWriter();
  
      string fileName = null;
      WriterFormat format;
      string type = null;
  
      fileName = "sales-order-detail.pdf";
      type = "pdf";
      format = WriterFormat.PDF;
  }

• Use the Save method in Report Writer to generate the export document from the report stream. The Save method returns the generated file as a stream.

  writer.LoadReport(reportStream);
  MemoryStream memoryStream = new MemoryStream();
  writer.Save(memoryStream, format);
  
  // Download the generated export document to the client side.
  memoryStream.Position = 0;
  FileStreamResult fileStreamResult = new FileStreamResult(memoryStream, "application/" + type);
  fileStreamResult.FileDownloadName = fileName;
  return fileStreamResult;

• Refer to the following complete code snippet to get the exported file stream.

      [Route("api/{controller}/{action}/{id?}")]
      public class BoldReportWriterController : ControllerBase
      {
          // IWebHostEnvironment used with sample to get the applicationdata from wwwroot.
          private Microsoft.AspNetCore.Hosting.IWebHostEnvironment _hostingEnvironment;
  
          // IWebHostEnvironment initialized with controller to get the data from application data folder.
          public BoldReportWriterController(Microsoft.AspNetCore.Hosting.IWebHostEnvironment hostingEnvironment)
          {
              _hostingEnvironment = hostingEnvironment;
          }
          [HttpGet]
          public IActionResult Export(string writerFormat)
          {
              // Here, we have loaded the sales-order-detail sample report from application the folder wwwroot\Resources.
              FileStream inputStream = new FileStream(_hostingEnvironment.WebRootPath + @"\Resources\sales-order-detail.rdl", FileMode.Open, FileAccess.Read);
              MemoryStream reportStream = new MemoryStream();
              inputStream.CopyTo(reportStream);
              reportStream.Position = 0;
              inputStream.Close();
              BoldReports.Writer.ReportWriter writer = new BoldReports.Writer.ReportWriter();
  
              string fileName = null;
              WriterFormat format;
              string type = null;
  
              if (writerFormat == "PDF")
              {
                  fileName = "sales-order-detail.pdf";
                  type = "pdf";
                  format = WriterFormat.PDF;
              }
              else if (writerFormat == "Word")
              {
                  fileName = "sales-order-detail.doc";
                  type = "doc";
                  format = WriterFormat.Word;
              }
              else if (writerFormat == "CSV")
              {
                  fileName = "sales-order-detail.csv";
                  type = "csv";
                  format = WriterFormat.CSV;
              }
              else
              {
                  fileName = "sales-order-detail.xls";
                  type = "xls";
                  format = WriterFormat.Excel;
              }
  
              writer.LoadReport(reportStream);
              MemoryStream memoryStream = new MemoryStream();
              writer.Save(memoryStream, format);
  
              // Download the generated export document to the client side.
              memoryStream.Position = 0;
              FileStreamResult fileStreamResult = new FileStreamResult(memoryStream, "application/" + type);
              fileStreamResult.FileDownloadName = fileName;
              return fileStreamResult;
          }
      }

Client Side

1. Use the following code snippet in the _Host.cshtml file to invoke the Web API from the client side.

       <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
       <script>
           function downloadFile() {
               var wirterformat = getWriterFormat();
               location.href = 'api/BoldReportWriter/Export?writerFormat=' + wirterformat;
           };
   
           function getWriterFormat() {
               var formatType = "";
               if ($('#rbtnPDf').is(':checked')) {
                   formatType = $('#rbtnPDf').val();
               } else if ($('#rbtnWord').is(':checked')) {
                   formatType = $('#rbtnWord').val();
               } else if ($('#rbtnxls').is(':checked')) {
                   formatType = $('#rbtnxls').val();
               } else if ($('#rbtnCSV').is(':checked')) {
                   formatType = $('#rbtnCSV').val();
               }
               return formatType;
           }
       </script>

2. You can add the export file types to the home page to choose the format you want to export in the Report Writer. Copy and paste the following code snippet into the Index.razor file in your application.

       @page "/"
   
       @using Microsoft.JSInterop
       @using Microsoft.AspNetCore.Components
       @inject IJSRuntime JSRuntime
   
       <div class="Common">
           <div class="tablediv">
               <div class="rowdiv">
                   <label id="design">
                       Choose the any one of the format to export the document in Report Writer.
                       <br />
                       <br />
                   </label>
               </div>
               <div class="rowdiv">
                   <div class="celldiv" style="padding:10px">
                       <label>
                           <strong>  Save As :</strong>
                       </label>
                       <input id="rbtnPDf" type="radio" name="writerFormat" value="PDF" checked="checked" style="margin-left: 15px" />
                       <label for="rbtnPDf" style="padding:0px 5px 0px 2px">
                           PDF
                       </label>
                       <input id="rbtnWord" type="radio" name="writerFormat" value="Word" style="margin-left: 15px" />
                       <label for="rbtnWord" style="padding:0px 5px 0px 2px">
                           Word
                       </label>
                       <input id="rbtnxls" type="radio" name="writerFormat" value="xls" style="margin-left: 15px" />
                       <label for="rbtnxls" style="padding:0px 5px 0px 2px">
                           Excel
                       </label>
                       <input id="rbtnCSV" type="radio" name="writerFormat" value="CSV" style="margin-left: 15px" />
                       <label for="rbtnCSV" style="padding:0px 25px 0px 2px ">
                           CSV
                       </label>
                       <input class="buttonStyle" type="submit" name="button" value="Generate" style="width:150px;" @onclick="PDFReport" />
                   </div>
               </div>
           </div>
       </div>
       @code {
           public async void PDFReport()
           {
               JSRuntime.InvokeVoidAsync("downloadFile");
           }
       }

3. Ensure that the application configuration is set correctly in the Program.cs file, as in the following code:

   var builder = WebApplication.CreateBuilder(args);
   
   // Add services to the container.
   builder.Services.AddRazorPages();
   builder.Services.AddServerSideBlazor();
   
   var app = builder.Build();
   
   // Configure the HTTP request pipeline.
   if (!app.Environment.IsDevelopment())
   {
       app.UseExceptionHandler("/Error");
       app.UseHsts();
   }
   
   app.UseHttpsRedirection();
   app.UseStaticFiles();
   
   app.UseRouting();
   app.MapControllers();
   app.MapBlazorHub();
   app.MapFallbackToPage("/_Host");
   
   app.Run();

4. Run the application and export the report to the specified export format in your Report Writer application.

Frequently asked questions

Which .NET version does the Blazor Report Writer need?

The Bold Reports^® Blazor Report Writer prerequisites list the .NET 8.0 or .NET 9.0 SDK and Visual Studio 2022 with the ASP.NET and Web Development workloads.

Is Newtonsoft.Json required for the Report Writer?

Yes. Newtonsoft.Json is a mandatory package for the Report Writer, and the package version should be 10.0.1 or higher.

When do I need the Microsoft.Data.SqlClient package?

Install the optional Microsoft.Data.SqlClient package only when the RDL report contains a SQL Server or SQL Azure data source.

See also

• Blazor Report Writer overview
• Add Report Viewer to a Blazor application