Exporting in Blazor Diagram Component

27 Jun 202515 minutes to read

To save and export blazor diagram, refer to the below video link,

Diagram provides support to export the diagram as image or SVG files. The following methods help to export the diagram in the desired formats.

@using Syncfusion.Blazor.Diagram
@using Syncfusion.Blazor.Buttons

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

@code {
    SfDiagramComponent diagram;

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

    //To export the diagram as png.
    private async Task ExportPng()
    {
        DiagramExportSettings export = new DiagramExportSettings();
        await diagram.ExportAsync("diagram", DiagramExportFormat.PNG, export);
    }
}

You can download a complete working sample from GitHub

Exporting Options

Diagram provides support to export the desired region of the diagram to the desired formats.

How to Export Diagram to Different File Formats

DiagramExportFormat specifies the type/format of the exported file. By default, the diagram is exported in .jpeg format. You can export the diagram to the following formats:

  • JPEG
  • PNG
  • SVG
@using Syncfusion.Blazor.Diagram
@using Syncfusion.Blazor.Buttons

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

@code {
    //Reference the diagram
    SfDiagramComponent diagram;

    private async Task Export()
    {
        DiagramExportSettings export = new DiagramExportSettings();
        //To export the diagram
        await diagram.ExportAsync("Diagram", DiagramExportFormat.SVG, export);
    }
}

You can download a complete working sample from GitHub

How to Customize Page Size

Diagram provides support to change the page size. The page size can be adjusted by setting the DiagramExportSettings.PageWidth and DiagramExportSettings.PageHeight properties. The default value for width is 1123 pixels and the height is 794 pixels.

@using Syncfusion.Blazor.Diagram
@using Syncfusion.Blazor.Buttons

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

@code {
    //Reference the diagram
    SfDiagramComponent diagram;

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

You can download a complete working sample from GitHub

How to Add Margin Around Exported Diagram Image

Margin specifies the space around the content to be printed/exported.The default value for margin is 25 for all sides.

@using Syncfusion.Blazor.Diagram
@using Syncfusion.Blazor.Buttons

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

@code {
    //Reference the diagram
    SfDiagramComponent diagram;

    private async Task Export()
    {
        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);
    }
}

You can download a complete working sample from GitHub

How to Export Diagrams by Region

Region specifies whether the diagram is to be exported based on page settings, content, or clip bounds. The exporting options are as follows:

  • PageSettings: Specifies the region within the x, y, width, and height values of page settings that is printed or exported.
  • Content: Specifies the content of the diagram without empty space around the content that is printed or exported.
  • ClipBounds: Exports the region specified using the ClipBounds property of DiagramExportSettings. This is applicable for export only.

For more information, refer to DiagramPrintExportRegion.

The following code example illustrates how to export the diagram based on page settings.

@using Syncfusion.Blazor.Diagram
@using Syncfusion.Blazor.Buttons

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

@code {
    //Reference the diagram
    SfDiagramComponent diagram;

    private async Task Export()
    {
        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);
    }
}

You can download a complete working sample from GitHub

How to Export Diagram with Custom Bounds

Diagram provides support to export any specific region of the diagram by using the ClipBounds property.

The following code example illustrates how to export the region specified in the bounds.

@using Syncfusion.Blazor.Diagram
@using Syncfusion.Blazor.Buttons

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

@code{
     SfDiagramComponent diagram;

     private async Task Export()
     {
          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);
     }
}

You can download a complete working sample from GitHub

How to Export Diagram as Single or Multiple Pages

Diagram provides support to export the entire diagram to either a single page or multiple pages using the FitToPage property. By default, this property is set to false.

  • True: Exports the diagram in a single page.
  • False: Exports the diagram into multiple pages.

The following code example illustrates how to export the diagram to a single page.

@using Syncfusion.Blazor.Diagram
@using Syncfusion.Blazor.Buttons

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

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

    private async Task Export()
    {
        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 };
        //To export the diagram
        await diagram.ExportAsync("Diagram", DiagramExportFormat.PNG, export);
    }
}

You can download a complete working sample from GitHub

How to Change Orientation at Runtime

Diagram provides support to switch between Portrait and Landscape orientation while exporting. You can change the orientation by setting the DiagramExportSettings.Orientation Property. The default value is Landscape.

@using Syncfusion.Blazor.Diagram
@using Syncfusion.Blazor.Buttons

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

@code{
     SfDiagramComponent diagram;

     private async Task Export()
     {
          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 };
          //To export the diagram
          await diagram.ExportAsync("diagram", DiagramExportFormat.PNG, export);
     }
}

You can download a complete working sample from GitHub

How to Export the Diagram as PDF

Diagram does not have built-in support to convert the diagram to a PDF file. However, you can achieve this by exporting the diagram as a base-64 and then converting the exported file to PDF using Syncfusion.PdfExport.PdfDocument. Javascript functions downloadPdf and triggerDownload are invoked to automatically download the pdf file.

The following code illustrates how to export the diagram as PDF file.

@using Syncfusion.PdfExport;

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

<SfButton Content="ExportPDF" OnClick="@ExportPDF" />
<SfDiagramComponent Height="600px" @ref="@diagram">
</SfDiagramComponent>

@code{
    //Reference the diagram
    SfDiagramComponent diagram;

    private async void ExportPDF()
    {
        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 ExportToPdf("diagram", pdforientation, true, images);        
    }
    //
    private async Task<string> ExportToPdf(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;
    }

  }

    // 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();
}

You can download a complete working sample from GitHub

See Also