Diagramme in PDFs rendern

import {PdfDocument, WaitForType, CssMediaType} from "@ironsoftware/ironpdf";

(async () => {
    const 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>`;

    // Configure rendering options
    const options = {
        enableJavaScript: true,
        waitFor: {
            type: WaitForType.JavaScript,
            maxWaitTime: 1000, // 1000 milliseconds delay
        },
        cssMediaType: CssMediaType.Screen,
    };

    // Render HTML content to a PDF
    const pdf = await PdfDocument.fromHtml(htmlWithJs, { renderOptions: options })

    await pdf.saveAs("js-chart.pdf");
})();

Diagramme in PDFs rendern

Beim Laden von Diagrammen mit JavaScript ist es wichtig, ausreichend Zeit für die Ausführung des JavaScripts einzuplanen. Im Folgenden finden Sie ein Beispiel, das zeigt, wie dieser Prozess konfiguriert werden kann:

Im obigen Code haben wir die JavaScript-Ausführung mithilfe der enableJavaScript-Eigenschaft aktiviert. Die Eigenschaft waitFor wird verwendet, um den Rendering-Prozess zu verzögern und auf die Ausführung des JavaScripts zu warten. Diese spezifische Konfiguration, die WaitForType.JavaScript verwendet, wartet, bis die Funktion window.ironpdf.notifyRender im Skript aufgerufen wird oder bis die maximale Wartezeit erreicht ist.

Zusätzlich stellt die CSS-Media-Option sicher, dass Ansicht und Layout des HTML-Inhalts den Bildschirmeinstellungen entsprechen.

JS Charts zu PDF Beispiel auf GitHub erkunden