How to export the html shapes into image and pdf format in Blazor Diagram WASM application?

We can export Blazor Diagram in the specified format like jpeg, png, SVG, and pdf file types. While exporting the diagram, the diagram will be drawn in a canvas, and then the canvas is converted to image format. Drawing HTML elements using SVG on a canvas and converting canvas to an image will cause security issues in the browser. So, we cannot provide in-build support to export HTML nodes into the image in the diagram.

We have achieved HTML to image export with the HTML2Canvas open library in WASM application. By using this, you will be able to export the diagram to image and pdf format with a Javascript interop call.

To know more about HTML2Canvas library, refer to the following link.
html2canvas: Screenshots with JavaScript (github.com)

The following steps will explain on how to export the Html shapes into the image format in WASM application

Step 1:

Create a simple WebAssembly application using the following link.
Create WASM application.

Step 2:

Create a diagram component with HTML template shape nodes. Please refer to the link below for instructions on how to create the nodes.

Create Diagram Nodes

Step 3:

Use the C# and JavaScript code below to export the HTML shape into an image format.

Code snippet:
C#:

       /// <summary>
       /// Asynchronously exports the OrgChartDiagram to an image using JavaScript interop.
       /// </summary>
       /// <remarks>
       /// This method uses JavaScript interop to invoke the 'exportToImage' function, passing the 'OrgChartDiagram' as the parameter.
       /// </remarks>
       /// <returns>
       /// A <see cref="Task"/> representing the asynchronous operation.
       /// </returns>
       private async Task ExportImage()
       {
            await JS.InvokeAsync<object>("exportToImage", "OrgChartDiagram");
       } 

JavaScript:

/**
* Asynchronously exports the content of an HTML element to an image.
* @param {string} elementId - The ID of the HTML element to export.
* @returns {Promise<void>} - A Promise that resolves when the export is complete.
*/
window.exportToImage = async function(elementId)
       {
           var element = document.querySelector("#" + elementId);
           var image = "";
           await html2canvas(element).then(canvas => image = canvas.toDataURL("image/png"));
           var link = document.createElement("a");
           link.href = image;
           link.download = "diagram.png";
           link.click();
       } 

The following steps will explain on how to export the Html shapes into the PDF format in WASM application
Step 1:

Create a simple WebAssembly application using the following link.
Create WASM application.
Use the following package to export the HTML shape into PDF format.

Create a diagram component with HTML template shape nodes. Please refer to the link below for instructions on how to create the nodes.

Create Diagram Nodes

Step 3:

Use the C# and JavaScript code below to export the HTML shape into an pdf format.

Code snippet:
C#:

   /// <summary>
   /// Asynchronously exports the OrgChartDiagram to a PDF file.
   /// </summary>
   /// <returns>
   /// A <see cref="Task"/> representing the asynchronous operation.
   /// </returns>
   private async Task ExportDiagram()
   {
       string image = await JS.InvokeAsync<string>("exportToPdf", "OrgChartDiagram");
       string[] images = new string[] { image };
       await ExportToPdf("diagram", PdfPageOrientation.Portrait, true, images);
   }
   /// <summary>
   /// Asynchronously exports images to a PDF file.
   /// </summary>
   /// <param name="fileName">The name of the PDF file.</param>
   /// <param name="orientation">The orientation of the PDF pages.</param>
   /// <param name="allowDownload">Specifies whether to allow downloading the PDF.</param>
   /// <param name="images">An array of base64-encoded image strings.</param>
   /// <returns>
   /// A <see cref="Task{TResult}"/> representing the asynchronous operation. The task result contains the base64-encoded PDF string if allowDownload is false; otherwise, it returns an empty string.
   /// </returns>
   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 };
       DiagramRect bounds = Diagram.GetPageBounds();
       document.PageSettings.Height = (float)bounds.Height;
       document.PageSettings.Width = (float)bounds.Width;
       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:

/**
* Asynchronously exports the content of an HTML element to a base64-encoded image string.
* @param {string} elementId - The ID of the HTML element to export.
* @returns {Promise<string>} - A Promise that resolves with the base64-encoded image string.
*/
window.exportToPdf = async function (elementId) {
   var element = document.querySelector("#" + elementId);
   var image = "";
   await html2canvas(element).then(canvas => image = canvas.toDataURL("image/png"));
   return image;
} 

You can download the complete working sample from here.

The following screenshot illustrates the output of the above sample.

Note: With this library, we can only export the image as a single page; it does not support exporting multiple pages.

Conclusion

I hope you enjoyed learning how to export the html shapes into image and pdf format in Blazor Diagram WASM application.

You can refer to our Blazor Diagram feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Blazor Diagram example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!