Rendu de graphiques dans les PDFs

from ironpdf import *

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]
                ]
            }
            });
        </script>
    </body>
</html>
"""

# Instantiate Renderer
renderer = ChromePdfRenderer()

# Enable JavaScript in our RenderingOptions
renderer.RenderingOptions.EnableJavaScript = True
renderer.RenderingOptions.WaitFor.RenderDelay(1000)
renderer.RenderingOptions.CssMediaType = PdfCssMediaType.Print

pdf = renderer.RenderHtmlAsPdf(htmlWithJs)

# Export to a file or Stream
pdf.SaveAs("js-chart.pdf")

Rendu de graphiques dans les PDFs

IronPDF for Python peut rendre les bibliothèques de graphiques JavaScript interactives — telles que D3.js et C3.js — directement en PDF, produisant des images de graphiques de haute qualité sans étape de conversion d'image supplémentaire.

Commencer

Créez votre graphique dans une chaîne HTML autonome qui inclut les balises de script CDN nécessaires. Définissez EnableJavaScript = True et ajoutez un généreux WaitFor.RenderDelay pour s'assurer que la bibliothèque de graphiques ait fini de dessiner avant que le PDF soit capturé. Définissez CssMediaType sur Print de manière facultative pour appliquer des styles spécifiques à l'impression.

Comprendre le code

EnableJavaScript : Requis pour exécuter les scripts D3 et C3 qui génèrent le graphique.
WaitFor.RenderDelay(1000) : Attente de 1000 millisecondes après le chargement de la page. Les bibliothèques de graphiques effectuent un rendu asynchrone, donc un délai plus long est nécessaire par rapport à une simple manipulation DOM.
CssMediaType = PdfCssMediaType.Print : Active les règles CSS @media print, qui éliminent généralement les contrôles interactifs et produisent une mise en page de graphique plus propre dans le PDF.
RenderHtmlAsPdf(htmlWithJs) : Renderise l'intégralité du HTML — y compris le graphique rendu — en tant que document PDF.

Bibliothèques de graphiques prises en charge

Parce qu'IronPDF utilise le moteur de rendu Chrome, toute bibliothèque de graphiques JavaScript qui s'exécute dans un navigateur se rendra également correctement en PDF. Cela inclut Chart.js, Highcharts, ApexCharts, ECharts, et d'autres.

Apprenez à convertir HTML en PDF avec IronPDF for Python !