Skip to content

1004829: Blazor UG Update #70

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
KarkuvelRajan merged 2 commits into from
Feb 3, 2026
Merged

1004829: Blazor UG Update #70

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2b30652
1004829: Blazor UG Update
SF4535-Pranoove Feb 3, 2026
03f1d10
1004829: Blazor UG Update
SF4535-Pranoove Feb 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 9 additions & 9 deletions Diagram/Server/Pages/Export/Export.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,24 +3,24 @@
@using Syncfusion.Blazor.Buttons

<SfButton Content="ExportBase64" OnClick="@ExportBase64" />
<SfButton Content="ExportPng" OnClick="@ExportPng" />
<SfDiagramComponent Height="600px" @ref="@diagram" />
<SfButton Content="ExportPng" OnClick="@ExportPngAsync" />
<SfDiagramComponent Height="600px" @ref="@_diagram" />

@code
{
private SfDiagramComponent diagram;
private SfDiagramComponent _diagram;

//To export the diagram as base64 string.
private async Task ExportBase64()
private async Task ExportBase64Async()
{
DiagramExportSettings export = new DiagramExportSettings();
string[] base64 = await diagram.ExportAsync(DiagramExportFormat.PNG, export);
DiagramExportSettings _export = new DiagramExportSettings();
string[] _base64 = await _diagram.ExportAsync(DiagramExportFormat.PNG, _export);
}

//To export the diagram as png.
private async Task ExportPng()
private async Task ExportPngAsync()
{
DiagramExportSettings export = new DiagramExportSettings();
await diagram.ExportAsync("diagram", DiagramExportFormat.PNG, export);
DiagramExportSettings _export = new DiagramExportSettings();
await _diagram.ExportAsync("diagram", DiagramExportFormat.PNG, _export);
}
}
22 changes: 11 additions & 11 deletions Diagram/Server/Pages/Export/ExportClipBounds.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,24 +2,24 @@
@using Syncfusion.Blazor.Diagram
@using Syncfusion.Blazor.Buttons

<SfButton Content="Export" OnClick="@Export" />
<SfDiagramComponent Height="600px" @ref="@diagram">
<SfButton Content="Export" OnClick="@ExportAsync" />
<SfDiagramComponent Height="600px" @ref="@_diagram">
<PageSettings Height="1000" Width="800"></PageSettings>
</SfDiagramComponent>

@code
{
private SfDiagramComponent diagram;
private SfDiagramComponent _diagram;

private async Task Export()
private async Task ExportAsync()
{
DiagramExportSettings export = new DiagramExportSettings();
export.Region = DiagramPrintExportRegion.PageSettings;
export.PageWidth = 816;
export.PageHeight = 1054;
export.Margin = new DiagramThickness() { Left = 10, Top = 10, Right = 10, Bottom = 10 };
export.ClipBounds = new DiagramRect() { X = 0, Y = 0, Width = 500, Height = 500 };
DiagramExportSettings _export = new DiagramExportSettings();
_export.Region = DiagramPrintExportRegion.PageSettings;
_export.PageWidth = 816;
_export.PageHeight = 1054;
_export.Margin = new DiagramThickness() { Left = 10, Top = 10, Right = 10, Bottom = 10 };
_export.ClipBounds = new DiagramRect() { X = 0, Y = 0, Width = 500, Height = 500 };
//To export the diagram
await diagram.ExportAsync("diagram",DiagramExportFormat.PNG, export);
await _diagram.ExportAsync("diagram",DiagramExportFormat.PNG, _export);
}
}
20 changes: 10 additions & 10 deletions Diagram/Server/Pages/Export/ExportMargin.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,24 +2,24 @@
@using Syncfusion.Blazor.Diagram
@using Syncfusion.Blazor.Buttons

<SfButton Content="Export" OnClick="@Export" />
<SfDiagramComponent Height="600px" @ref="@diagram">
<SfButton Content="Export" OnClick="@ExportAsync" />
<SfDiagramComponent Height="600px" @ref="@_diagram">
<PageSettings Height="1000" Width="800"></PageSettings>
</SfDiagramComponent>

