Renderizar gráficos en 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")

Renderizar gráficos en PDFs

IronPDF for Python puede renderizar bibliotecas de gráficos interactivos de JavaScript — como D3.js y C3.js — directamente a PDF, produciendo imágenes de gráficos de alta calidad sin ningún paso adicional de conversión de imágenes.

Empezando

Construya su gráfico en una cadena HTML autocontenida que incluya las etiquetas de script necesarias del CDN. Establece EnableJavaScript = True y añade un generoso WaitFor.RenderDelay para asegurar que la biblioteca de gráficos haya finalizado el dibujo antes de que se capture el PDF. Opcionalmente, configure CssMediaType a Print para aplicar estilos específicos de impresión.

Entender el código

EnableJavaScript: Necesario para ejecutar los scripts de D3 y C3 que generan el gráfico.
WaitFor.RenderDelay(1000): Espera 1000 milisegundos después de la carga de la página. Las bibliotecas de gráficos realizan renderizado asincrónico, por lo que es necesario un retraso mayor en comparación con la manipulación simple del DOM.
CssMediaType = PdfCssMediaType.Print: Activa las reglas de CSS @media print, que generalmente eliminan controles interactivos y producen un diseño de gráfico más limpio en el PDF.
RenderHtmlAsPdf(htmlWithJs): Renderiza el HTML completo, incluido el gráfico renderizado, como un documento PDF.

Bibliotecas de gráficos compatibles

Debido a que IronPDF utiliza el motor de renderizado de Chrome, cualquier biblioteca de gráficos de JavaScript que se ejecute en un navegador también se renderizará correctamente en PDF. This includes Chart.js, Highcharts, ApexCharts, ECharts, and others.

¡Aprende a convertir HTML a PDF con IronPDF for Python!