Rendu de graphiques dans les PDFs

string(19) "Cliquez pour copier"

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

Rendu de graphiques dans les PDFs

Lors du chargement de graphiques avec 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 JavaScript en utilisant la propriété enableJavaScript. La propriété waitFor est utilisée pour retarder le processus de rendu et attendre que le JavaScript s'exécute. Cette configuration spécifique, utilisant WaitForType.JavaScript, attendra 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 mise en page du contenu HTML respectent les paramètres de l'écran.

Explorer l'exemple JS Charts to PDF sur GitHub