@code
{
//Reference the diagram
private SfDiagramComponent diagram;
private SfDiagramComponent _diagram;

private async Task Export()
private async Task ExportAsync()
{
DiagramExportSettings export = new DiagramExportSettings();
export.Region = DiagramPrintExportRegion.PageSettings;
export.PageWidth = 816;
export.PageHeight = 1054;
export.Margin = new DiagramThickness() { Left = 10, Top = 10, Right = 10, Bottom = 10 };
DiagramExportSettings _export = new DiagramExportSettings();
_export.Region = DiagramPrintExportRegion.PageSettings;
_export.PageWidth = 816;
_export.PageHeight = 1054;
_export.Margin = new DiagramThickness() { Left = 10, Top = 10, Right = 10, Bottom = 10 };
//To export the diagram
await diagram.ExportAsync("diagram", DiagramExportFormat.PNG, export);
await _diagram.ExportAsync("diagram", DiagramExportFormat.PNG, _export);
}
}
12 changes: 6 additions & 6 deletions Diagram/Server/Pages/Export/ExportOption.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,19 @@
@using Syncfusion.Blazor.Diagram
@using Syncfusion.Blazor.Buttons

<SfButton Content="Export" OnClick="@Export" />
<SfDiagramComponent Height="600px" @ref="@diagram">
<SfButton Content="Export" OnClick="@ExportAsync" />
<SfDiagramComponent Height="600px" @ref="@_diagram">
</SfDiagramComponent>

@code
{
//Reference the diagram
private SfDiagramComponent diagram;
private SfDiagramComponent _diagram;

private async Task Export()
private async Task ExportAsync()
{
DiagramExportSettings export = new DiagramExportSettings();
DiagramExportSettings _export = new DiagramExportSettings();
//To export the diagram
await diagram.ExportAsync("Diagram", DiagramExportFormat.SVG, export);
await _diagram.ExportAsync("Diagram", DiagramExportFormat.SVG, _export);
}
}
26 changes: 13 additions & 13 deletions Diagram/Server/Pages/Export/ExportOrientation.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,26 +2,26 @@
@using Syncfusion.Blazor.Diagram
@using Syncfusion.Blazor.Buttons

<SfButton Content="Export" OnClick="@Export" />
<SfDiagramComponent Height="600px" @ref="@diagram" />
<SfButton Content="Export" OnClick="@ExportAsync" />
<SfDiagramComponent Height="600px" @ref="@_diagram" />

@code
{
//Reference the diagram
private SfDiagramComponent diagram;
private SfDiagramComponent _diagram;

private async Task Export()
private async Task ExportAsync()
{
DiagramExportSettings export = new DiagramExportSettings();
export.Region = DiagramPrintExportRegion.PageSettings;
export.PageWidth = 816;
export.PageHeight = 1054;
DiagramExportSettings _export = new DiagramExportSettings();
_export.Region = DiagramPrintExportRegion.PageSettings;
_export.PageWidth = 816;
_export.PageHeight = 1054;
//To export the diagram in single page.
export.FitToPage = true;
export.Orientation = PageOrientation.Landscape;
export.Margin = new DiagramThickness() { Left = 10, Top = 10, Right = 10, Bottom = 10 };
export.ClipBounds = new DiagramRect() { X = 0, Y = 0, Width = 500, Height = 500 };
_export.FitToPage = true;
_export.Orientation = PageOrientation.Landscape;
_export.Margin = new DiagramThickness() { Left = 10, Top = 10, Right = 10, Bottom = 10 };
_export.ClipBounds = new DiagramRect() { X = 0, Y = 0, Width = 500, Height = 500 };
//To export the diagram
await diagram.ExportAsync("diagram", DiagramExportFormat.PNG, export);
await _diagram.ExportAsync("diagram", DiagramExportFormat.PNG, _export);
}
}
20 changes: 10 additions & 10 deletions Diagram/Server/Pages/Export/ExportRegion.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,24 +3,24 @@
@using Syncfusion.Blazor.Diagram
@using Syncfusion.Blazor.Buttons

