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

npm i @ironsoftware/ironpdf

npm i @ironsoftware/ironpdf

Diagramme in PDFs rendern

Beim Laden von Diagrammen über JavaScript, stellen Sie sicher, dass genügend Zeit für die JavaScript Ausführung eingeräumt wird. Im Folgenden finden Sie ein Beispiel, das zeigt, wie dieser Prozess konfiguriert werden kann:

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

Darüber hinaus wird die CSS Medienoption sicherstellen, dass die Ansicht und das Layout des HTML Inhalts den Bildschirmeinstellungen entsprechen.

JS Charts to PDF Beispiel auf GitHub erforschen

Auf GitHub ansehen