Skip to content

Commit 424a314

Browse files
KarkuvelRajanKarkuvelRajan
authored
Merge pull request #70 from SyncfusionExamples/BLAZ-1004829-SampleChange6
1004829: Blazor UG Update
2 parents f9a68c9 + 03f1d10 commit 424a314

18 files changed

Lines changed: 368 additions & 158 deletions

‎Diagram/Server/Pages/Export/Export.razor‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,24 +3,24 @@
33
@using Syncfusion.Blazor.Buttons
44

55
<SfButton Content="ExportBase64" OnClick="@ExportBase64" />
6-
<SfButton Content="ExportPng" OnClick="@ExportPng" />
7-
<SfDiagramComponent Height="600px" @ref="@diagram" />
6+
<SfButton Content="ExportPng" OnClick="@ExportPngAsync" />
7+
<SfDiagramComponent Height="600px" @ref="@_diagram" />
88

99
@code
1010
{
11-
private SfDiagramComponent diagram;
11+
private SfDiagramComponent _diagram;
1212

1313
//To export the diagram as base64 string.
14-
private async Task ExportBase64()
14+
private async Task ExportBase64Async()
1515
{
16-
DiagramExportSettings export = new DiagramExportSettings();
17-
string[] base64 = await diagram.ExportAsync(DiagramExportFormat.PNG, export);
16+
DiagramExportSettings _export = new DiagramExportSettings();
17+
string[] _base64 = await _diagram.ExportAsync(DiagramExportFormat.PNG, _export);
1818
}
1919

2020
//To export the diagram as png.
21-
private async Task ExportPng()
21+
private async Task ExportPngAsync()
2222
{
23-
DiagramExportSettings export = new DiagramExportSettings();
24-
await diagram.ExportAsync("diagram", DiagramExportFormat.PNG, export);
23+
DiagramExportSettings _export = new DiagramExportSettings();
24+
await _diagram.ExportAsync("diagram", DiagramExportFormat.PNG, _export);
2525
}
2626
}

‎Diagram/Server/Pages/Export/ExportClipBounds.razor‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,24 @@
22
@using Syncfusion.Blazor.Diagram
33
@using Syncfusion.Blazor.Buttons
44

5-
<SfButton Content="Export" OnClick="@Export" />
6-
<SfDiagramComponent Height="600px" @ref="@diagram">
5+
<SfButton Content="Export" OnClick="@ExportAsync" />
6+
<SfDiagramComponent Height="600px" @ref="@_diagram">
77
<PageSettings Height="1000" Width="800"></PageSettings>
88
</SfDiagramComponent>
99

1010
@code
1111
{
12-
private SfDiagramComponent diagram;
12+
private SfDiagramComponent _diagram;
1313

14-
private async Task Export()
14+
private async Task ExportAsync()
1515
{
16-
DiagramExportSettings export = new DiagramExportSettings();
17-
export.Region = DiagramPrintExportRegion.PageSettings;
18-
export.PageWidth = 816;
19-
export.PageHeight = 1054;
20-
export.Margin = new DiagramThickness() { Left = 10, Top = 10, Right = 10, Bottom = 10 };
21-
export.ClipBounds = new DiagramRect() { X = 0, Y = 0, Width = 500, Height = 500 };
16+
DiagramExportSettings _export = new DiagramExportSettings();
17+
_export.Region = DiagramPrintExportRegion.PageSettings;
18+
_export.PageWidth = 816;
19+
_export.PageHeight = 1054;
20+
_export.Margin = new DiagramThickness() { Left = 10, Top = 10, Right = 10, Bottom = 10 };
21+
_export.ClipBounds = new DiagramRect() { X = 0, Y = 0, Width = 500, Height = 500 };
2222
//To export the diagram
23-
await diagram.ExportAsync("diagram",DiagramExportFormat.PNG, export);
23+
await _diagram.ExportAsync("diagram",DiagramExportFormat.PNG, _export);
2424
}
2525
}

‎Diagram/Server/Pages/Export/ExportMargin.razor‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,24 @@
22
@using Syncfusion.Blazor.Diagram
33
@using Syncfusion.Blazor.Buttons
44

5-
<SfButton Content="Export" OnClick="@Export" />
6-
<SfDiagramComponent Height="600px" @ref="@diagram">
5+
<SfButton Content="Export" OnClick="@ExportAsync" />
6+
<SfDiagramComponent Height="600px" @ref="@_diagram">
77
<PageSettings Height="1000" Width="800"></PageSettings>
88
</SfDiagramComponent>
99