<SfButton Content="Export" OnClick="@Export" />
<SfDiagramComponent Height="600px" @ref="@diagram">
<SfButton Content="Export" OnClick="@ExportAsync" />
<SfDiagramComponent Height="600px" @ref="@_diagram">
<PageSettings Height="1000" Width="800"></PageSettings>
</SfDiagramComponent>

@code
{
//Reference the diagram
private SfDiagramComponent diagram;
private SfDiagramComponent _diagram;

private async Task Export()
private async Task ExportAsync()
{
DiagramExportSettings export = new DiagramExportSettings();
export.Region = DiagramPrintExportRegion.PageSettings;
export.PageWidth = 816;
export.PageHeight = 1054;
export.Margin = new DiagramThickness() { Left = 10, Top = 10, Right = 10, Bottom = 10 };
DiagramExportSettings _export = new DiagramExportSettings();
_export.Region = DiagramPrintExportRegion.PageSettings;
_export.PageWidth = 816;
_export.PageHeight = 1054;
_export.Margin = new DiagramThickness() { Left = 10, Top = 10, Right = 10, Bottom = 10 };
//To export the diagram
await diagram.ExportAsync("Diagram", DiagramExportFormat.PNG, export);
await _diagram.ExportAsync("Diagram", DiagramExportFormat.PNG, _export);
}
}
105 changes: 105 additions & 0 deletions Diagram/Server/Pages/Export/ExportToPDF.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
@page "/Export"

@using Syncfusion.PdfExport;
@using Syncfusion.Blazor.Diagram
@using Syncfusion.Blazor.Buttons
@inject IJSRuntime JS;

<SfButton Content="ExportPDF" OnClick="@ExportPDFAsync" />
<SfButton Content="ExportPng" OnClick="@ExportPngAsync" />
<SfDiagramComponent Height="600px" @ref="@_diagram" />

@code
{
//Reference the diagram
SfDiagramComponent _diagram;

private async void ExportPDFAsync()
{
DiagramExportSettings _print = new DiagramExportSettings();
_print.Region = DiagramPrintExportRegion.PageSettings;
_print.PageWidth = 500;
_print.PageHeight = 800;
_print.Orientation = PageOrientation.Portrait;
_print.FitToPage = true;
_print.Margin = new DiagramThickness() { Left = 30, Top = 20, Right = 10, Bottom = 10 };
_print.ClipBounds = new DiagramRect() { X = 200, Y = 200, Width = 200, Height = 200 };
//To export the diagram into base64
var _images = await _diagram.ExportAsync(DiagramExportFormat.PNG, _print);
var _pdforientation = PageOrientation.Portrait == PageOrientation.Landscape ? PdfPageOrientation.Landscape : PdfPageOrientation.Portrait;
await ExportToPdfAsync("diagram", _pdforientation, true, _images);
}
//
private async Task<string> ExportToPdfAsync(string fileName, PdfPageOrientation orientation, bool allowDownload, string[] images)
{
PdfDocument _document = new PdfDocument();
_document.PageSettings.Orientation = orientation;
_document.PageSettings.Margins = new PdfMargins() { Left = 0, Right = 0, Top = 0, Bottom = 0 };
string _base64String;
var _dict = images;
for (int i = 0; i < _dict.Count(); i++)
{
_base64String = _dict[i];
using (MemoryStream _initialStream = new MemoryStream(Convert.FromBase64String(_base64String.Split("base64,")[1])))
{
Stream _stream = _initialStream as Stream;
PdfPage _page = _document.Pages.Add();
PdfGraphics _graphics = _page.Graphics;
#pragma warning disable CA2000
PdfBitmap _image = new PdfBitmap(_stream);
#pragma warning restore CA2000
_graphics.DrawImage(_image, 0, 0);
}
}
using (MemoryStream _memoryStream = new MemoryStream())
{
_document.Save(_memoryStream);
_memoryStream.Position = 0;
_base64String = Convert.ToBase64String(_memoryStream.ToArray());
if (allowDownload)
{
await JSRuntimeExtensions.InvokeAsync<string>(JS, "downloadPdf", new object[] { _base64String, fileName });
_base64String = string.Empty;
}
else
{
_base64String = "data:application/pdf;base64," + _base64String;
}
_document.Dispose();
}
return _base64String;
}
}
<script>
// Javascript methods to download file
function downloadPdf(base64String, fileName) {
var _sliceSize = 512;
var _byteCharacters = atob(base64String);
var _byteArrays = [];
for (var offset = 0; offset < _byteCharacters.length; offset += _sliceSize)
{
var _slice = _byteCharacters.slice(offset, offset + _sliceSize);
var _byteNumbers = new Array(slice.length);
for (var i = 0; i < _slice.length; i++)
{
_byteNumbers[i] = _slice.charCodeAt(i);
}
var _byteArray = new Uint8Array(_byteNumbers);
_byteArrays.push(_byteArray);
}
var _blob = new Blob(_byteArrays,
{
type: 'application/pdf'
}
);
var _blobUrl = window.URL.createObjectURL(_blob);
this.triggerDownload("PDF", fileName, _blobUrl);
}
triggerDownload: function triggerDownload(type, fileName, url)
{
var _anchorElement = document.createElement('a');
_anchorElement.download = fileName + '.' + type.toLocaleLowerCase();
_anchorElement.href = url;
_anchorElement.click();
}
</script>
24 changes: 12 additions & 12 deletions Diagram/Server/Pages/Export/ExportWithPage.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,27 +3,27 @@
@using Syncfusion.Blazor.Diagram
@using Syncfusion.Blazor.Buttons

