Diagramme in PDFs rendern

VBC#

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

PM > Install-Package IronPdf

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. Dieses HTML enthält inline JavaScript, um ein Balkendiagramm mit der Bibliothek C3 zu erzeugen. Die setTimeout Funktion stellt sicher, dass nach 1 Sekunde window.ironpdf.notifyRender() aufgerufen wird, was IronPDF signalisiert, mit dem Rendern der Seite fortzufahren, sobald die JavaScript-Ausführung 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 zuzugreifen, die IronPDF benutzt, und ermöglicht das Rendern von fortgeschrittenem JavaScript auf der HTML-Seite.

Als nächstes haben wir drei verschiedene Optionen, die mit der RenderingOptions Klasse festgelegt werden. Die erste, EnableJavaScript = true, stellt sicher, dass das JavaScript innerhalb unseres Beispiel-HTML-Dokuments ausgeführt wird, wenn die HTML-Seite gerendert wird. WaitFor.JavaScript() wird verwendet, um den Renderprozess zu pausieren, bis sämtliches JavaScript ausgeführt wurde, um sicherzustellen, dass das Diagramm ordnungsgemäß gerendert wird. Die dritte Option, CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print, setzt den CSS-Mediatyp auf Drucken und optimiert die Stile für die PDF-Ausgabe.

Der nächste Schritt besteht darin, das HTML-Dokument, das wir zuvor erstellt haben, endlich in eine PDF-Datei zu rendern. Dies geschieht über die RenderHtmlAsPdf Methode, die die htmlWithJs Variable entgegennimmt und das HTML und JavaScript in ein neues PDF-Dokument umwandelt.

Schließlich kann das PDF-Dokument mit der SaveAs Methode 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