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 von JavaScript einzuplanen. Im Folgenden finden Sie ein Beispiel, das zeigt, wie dieser Prozess konfiguriert werden kann:

Im obigen Code haben wir die Ausführung von JavaScript mithilfe der Eigenschaft enableJavaScript aktiviert. Die Eigenschaft waitFor wird verwendet, um den Rendering-Prozess zu verzögern und auf die Ausführung von JavaScript 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.

Darüber hinaus stellt die Medienoption CSS sicher, dass die Darstellung und das Layout des HTML-Inhalts den Bildschirmeinstellungen entsprechen.

JS Charts to PDF Beispiel auf GitHub erforschen