Diagramme und Grafiken in PDFs rendern


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>

Diagramme und Grafiken in PDFs rendern

IronPDF kann Webseiten mit Diagrammen, Grafiken und anderen Elementen rendern, die mit modernen JavaScript-Technologien erstellt wurden.

IronPDF unterstützt WebGL, sodass es den Web-Canvas-Aufbau von Elementen unter Verwendung der Hardware-Grafikfähigkeiten des Computers verarbeiten kann.

IronPDF unterstützt alle Drittanbieter-Diagrammbibliotheken, einschließlich:

C3.js
D3.js
Highcharts

Die setEnableJavaScript Methode auf dem ChromePdfRenderOptions Objekt ermöglicht es dem Entwickler, die Verarbeitung von intern oder extern referenziertem JavaScript innerhalb einer Webseite zu aktivieren. Diese Eigenschaft muss auf true gesetzt werden, um IronPDF die Verarbeitung des JavaScripts zu ermöglichen, das benötigt wird, um die Diagramme und Grafiken auf einer Webseite zu rendern.

Der setRenderDelay konfiguriert IronPDF so, dass die Interpretation des JavaScripts einer Webseite für eine bestimmte Zeit (in Millisekunden) verzögert wird, nachdem das DOM geladen wurde. Diese Methode ist nützlich, um sicherzustellen, dass der HTML-zu-PDF-Konverter von IronPDF Inhalte erfasst, die auf einer Webseite Sekunden nach dem ersten Laden durch den Browser erscheinen. Dies ist besonders relevant für asynchronen JavaScript-Code, der lange Zeit zum Ausführen benötigt.

Verweisen Sie auf das JavaScript Charts to PDF Code Example für weitere Details zu zusätzlichen Methoden, die in der ChromePdfRenderOptions Klasse verfügbar sind.

Rendern Sie JavaScript-Diagramme in PDF

Fügen Sie IronPDF Ihrem Maven-Projekt hinzu:
Verwenden Sie ChromePdfRenderOptions, um JavaScript zu aktivieren und Verzögerungs-/Medientyp zu konfigurieren.
Rendern Sie HTML (Inline-String, Datei oder URL) mit PdfDocument.renderHtmlAsPdf(...).
Speichern Sie das Ergebnis mit saveAs(...).

Lernen Sie, JavaScript für das PDF-Rendering zu aktivieren

Auf GitHub ansehen