1010
@code
1111
{
1212
//Reference the diagram
13-
private SfDiagramComponent diagram;
13+
private SfDiagramComponent _diagram;
1414

15-
private async Task Export()
15+
private async Task ExportAsync()
1616
{
17-
DiagramExportSettings export = new DiagramExportSettings();
18-
export.Region = DiagramPrintExportRegion.PageSettings;
19-
export.PageWidth = 816;
20-
export.PageHeight = 1054;
21-
export.Margin = new DiagramThickness() { Left = 10, Top = 10, Right = 10, Bottom = 10 };
17+
DiagramExportSettings _export = new DiagramExportSettings();
18+
_export.Region = DiagramPrintExportRegion.PageSettings;
19+
_export.PageWidth = 816;
20+
_export.PageHeight = 1054;
21+
_export.Margin = new DiagramThickness() { Left = 10, Top = 10, Right = 10, Bottom = 10 };
2222
//To export the diagram
23-
await diagram.ExportAsync("diagram", DiagramExportFormat.PNG, export);
23+
await _diagram.ExportAsync("diagram", DiagramExportFormat.PNG, _export);
2424
}
2525
}

‎Diagram/Server/Pages/Export/ExportOption.razor‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,19 @@
22
@using Syncfusion.Blazor.Diagram
33
@using Syncfusion.Blazor.Buttons
44

5-
<SfButton Content="Export" OnClick="@Export" />
6-
<SfDiagramComponent Height="600px" @ref="@diagram">
5+
<SfButton Content="Export" OnClick="@ExportAsync" />
6+
<SfDiagramComponent Height="600px" @ref="@_diagram">
77
</SfDiagramComponent>
88

99
@code
1010
{
1111
//Reference the diagram
12-
private SfDiagramComponent diagram;
12+
private SfDiagramComponent _diagram;
1313

14-
private async Task Export()
14+
private async Task ExportAsync()
1515
{
16-
DiagramExportSettings export = new DiagramExportSettings();
16+
DiagramExportSettings _export = new DiagramExportSettings();
1717
//To export the diagram
18-
await diagram.ExportAsync("Diagram", DiagramExportFormat.SVG, export);
18+
await _diagram.ExportAsync("Diagram", DiagramExportFormat.SVG, _export);
1919
}
2020
}

‎Diagram/Server/Pages/Export/ExportOrientation.razor‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,26 +2,26 @@
22
@using Syncfusion.Blazor.Diagram
33
@using Syncfusion.Blazor.Buttons
44

5-
<SfButton Content="Export" OnClick="@Export" />
6-
<SfDiagramComponent Height="600px" @ref="@diagram" />
5+
<SfButton Content="Export" OnClick="@ExportAsync" />
6+
<SfDiagramComponent Height="600px" @ref="@_diagram" />
77

88
@code
99
{
1010
//Reference the diagram
11-
private SfDiagramComponent diagram;
11+
private SfDiagramComponent _diagram;
1212

13-
private async Task Export()
13+
private async Task ExportAsync()
1414
{
15-
DiagramExportSettings export = new DiagramExportSettings();
16-
export.Region = DiagramPrintExportRegion.PageSettings;
17-
export.PageWidth = 816;
18-
export.PageHeight = 1054;
15+
DiagramExportSettings _export = new DiagramExportSettings();
16+
_export.Region = DiagramPrintExportRegion.PageSettings;
17+
_export.PageWidth = 816;
18+
_export.PageHeight = 1054;
1919
//To export the diagram in single page.
20-
export.FitToPage = true;
21-
export.Orientation = PageOrientation.Landscape;
22-
export.Margin = new DiagramThickness() { Left = 10, Top = 10, Right = 10, Bottom = 10 };
23-
export.ClipBounds = new DiagramRect() { X = 0, Y = 0, Width = 500, Height = 500 };
20+
_export.FitToPage = true;
21+
_export.Orientation = PageOrientation.Landscape;
22+
_export.Margin = new DiagramThickness() { Left = 10, Top = 10, Right = 10, Bottom = 10 };
23+
_export.ClipBounds = new DiagramRect() { X = 0, Y = 0, Width = 500, Height = 500 };
2424
//To export the diagram
25-
await diagram.ExportAsync("diagram", DiagramExportFormat.PNG, export);
25+
await _diagram.ExportAsync("diagram", DiagramExportFormat.PNG, _export);
2626
}
2727
}

‎Diagram/Server/Pages/Export/ExportRegion.razor‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,24 +3,24 @@
33
@using Syncfusion.Blazor.Diagram
44
@using Syncfusion.Blazor.Buttons
55

6-
<SfButton Content="Export" OnClick="@Export" />
7-
<SfDiagramComponent Height="600px" @ref="@diagram">
6+
<SfButton Content="Export" OnClick="@ExportAsync" />
7+
<SfDiagramComponent Height="600px" @ref="@_diagram">
88
<PageSettings Height="1000" Width="800"></PageSettings>
99
</SfDiagramComponent>
1010

