Renderizar gráficos en PDFs

VB C#

string(21) "Haga clic para copiar"

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

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 for 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 garantiza que después de 1 segundo, se llame a window.ironpdf.notifyRender(), lo que indica a IronPDF que proceda con la representación de la página una vez que JavaScript haya completado la ejecución.

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

A continuación, tenemos tres opciones diferentes que se configuran mediante la clase RenderingOptions. El primero, EnableJavaScript = true, garantiza 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 se haya ejecutado todo el JavaScript , lo que garantiza que el gráfico se renderice correctamente. La tercera opción, CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print, establece el tipo de medio CSS para imprimir, optimizando los estilos para la representación de PDF.

El siguiente paso es convertir el documento HTML creado anteriormente en un archivo PDF. Esto se realiza mediante el método RenderHtmlAsPdf, que toma la variable htmlWithJs y convierte el HTML y el 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