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();
renderer.RenderingOptions.EnableJavaScript = true;
renderer.RenderingOptions.WaitFor.JavaScript();
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print;
var pdf = renderer.RenderHtmlAsPdf(htmlWithJs);

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 setTimeout-Funktion stellt sicher, dass nach 1 Sekunde window.ironpdf.notifyRender() aufgerufen wird, was IronPDF signalisiert, mit dem Rendern der Seite fortzufahren, sobald die Ausführung des JavaScripts abgeschlossen ist.

Nun können wir uns ansehen, wie dies in ein leicht lesbares PDF-Dokument gerendert wird. Zuerst erstellen wir eine neue ChromePdfRenderer-Instanz, die verwendet wird, um auf den leistungsstarken Rendering-Engine zuzugreifen, den IronPDF verwendet, und ermöglicht, dass erweiterte JavaScript im HTML-Dokument gerendert wird.

Als Nächstes haben wir drei verschiedene Optionen, die mit der Klasse RenderingOptions festgelegt werden. Das Erste, EnableJavaScript = true, stellt sicher, dass das JavaScript in unserem Beispiel-HTML-Dokument ausgeführt wird, wenn die HTML-Seite gerendert wird. WaitFor.JavaScript() wird verwendet, um den Rendering-Prozess zu pausieren, bis alle JavaScript-Ausführungen abgeschlossen sind, und stellt sicher, dass das Diagramm ordnungsgemäß gerendert wird. Die dritte Option, CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print, setzt den CSS-Mediatyp auf Print und optimiert die Stile für die PDF-Darstellung.

Der nächste Schritt besteht darin, das zuvor erstellte HTML-Dokument in eine PDF-Datei zu rendern. Dies geschieht über die RenderHtmlAsPdf-Methode, die die htmlWithJs-Variable verwendet, 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.

Klicken Sie hier, um den Leitfaden anzusehen, einschließlich Beispiele, Mustercode und Dateien >