1111
@code
1212
{
1313
//Reference the diagram
14-
private SfDiagramComponent diagram;
14+
private SfDiagramComponent _diagram;
1515

16-
private async Task Export()
16+
private async Task ExportAsync()
1717
{
18-
DiagramExportSettings export = new DiagramExportSettings();
19-
export.Region = DiagramPrintExportRegion.PageSettings;
20-
export.PageWidth = 816;
21-
export.PageHeight = 1054;
22-
export.Margin = new DiagramThickness() { Left = 10, Top = 10, Right = 10, Bottom = 10 };
18+
DiagramExportSettings _export = new DiagramExportSettings();
19+
_export.Region = DiagramPrintExportRegion.PageSettings;
20+
_export.PageWidth = 816;
21+
_export.PageHeight = 1054;
22+
_export.Margin = new DiagramThickness() { Left = 10, Top = 10, Right = 10, Bottom = 10 };
2323
//To export the diagram
24-
await diagram.ExportAsync("Diagram", DiagramExportFormat.PNG, export);
24+
await _diagram.ExportAsync("Diagram", DiagramExportFormat.PNG, _export);
2525
}
2626
}

‎Diagram/Server/Pages/Export/ExportToPDF.razor‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
@page "/Export"
2+
3+
@using Syncfusion.PdfExport;
4+
@using Syncfusion.Blazor.Diagram
5+
@using Syncfusion.Blazor.Buttons
6+
@inject IJSRuntime JS;
7+
8+
<SfButton Content="ExportPDF" OnClick="@ExportPDFAsync" />
9+
<SfButton Content="ExportPng" OnClick="@ExportPngAsync" />
10+
<SfDiagramComponent Height="600px" @ref="@_diagram" />
11+
12+
@code
13+
{
14+
//Reference the diagram
15+
SfDiagramComponent _diagram;
16+
17+
private async void ExportPDFAsync()
18+
{
19+
DiagramExportSettings _print = new DiagramExportSettings();
20+
_print.Region = DiagramPrintExportRegion.PageSettings;
21+
_print.PageWidth = 500;
22+
_print.PageHeight = 800;
23+
_print.Orientation = PageOrientation.Portrait;
24+
_print.FitToPage = true;
25+
_print.Margin = new DiagramThickness() { Left = 30, Top = 20, Right = 10, Bottom = 10 };
26+
_print.ClipBounds = new DiagramRect() { X = 200, Y = 200, Width = 200, Height = 200 };
27+
//To export the diagram into base64
28+
var _images = await _diagram.ExportAsync(DiagramExportFormat.PNG, _print);
29+
var _pdforientation = PageOrientation.Portrait == PageOrientation.Landscape ? PdfPageOrientation.Landscape : PdfPageOrientation.Portrait;
30+
await ExportToPdfAsync("diagram", _pdforientation, true, _images);
31+
}
32+
//
33+
private async Task<string> ExportToPdfAsync(string fileName, PdfPageOrientation orientation, bool allowDownload, string[] images)
34+
{
35+
PdfDocument _document = new PdfDocument();
36+
_document.PageSettings.Orientation = orientation;
37+
_document.PageSettings.Margins = new PdfMargins() { Left = 0, Right = 0, Top = 0, Bottom = 0 };
38+
string _base64String;
39+
var _dict = images;
40+
for (int i = 0; i < _dict.Count(); i++)
41+
{
42+
_base64String = _dict[i];
43+
using (MemoryStream _initialStream = new MemoryStream(Convert.FromBase64String(_base64String.Split("base64,")[1])))
44+
{
45+
Stream _stream = _initialStream as Stream;
46+
PdfPage _page = _document.Pages.Add();
47+
PdfGraphics _graphics = _page.Graphics;
48+
#pragma warning disable CA2000
49+
PdfBitmap _image = new PdfBitmap(_stream);
50+
#pragma warning restore CA2000
51+
_graphics.DrawImage(_image, 0, 0);
52+
}
53+
}
54+
using (MemoryStream _memoryStream = new MemoryStream())
55+
{
56+
_document.Save(_memoryStream);
57+
_memoryStream.Position = 0;
58+
_base64String = Convert.ToBase64String(_memoryStream.ToArray());
59+
if (allowDownload)
60+
{
61+
await JSRuntimeExtensions.InvokeAsync<string>(JS, "downloadPdf", new object[] { _base64String, fileName });
62+
_base64String = string.Empty;
63+
}
64+
else
65+
{
66+
_base64String = "data:application/pdf;base64," + _base64String;
67+
}
68+
_document.Dispose();
69+
}
70+
return _base64String;
71+
}
72+
}
73+
<script>
74+
// Javascript methods to download file
75+
function downloadPdf(base64String, fileName) {
76+
var _sliceSize = 512;
77+
var _byteCharacters = atob(base64String);
78+
var _byteArrays = [];
79+
for (var offset = 0; offset < _byteCharacters.length; offset += _sliceSize)
80+
{
81+
var _slice = _byteCharacters.slice(offset, offset + _sliceSize);
82+
var _byteNumbers = new Array(slice.length);
83+
for (var i = 0; i < _slice.length; i++)
84+
{
85+
_byteNumbers[i] = _slice.charCodeAt(i);
86+
}
87+
var _byteArray = new Uint8Array(_byteNumbers);
88+
_byteArrays.push(_byteArray);
89+
}
90+
var _blob = new Blob(_byteArrays,
91+
{
92+
type: 'application/pdf'
93+
}
94+
);
95+
var _blobUrl = window.URL.createObjectURL(_blob);
96+
this.triggerDownload("PDF", fileName, _blobUrl);
97+
}
98+
triggerDownload: function triggerDownload(type, fileName, url)
99+
{
100+
var _anchorElement = document.createElement('a');
101+
_anchorElement.download = fileName + '.' + type.toLocaleLowerCase();
102+
_anchorElement.href = url;
103+
_anchorElement.click();
104+
}
105+
</script>

