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

Imports IronPdf

Const htmlWithJs As String = "<!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
Dim renderer As New ChromePdfRenderer()

' Enable JavaScript in our RenderingOptions
renderer.RenderingOptions.EnableJavaScript = True
renderer.RenderingOptions.WaitFor.JavaScript()
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print

Dim 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 usando la biblioteca C3. La función setTimeout asegura que después de 1 segundo, se llame a window.ironpdf.notifyRender(), señalando a IronPDF que continúe con la representación 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 usa para acceder al potente motor de representación que utiliza IronPDF y permite que el JavaScript avanzado se renderice en la página HTML.

Luego, tenemos tres opciones diferentes que se establecen usando 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 usa para pausar el proceso de renderización 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 realiza 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 usando 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