Representación de gráficos en PDF

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

Representación de gráficos en PDF

Junto con potentes capacidades de conversión de HTML a PDF, IronPDF proporciona soporte completo para la renderización de JavaScript, lo que incluye soporte para la renderizació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, incluidos gráficos 3D y polígonos.

Algunos gráficos compatibles son:

C3.js
D3.js
Highcharts

Pasos para renderizar gráficos en PDF

var renderer = new ChromePdfRenderer();

renderer.RenderingOptions.EnableJavaScript = true;

renderer.RenderingOptions.EnableJavaScript = true;

renderer.RenderingOptions.EnableJavaScript = True

$vbLabelText $csharpLabel

renderer.RenderingOptions.WaitFor.JavaScript();
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print;
var pdf = renderer.RenderHtmlAsPdf(htmlWithJs);

Para empezar, 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, window.ironpdf.notifyRender() sea llamada, señalando a IronPDF que proceda 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 usa IronPDF, y permite renderizar JavaScript avanzado en la página HTML.

A continuación, tenemos tres opciones diferentes que se establecen usando la clase RenderingOptions. El primero, 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 a impresión, 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 transforma 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.

Haga clic aquí para ver la Guía de cómo hacer, incluyendo ejemplos, código de muestra y archivos >