Rendering von Diagrammen in PDFs

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

IRON VB CONVERTER ERROR developers@ironsoftware.com

Install-Package IronPdf

Rendering von Diagrammen in PDFs

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

Einige unterstützte Diagramme sind:

C3.js
D3.js
Highcharts

Schritte zum Rendern von Diagrammen in PDFs


var renderer = new ChromePdfRenderer
```();


var renderer = new ChromePdfRenderer
```();

Dim renderer = New ChromePdfRenderer ```()

renderer.RenderingOptions.EnableJavaScript = true;
renderer.RenderingOptions.WaitFor.JavaScript();

renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print;
var pdf = renderer.RenderHtmlAsPdf(htmlMitJs);

Zu Beginn müssen wir zuerst den HTML-Inhalt erstellen, der zur Erstellung unseres PDF-Dokuments verwendet wird. Dieses HTML enthält Inline-JavaScript, um mit der C3-Bibliothek ein Balkendiagramm zu erstellen. Die Funktion setTimeout stellt sicher, dass nach 1 Sekunde window.ironpdf.notifyRender ()wird aufgerufen, wodurch IronPDF das Signal erhält, mit dem Rendern der Seite fortzufahren, sobald die JavaScript-Ausführung abgeschlossen ist.

Nun können wir uns ansehen, wie dies in ein leicht lesbares PDF-Dokument gerendert wird. Zuerst erstellen wir eine neue Instanz von ChromePdfRenderer, die verwendet wird, um auf die leistungsstarke Rendering-Engine zuzugreifen, die IronPDF nutzt, und es ermöglicht, fortgeschrittenes JavaScript auf der HTML-Seite zu rendern.

Als nächstes haben wir drei verschiedene Optionen, die mit der Klasse RenderingOptions festgelegt werden. Der erste, EnableJavaScript = true, stellt sicher, dass das JavaScript in unserem HTML-Beispieldokument beim Rendern der HTML-Seite ausgeführt wird. WaitFor.JavaScript() wird verwendet, um den Renderprozess zu pausieren, bis alle JavaScript ausgeführt wurden, um sicherzustellen, dass das Diagramm korrekt gerendert wird. Die dritte Option, CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print, setzt den CSS-Mediatyp auf Druck und optimiert die Styles für das PDF-Rendering.

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

Abschließend kann das PDF-Dokument mithilfe 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.

Klicken Sie hier, um den Leitfaden mit Anleitungen, einschließlich Beispielen, Beispielcode und Dateien, anzusehen >