Renderizar gráficos en PDFs

VB C#

using IronPdf;

const string 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>";

// Instantiate Renderer
var renderer = new ChromePdfRenderer();

// Enable JavaScript in our RenderingOptions
renderer.RenderingOptions.EnableJavaScript = true;
renderer.RenderingOptions.WaitFor.JavaScript();
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print;

var pdf = renderer.RenderHtmlAsPdf(htmlWithJs);

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

IRON VB CONVERTER ERROR developers@ironsoftware.com

Install-Package IronPdf

Renderizar gráficos en PDFs

Junto con potentes capacidades de conversión de HTML a PDF, IronPDF proporciona soporte completo para la representación de JavaScript, lo que incluye soporte para la representación de canvas y gráficos. Este soporte completo para JavaScript permite a los desarrolladores crear PDFs de alta calidad con gráficos completamente renderizados, incluyendo gráficos 3D y polígonos.

Algunos gráficos compatibles incluyen:

C3.js
D3.js
Highcharts

Para comenzar, primero necesitamos crear el contenido HTML que se utilizará para crear nuestro documento PDF. Este HTML incluye JavaScript en línea para generar un gráfico de barras utilizando la biblioteca C3. La función setTimeout asegura que después de 1 segundo, se llama a window.ironpdf.notifyRender(), señalando a IronPDF que continúe con el renderizado de la página una vez que el JavaScript haya completado su ejecución.

Ahora podemos ver cómo esto se renderiza en un documento PDF fácil de leer. Primero, creamos una nueva instancia de ChromePdfRenderer, que se utiliza para acceder al potente motor de renderizado que utiliza IronPDF y permite que JavaScript avanzado se renderice en la página HTML.

A continuación, tenemos tres opciones diferentes que se establecen utilizando la clase RenderingOptions. La primera, EnableJavaScript = true, asegura que el JavaScript dentro de nuestro documento HTML de ejemplo se ejecute al renderizar la página HTML. WaitFor.JavaScript() se utiliza para pausar el proceso de renderizado hasta que todo el JavaScript haya sido ejecutado, asegurando que el gráfico se renderice correctamente. La tercera opción, CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print, establece el tipo de medio CSS en imprimir, optimizando los estilos para la renderización de PDF.

El siguiente paso es finalmente renderizar el documento HTML que creamos anteriormente en un archivo PDF. Esto se hace a través del método RenderHtmlAsPdf, que toma la variable htmlWithJs y convierte el HTML y JavaScript en un nuevo documento PDF.

Finalmente, el documento PDF se puede guardar utilizando el método SaveAs. Ahora tendrás un nuevo documento PDF con un gráfico completamente renderizado creado usando HTML y JavaScript.

Descubra cómo convertir JavaScript a PDF con IronPDF.

Ver en GitHub

Código

https://github.com/iron-software/IronPdf.Examples/tree/main/examples/js-charts-to-pdf

Descargar ZIP

¿Listo para empezar?

Nuget Descargas 16,685,821 | Versión: 2025.12 recién lanzado

Ver Licencias