Renderización de Gráficos y Gráficas en PDFs


import com.ironsoftware.ironpdf.PdfDocument;
import com.ironsoftware.ironpdf.render.ChromePdfRenderOptions;
import com.ironsoftware.ironpdf.render.CssMediaType;
import java.io.IOException;
import java.nio.file.Paths;

String htmlWithJs = "var htmlWithJs = @\"<!DOCTYPE html>\n" +
        " <html>\n" +
        " <head>\n" +
        " <meta charset='utf-8' />\n" +
        " <title>C3 Bar Chart</title>\n" +
        " </head>\n" +
        " <body>\n" +
        " <div id='chart' style='width: 950px;'></div>\n" +
        " <script src='https://d3js.org/d3.v4.js'></script>\n" +
        " <!-- Load c3.css -->\n" +
        " <link href='https://cdnjs.cloudflare.com/ajax/libs/c3/0.5.4/c3.css' rel='stylesheet'>\n" +
        " <!-- Load d3.js and c3.js -->\n" +
        " <script src='https://cdnjs.cloudflare.com/ajax/libs/c3/0.5.4/c3.js'></script>\n" +
        " <script>\n" +
        " Function.prototype.bind = Function.prototype.bind || function (thisp) {\n" +
        " var fn = this;\n" +
        " return function() {\n" +
        " return fn.apply(thisp, arguments);\n" +
        " };\n" +
        " };\n" +
        " var chart = c3.generate({\n" +
        " bindto: '#chart',\n" +
        " data: {\n" +
        " columns: [\n" +
        " ['data1', 30, 200, 100, 400, 150, 250],\n" +
        " ['data2', 50, 20, 10, 40, 15, 25]\n" +
        " ]\n" +
        " }\n" +
        " });\n" +
        " </script>\n" +
        " </body>\n" +
        " </html>\"";

ChromePdfRenderOptions renderingOptions = new ChromePdfRenderOptions();
renderingOptions.setEnableJavaScript(true);
renderingOptions.setWaitFor(new WaitFor(1000));
renderingOptions.setCssMediaType(CssMediaType.PRINT);

PdfDocument pdf = PdfDocument.renderHtmlAsPdf(htmlWithJs, renderingOptions);

// Save the PDF
try {
    pdf.saveAs(Paths.get("assets/js_chart.pdf"));
} catch(IOException exception) {
    exception.printStackTrace();
}

mvn install

<dependency>
    <groupId>com.ironsoftware</groupId>
    <artifactId>ironpdf</artifactId>
    <version>2026.6.1</version>
</dependency>

Renderización de Gráficos y Gráficas en PDFs

IronPDF puede renderizar páginas web que contienen gráficos, gráficas y otros elementos construidos con tecnologías modernas de JavaScript.

IronPDF admite WebGL, lo que le permite procesar elementos construidos en lienzos web utilizando las capacidades gráficas de hardware de la máquina.

IronPDF admite todas las bibliotecas de gráficos de terceros, incluyendo:

C3.js
D3.js
Highcharts

El método setEnableJavaScript en el objeto ChromePdfRenderOptions permite al desarrollador habilitar el procesamiento de JavaScript referenciado interna o externamente dentro de una página web. Esta propiedad debe establecerse en verdadero para permitir que IronPDF procese el JavaScript necesario para renderizar los gráficos en una página web.

El setRenderDelay configura IronPDF para posponer la interpretación del JavaScript de una página web durante una cantidad de tiempo especificada (en milisegundos) después de que haya cargado su DOM. Este método es útil para garantizar que el conversor de HTML a PDF de IronPDF capture el contenido que aparece en una página web segundos después de que el navegador termine de cargarla inicialmente. Esto es particularmente relevante para el código JavaScript asíncrono que tarda mucho tiempo en completarse.

Consulte el Ejemplo de Código de Gráficos JavaScript a PDF para obtener más detalles sobre los métodos adicionales disponibles en la clase ChromePdfRenderOptions.

Renderizar gráficos JavaScript en PDF

Agregue IronPDF a su proyecto Maven:
Use ChromePdfRenderOptions para habilitar JavaScript y configurar el tipo de retraso/medio.
Renderice HTML (cadena en línea, archivo o URL) usando PdfDocument.renderHtmlAsPdf(...).
Guarde el resultado con saveAs(...).

Aprenda a activar JavaScript para la renderización de PDF

Ver en GitHub