‎Diagram/Server/Pages/Export/ExportWithPage.razor‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,27 +3,27 @@
33
@using Syncfusion.Blazor.Diagram
44
@using Syncfusion.Blazor.Buttons
55

6-
<SfButton Content="Export" OnClick="@Export" />
7-
<SfDiagramComponent Height="600px" @ref="@diagram">
6+
<SfButton Content="Export" OnClick="@ExportAsync" />
7+
<SfDiagramComponent Height="600px" @ref="@_diagram">
88
<PageSettings Height="1000" Width="800"></PageSettings>
99
</SfDiagramComponent>
1010

1111
@code
1212
{
1313
//Reference the diagram.
14-
private SfDiagramComponent diagram;
14+
private SfDiagramComponent _diagram;
1515

16-
private async Task Export()
16+
private async Task ExportAsync()
1717
{
18-
DiagramExportSettings export = new DiagramExportSettings();
19-
export.Region = DiagramPrintExportRegion.PageSettings;
20-
export.PageWidth = 816;
21-
export.PageHeight = 1054;
18+
DiagramExportSettings _export = new DiagramExportSettings();
19+
_export.Region = DiagramPrintExportRegion.PageSettings;
20+
_export.PageWidth = 816;
21+
_export.PageHeight = 1054;
2222
//To export the diagram in single page.
23-
export.FitToPage = true;
24-
export.Margin = new DiagramThickness() { Left = 10, Top = 10, Right = 10, Bottom = 10 };
25-
export.ClipBounds = new DiagramRect() { X = 0, Y = 0, Width = 500, Height = 500 };
23+
_export.FitToPage = true;
24+
_export.Margin = new DiagramThickness() { Left = 10, Top = 10, Right = 10, Bottom = 10 };
25+
_export.ClipBounds = new DiagramRect() { X = 0, Y = 0, Width = 500, Height = 500 };
2626
//To export the diagram
27-
await diagram.ExportAsync("Diagram", DiagramExportFormat.PNG, export);
27+
await _diagram.ExportAsync("Diagram", DiagramExportFormat.PNG, _export);
2828
}
2929
}

‎Diagram/Server/Pages/Export/ExportWithPageSize.razor‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,20 @@
33
@using Syncfusion.Blazor.Diagram
44
@using Syncfusion.Blazor.Buttons
55

6-
<SfButton Content="Export" OnClick="@Export" />
7-
<SfDiagramComponent Height="600px" @ref="@diagram" />
6+
<SfButton Content="Export" OnClick="@ExportAsync" />
7+
<SfDiagramComponent Height="600px" @ref="@_diagram" />
88

99
@code
1010
{
1111
//Reference the diagram
12-
private SfDiagramComponent diagram;
12+
private SfDiagramComponent _diagram;
1313

14-
private async Task Export()
14+
private async Task ExportAsync()
1515
{
16-
DiagramExportSettings export = new DiagramExportSettings();
17-
export.PageWidth = 816;
18-
export.PageHeight = 1054;
16+
DiagramExportSettings _export = new DiagramExportSettings();
17+
_export.PageWidth = 816;
18+
_export.PageHeight = 1054;
1919
//To export the diagram
20-
await diagram.ExportAsync(DiagramExportFormat.SVG, export);
20+
await _diagram.ExportAsync(DiagramExportFormat.SVG, _export);
2121
}
2222
}

0 commit comments

Comments
 (0)