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

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 im 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.

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

Verweise auf das JavaScript-Diagramme zu PDF Codebeispiel für weitere Details über zusätzliche auf der ChromePdfRenderOptions-Klasse verfügbare Methoden.

Rendern Sie JavaScript-Diagramme in PDF

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

Erfahren Sie, wie Sie JavaScript für die PDF-Darstellung aktivieren