Diagramme in PDFs rendern

from ironpdf import *

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]
                ]
            }
            });
        </script>
    </body>
</html>
"""

# Instantiate Renderer
renderer = ChromePdfRenderer()

# Enable JavaScript in our RenderingOptions
renderer.RenderingOptions.EnableJavaScript = True
renderer.RenderingOptions.WaitFor.RenderDelay(1000)
renderer.RenderingOptions.CssMediaType = PdfCssMediaType.Print

pdf = renderer.RenderHtmlAsPdf(htmlWithJs)

# Export to a file or Stream
pdf.SaveAs("js-chart.pdf")

Diagramme in PDFs rendern

IronPDF for Python kann interaktive JavaScript-Diagrammbibliotheken — wie D3.js und C3.js — direkt in PDF rendern und erstellt hochwertige Diagrammbilder ohne zusätzlichen Bildkonvertierungsschritt.

Einstieg

Erstellen Sie Ihr Diagramm in einem eigenständigen HTML-String, der die notwendigen CDN-Skript-Tags enthält. Setzen Sie EnableJavaScript = True und fügen Sie eine großzügige WaitFor.RenderDelay hinzu, um sicherzustellen, dass die Diagrammbibliothek das Zeichnen abgeschlossen hat, bevor das PDF erfasst wird. Setzen Sie optional CssMediaType auf Print, um druckspezifische Stile anzuwenden.

Den Code verstehen

EnableJavaScript: Erforderlich, um die D3- und C3-Skripte auszuführen, die das Diagramm erzeugen.
WaitFor.RenderDelay(1000): Wartet 1000 Millisekunden nach dem Laden der Seite. Diagrammbibliotheken führen asynchrones Rendering durch; daher ist eine längere Verzögerung erforderlich im Vergleich zur einfachen DOM-Manipulation.
CssMediaType = PdfCssMediaType.Print: Aktiviert @media print-CSS-Regeln, die in der Regel interaktive Steuerelemente entfernen und ein saubereres Diagrammlayout im PDF erzeugen.
RenderHtmlAsPdf(htmlWithJs): Rendert das vollständige HTML — einschließlich des gerenderten Diagramms — als PDF-Dokument.

Unterstützte Diagrammbibliotheken

Da IronPDF die Chrome-Rendering-Engine verwendet, wird jede JavaScript-Diagrammbibliothek, die in einem Browser läuft, auch korrekt in PDF gerendert. Dies umfasst Chart.js, Highcharts, ApexCharts, ECharts und andere.

Lernen Sie, HTML mit IronPDF for Python in PDF zu konvertieren!