Diagramme in PDFs rendern

VB C#

string(20) "Zum Kopieren klicken"

using IronPdf;

const string htmlWithJs =
    @"<!DOCTYPE html>
    <html>
        <head>
            <meta charset='utf-8' />
            <title>C3 Bar Chart</title>
        </head>
        <body>
            <div id='chart' style='width: 950px;'></div>
            <script src='https://d3js.org/d3.v4.js'></script>
            <!-- Load c3.css -->
            <link href='https://cdnjs.cloudflare.com/ajax/libs/c3/0.5.4/c3.css' rel='stylesheet'>
            <!-- Load d3.js and c3.js -->
            <script src='https://cdnjs.cloudflare.com/ajax/libs/c3/0.5.4/c3.js'></script>
            <script>
                Function.prototype.bind = Function.prototype.bind || function (thisp) {
                    var fn = this;
                    return function() {
                        return fn.apply(thisp, arguments);
                    };
                };
                var chart = c3.generate({
                bindto: '#chart',
                data: {
                    columns: [
                        ['data1', 30, 200, 100, 400, 150, 250],
                        ['data2', 50, 20, 10, 40, 15, 25]
                    ]
                }
                });
            // Set delay
            setTimeout(function() {
                window.ironpdf.notifyRender();
            }, 1000);
            </script>
        </body>
    </html>";

// Instantiate Renderer
var renderer = new ChromePdfRenderer();

// Enable JavaScript in our RenderingOptions
renderer.RenderingOptions.EnableJavaScript = true;
renderer.RenderingOptions.WaitFor.JavaScript();
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print;

var pdf = renderer.RenderHtmlAsPdf(htmlWithJs);

// Export to a file or Stream
pdf.SaveAs("js-chart.pdf");

Install-Package IronPdf

Diagramme in PDFs rendern

Zusammen mit leistungsstarken HTML-zu-PDF-Konvertierungsfunktionen bietet IronPDF volle Unterstützung für die JavaScript-Darstellung - einschließlich Unterstützung für Canvas- und Grafikdarstellung. Diese volle Unterstützung for JavaScript ermöglicht es Entwicklern, hochwertige PDFs mit vollständig gerenderten Diagrammen zu erstellen, einschließlich 3D-Diagrammen und Polygonen.

Einige unterstützte Diagramme umfassen:

C3.js
D3.js
Highcharts

Zunächst müssen wir den HTML-Inhalt erstellen, der zur Erzeugung unseres PDF-Dokuments verwendet wird. Dieser HTML-Code enthält Inline- JavaScript , um mithilfe der Bibliothek C3 ein Balkendiagramm zu generieren. Die Funktion setTimeout stellt sicher, dass nach 1 Sekunde die Funktion window.ironpdf.notifyRender() aufgerufen wird, wodurch IronPDF signalisiert wird, mit dem Rendern der Seite fortzufahren, sobald die Ausführung des JavaScript abgeschlossen ist.

Nun können wir sehen, wie dies in ein leicht lesbares PDF-Dokument gerendert wird. Zuerst erstellen wir eine neue ChromePdfRenderer-Instanz, die verwendet wird, um auf die leistungsstarke Rendering-Engine von IronPDF zuzugreifen und die Darstellung von fortgeschrittenem JavaScript auf der HTML-Seite zu ermöglichen.

Als nächstes haben wir drei verschiedene Optionen, die mit der Klasse RenderingOptions festgelegt werden. Der erste Code, EnableJavaScript = true, stellt sicher, dass der JavaScript innerhalb unseres Beispiel-HTML-Dokuments beim Rendern der HTML-Seite ausgeführt wird. WaitFor.JavaScript() wird verwendet, um den Rendering-Prozess anzuhalten, bis der gesamte JavaScript ausgeführt wurde, um sicherzustellen, dass das Diagramm ordnungsgemäß gerendert wird. Die dritte Option, CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print, setzt den CSS-Medientyp auf print und optimiert so die Stile für die PDF-Darstellung.

Im nächsten Schritt wird das zuvor erstellte HTML-Dokument in eine PDF-Datei umgewandelt. Dies geschieht mithilfe der Methode RenderHtmlAsPdf, die die Variable htmlWithJs verwendet und den HTML- und JavaScript in ein neues PDF-Dokument umwandelt.

Schließlich kann das PDF-Dokument mit der Methode SaveAs gespeichert werden. Nun haben Sie ein neues PDF-Dokument mit einem vollständig gerenderten Diagramm, das mit HTML und JavaScript erstellt wurde.

Entdecken Sie, wie man JavaScript mit IronPDF in PDF konvertiert.

Auf GitHub ansehen

Code

https://github.com/iron-software/IronPDF.Examples/tree/main/examples/js-charts-to-pdf

ZIP herunterladen

Bereit anzufangen?

Nuget Downloads 17,803,474 | Version: 2026.3 gerade veröffentlicht

Lizenzen anzeigen

Scrollst du immer noch?

Sie brauchen schnell einen Beweis? PM > Install-Package IronPdf
Führen Sie eine Probe aus Sehen Sie zu, wie Ihr HTML-Code in eine PDF-Datei umgewandelt wird.