Diagramme in PDFs rendern

VB C#

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");

Imports IronPdf

Const htmlWithJs As String = "<!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
Dim renderer As New ChromePdfRenderer()

' Enable JavaScript in our RenderingOptions
renderer.RenderingOptions.EnableJavaScript = True
renderer.RenderingOptions.WaitFor.JavaScript()
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print

Dim 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 zur Erstellung eines Balkendiagramms unter Verwendung der Bibliothek C3. Die Funktion setTimeout stellt sicher, dass nach 1 Sekunde window.ironpdf.notifyRender() aufgerufen wird, wodurch IronPDF angewiesen wird, mit der Darstellung der Seite fortzufahren, sobald die Ausführung des JavaScripts abgeschlossen ist.

Nun können wir sehen, wie dies in ein leicht lesbares PDF-Dokument gerendert wird. Zunächst erstellen wir eine neue ChromePdfRenderer-Instanz, die den Zugriff auf die leistungsstarke Rendering-Engine von IronPDF ermöglicht und die Darstellung von erweitertem JavaScript auf der HTML-Seite erlaubt.

Als Nächstes haben wir drei verschiedene Optionen, die mithilfe der Klasse RenderingOptions festgelegt werden. Das erste, EnableJavaScript = true, stellt sicher, dass das JavaScript in unserem Beispiel-HTML-Dokument beim Rendern der HTML-Seite ausgeführt wird. WaitFor.JavaScript() wird verwendet, um den Rendering-Prozess anzuhalten, bis das gesamte JavaScript ausgeführt wurde, um sicherzustellen, dass das Diagramm korrekt 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.

Der nächste Schritt besteht darin, das zuvor erstellte HTML-Dokument schließlich in eine PDF-Datei zu rendern. Dies geschieht mithilfe der RenderHtmlAsPdf-Methode, die die Variable htmlWithJs verwendet und das HTML sowie das 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 19,014,616 | Version: 2026.5 just released

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.