How to Include External CSS When Exporting HTML in Angular Diagram?

Overview

Exporting the Angular Diagram (with native and HTML nodes) directly to an image is not supported natively because the export process renders the diagram to a canvas and converts that canvas to an image. Accurately rendering arbitrary HTML/CSS inside a canvas is not fully feasible.

To handle this scenario, you can use the Syncfusion® Essential PDF library, which includes the Blink‑based HTML converter. This converter can accurately render HTML, CSS, SVG, and MHTML and convert them into PDF or image formats. It supports .NET platforms such as Windows Forms, WPF, ASP.NET MVC, and ASP.NET Core.

When exporting diagrams that include HTML nodes referencing external CSS/SCSS, you must provide these stylesheet references explicitly. If omitted, the exported content will not include custom styling. External CSS can be included by passing the stylesheet URLs to:

diagram.getDiagramContent(styleSheetReferences)

Use absolute paths for local CSS files or public URLs. If no references are passed, the export will include only the stylesheets currently loaded within the diagram’s DOM.

Client-side (Angular) — Get diagram content with external CSS

Use getDiagramContent to capture the diagram DOM as a string along with dependent stylesheet links.

getDiagramContent

Method: getDiagramContent
Argument: styleSheetReferences (optional) — an array of stylesheet references (absolute local paths or public URLs). If omitted, the method returns the diagram content together with all stylesheets currently loaded in the document.
Return: string — the diagram DOM as a string with stylesheets included.

Example implementation (TypeScript)

document.getElementById('export').onclick = () => {
  // Define external CSS files (absolute local URLs or public URLs)
  const styles: string[] = [
    'http://localhost:4200/assets/styles/custom-style.css',
    'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css'
  ];

  // Get diagram content as a string including stylesheet references
  const htmlData: string = this.diagram.getDiagramContent(styles) as string;

  const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
  const requestData = JSON.stringify({ Options: htmlData });
  const options = { headers: headers, body: requestData };

  this.http.post(url, requestData, options).subscribe(
    (result: any) => {
      console.log('success', result);
      this.diagram.exportImage(result.result, {
        fileName: 'diagram',
        mode: 'Download',
        region: 'Content',
        stretch: 'Meet',
        pageHeight: 300,
        pageWidth: 500,
        bounds: new Rect(0, 0, 500, 300)
      });
    },
    (error: any) => {
      console.error('error', error);
      // Handle errors here
    }
  );
};

Notes

When providing CSS links, prefer plain stylesheet URLs. If embedding <link> tags, ensure they are valid HTML strings and accepted by your server-side converter.
For local CSS files, ensure they are publicly accessible (see Angular configuration below).

Angular configuration for serving local CSS

If you use local CSS files, make them available via public URLs by configuring angular.json (or ensure they are included in src/assets or a public folder). Example snippet:

"build": {
  "options": {
    "assets": [
      { "glob": "**/*", "input": "public" },
      { "glob": "**/*", "input": "src/assets", "output": "assets" }
    ]
  }
}

With this configuration, a local file at src/assets/styles/custom-style.css is accessible at:

http://localhost:4200/assets/styles/custom-style.css

Server-side — Convert HTML to image (ASP.NET MVC example)

Prerequisites

Minimum .NET product version: specify as appropriate for your project.
Install the latest Syncfusion® HTML converter package for Blink rendering: https://www.nuget.org/packages/Syncfusion.HtmlToPdfConverter.Net.Windows
Include Newtonsoft.Json (v10.0.1 or above) if required by your project.

Assemblies (example)

Platform	Assemblies
.NET MVC	`Syncfusion.HtmlToPdfConverter.Net.Windows`, `Newtonsoft.Json` (v10.0.1+)

Server-side implementation (C#)

ExportUtility.cs

using Syncfusion.HtmlToPdfConverter; // adjust per package
using System;
using System.Drawing;
using System.IO;
using System.Drawing.Imaging;

public class ExportUtility
{
    public string ConvertImage(string htmlContent)
    {
        HtmlToPdfConverter converter = new HtmlToPdfConverter(HtmlRenderingEngine.Blink);
        Image[] images = converter.ConvertToImage(htmlContent, "");

        using (MemoryStream ms = new MemoryStream())
        {
            images[0].Save(ms, ImageFormat.Png);
            byte[] imageBytes = ms.ToArray();
            return "data:image/png;base64," + Convert.ToBase64String(imageBytes);
        }
    }
}

Controller action example

[HttpPost]
public ActionResult GenerateDocument([FromBody] DiagramOptions diagramOptions)
{
    string options = diagramOptions.Options;
    ExportUtility export = new ExportUtility();
    string image = export.ConvertImage(options);
    return Json(new { result = image });
}

Client-side image export

After the server returns the base64 image string, call exportImage() to download or display it:

this.http.post(url, requestData, options).subscribe(
  (result: any) => {
    this.diagram.exportImage(result.result, {
      fileName: 'diagram',
      mode: 'Download',
      region: 'Content',
      stretch: 'Meet',
      pageHeight: 300,
      pageWidth: 500,
      bounds: new Rect(0, 0, 500, 300)
    });
  }
);

Samples

Complete ASP.NET MVC Sample: Download Link
Client-side Angular Sample: visit sample

Conclusion

This approach enables exporting diagrams that include both native and HTML nodes with external styles applied by converting the diagram HTML to an image with the Blink-based HTML converter.

You can refer to our Angular Diagram feature tour page to learn about its other groundbreaking feature representations. You can explore our Angular Diagram documentation to understand how to present and manipulate data.

For current customers, you can check out our Angular 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 Angular Diagram and other Angular components.

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, Direct-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)