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

IRON VB CONVERTER ERROR developers@ironsoftware.com

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 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 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 eingebettetes JavaScript, um ein Balkendiagramm mit der C3-Bibliothek zu erzeugen. Die Funktion setTimeout stellt sicher, dass nach 1 Sekunde window.ironpdf.notifyRender() aufgerufen wird, um IronPDF zu signalisieren, dass die Seite gerendert werden kann, sobald die Ausführung des JavaScripts 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 erweiterte JavaScript-Darstellung auf der HTML-Seite zu ermöglichen.

Als nächstes haben wir drei verschiedene Optionen, die mit der RenderingOptions-Klasse festgelegt werden. Die 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 Renderprozess zu pausieren, bis das gesamte JavaScript ausgeführt wurde, um sicherzustellen, dass das Diagramm ordnungsgemäß gerendert wird. Die dritte Option, CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print, legt den CSS-Medientyp auf Druck fest, um die Stile für die PDF-Darstellung zu optimieren.

Der nächste Schritt ist es, das zuvor erstellte HTML-Dokument endgültig in eine PDF-Datei zu rendern. Dies geschieht über die Methode RenderHtmlAsPdf, die die Variable htmlWithJs übernimmt und das 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 Sie JavaScript mit IronPDF in PDF umwandeln können.

Auf GitHub ansehen

Code

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

ZIP herunterladen