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(htmlConJs);

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 garantiza que después de 1 segundo, window.ironpdf.notifyRender()se llama, señalando a IronPDF para proceder con la renderizació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 utiliza para acceder al potente motor de renderizado que utiliza IronPDF, y permite que el 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 se haya 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 "print", 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 mediante el 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.

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