How to Export .NET MVC Diagram to PDF Without UI in C#?

In the Syncfusion® ASP.NET MVC Diagram component, diagrams can be rendered and exported in multiple formats. While Syncfusion® doesn’t provide a direct built-in method to export diagrams to PDF, you can achieve this by leveraging the HtmlToPdfConverter from the Syncfusion® Essential PDF library, combined with the Blink rendering engine for HTML-to-PDF conversion.

This approach allows you to load previously created diagram JSON data into the diagram and then export it as a PDF on the backend, without the need for UI interaction.

Workflow for Exporting Diagram to PDF

1. Load Diagram from JSON:
   The diagram is rendered on the frontend using dynamically provided JSON data, which is loaded into the diagram upon initialization. This can be done using the loadDiagram method within the created event.

2. Export Diagram to PDF:
   When the user clicks the export button, the diagram’s content is sent to the backend via an AJAX request for PDF generation.

3. PDF Generation:
   The backend uses Syncfusion’s HtmlToPdfConverter with Blink settings to generate the PDF. The resulting PDF is then either saved to disk or returned to the client for download.

Sample Code

The following HTML and JavaScript initializes the diagram, allows loading of the JSON data, and triggers the PDF export.

<div>
    <input type="button" value="Export as PDF" onclick="ExportAsPDF()">
    @Html.EJS().Diagram("diagram").Created("diagramCreated").Width("100%").Height("800px").Render()
</div>

<script>
    function diagramCreated() {
        var diagram = document.getElementById("diagram").ej2_instances[0];
        diagram.loadDiagram(JSON.stringify({"width":"100%","height":"700px","nodes":[{"id":"NewIdea","height":60,"offsetX":611.1111450195312,"offsetY":80,"width":145}],"version":17.1}));

    }

    function exportAsPDF() {
        var diagram = document.getElementById("diagram").ej2_instances[0];
        var htmlData = diagram.getDiagramContent();
        $.ajax({
            type: "POST",
            url: "/Home/GenerateDocument",
            data: JSON.stringify({ 'Options': htmlData }),
            contentType: 'application/json; charset=utf-8',
            success: function () { alert("PDF Exported Successfully!"); }
        });
    }
</script>

The backend method GenerateDocument takes the JSON data, converts it into a PDF using the Blink rendering engine, and returns the PDF file.

[HttpPost]
public ActionResult GenerateDocument(string Options)
{
    HtmlToPdfConverter htmlConverter = new HtmlToPdfConverter();
    BlinkConverterSettings blinkConverterSettings = new BlinkConverterSettings
    {
        ViewPortSize = new System.Drawing.Size(1280, 0)
    };
    htmlConverter.ConverterSettings = blinkConverterSettings;

    PdfDocument document = htmlConverter.Convert(Options, string.Empty);
    MemoryStream stream = new MemoryStream();
    document.Save(stream);
    return File(stream.ToArray(), System.Net.Mime.MediaTypeNames.Application.Pdf, "Diagram.pdf");
}

For complete sample, download from the provided Drive Link

This approach allows you to export diagrams to PDF programmatically without UI interaction. By leveraging the Blink rendering engine, you can ensure high-quality PDF exports that maintain the fidelity of the original diagram. For detailed documentation on Syncfusion’s HTML-to-PDF converter and the Blink rendering engine, refer to the Documentation

Conclusion
I hope you enjoyed learning about how to export a diagram to PDF without UI in C#.

You can refer to our ASP.NET MVC 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 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, Direct-Trac, or feedback portal. We are always happy to assist you!