Rendu de graphiques dans les PDFs

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

Rendu de graphiques dans les PDFs

Lors du chargement des graphiques en utilisant JavaScript, il est important de laisser suffisamment de temps pour l'exécution de JavaScript. Ci-dessous un exemple montrant comment configurer ce processus :

Dans le code ci-dessus, nous avons activé l'exécution de JavaScript en utilisant la propriété enableJavaScript. La propriété waitFor est utilisée pour retarder le processus de rendu et attendre que l'exécution de JavaScript ait lieu. Cette configuration spécifique, utilisant WaitForType.JavaScript, attendra jusqu'à ce que la fonction window.ironpdf.notifyRender soit appelée dans le script ou que le temps d'attente maximal soit atteint.

De plus, l'option de média CSS garantira que la vue et la disposition du contenu de HTML respectent les paramètres de l'écran.

Explorer l'exemple JS Charts to PDF sur GitHub

Voir sur GitHub