<SfButton Content="Export" OnClick="@Export" />
<SfDiagramComponent Height="600px" @ref="@diagram">
<SfButton Content="Export" OnClick="@ExportAsync" />
<SfDiagramComponent Height="600px" @ref="@_diagram">
<PageSettings Height="1000" Width="800"></PageSettings>
</SfDiagramComponent>

@code
{
//Reference the diagram.
private SfDiagramComponent diagram;
private SfDiagramComponent _diagram;

private async Task Export()
private async Task ExportAsync()
{
DiagramExportSettings export = new DiagramExportSettings();
export.Region = DiagramPrintExportRegion.PageSettings;
export.PageWidth = 816;
export.PageHeight = 1054;
DiagramExportSettings _export = new DiagramExportSettings();
_export.Region = DiagramPrintExportRegion.PageSettings;
_export.PageWidth = 816;
_export.PageHeight = 1054;
//To export the diagram in single page.
export.FitToPage = true;
export.Margin = new DiagramThickness() { Left = 10, Top = 10, Right = 10, Bottom = 10 };
export.ClipBounds = new DiagramRect() { X = 0, Y = 0, Width = 500, Height = 500 };
_export.FitToPage = true;
_export.Margin = new DiagramThickness() { Left = 10, Top = 10, Right = 10, Bottom = 10 };
_export.ClipBounds = new DiagramRect() { X = 0, Y = 0, Width = 500, Height = 500 };
//To export the diagram
await diagram.ExportAsync("Diagram", DiagramExportFormat.PNG, export);
await _diagram.ExportAsync("Diagram", DiagramExportFormat.PNG, _export);
}
}
16 changes: 8 additions & 8 deletions Diagram/Server/Pages/Export/ExportWithPageSize.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,20 +3,20 @@
@using Syncfusion.Blazor.Diagram
@using Syncfusion.Blazor.Buttons

<SfButton Content="Export" OnClick="@Export" />
<SfDiagramComponent Height="600px" @ref="@diagram" />
<SfButton Content="Export" OnClick="@ExportAsync" />
<SfDiagramComponent Height="600px" @ref="@_diagram" />

@code
{
//Reference the diagram
private SfDiagramComponent diagram;
private SfDiagramComponent _diagram;

private async Task Export()
private async Task ExportAsync()
{
DiagramExportSettings export = new DiagramExportSettings();
export.PageWidth = 816;
export.PageHeight = 1054;
DiagramExportSettings _export = new DiagramExportSettings();
_export.PageWidth = 816;
_export.PageHeight = 1054;
//To export the diagram
await diagram.ExportAsync(DiagramExportFormat.SVG, export);
await _diagram.ExportAsync(DiagramExportFormat.SVG, _export);
}
}
Loading