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 des ChromePdfRenderOptions-Objekts ermöglicht es dem Entwickler, die Verarbeitung von JavaScript zu aktivieren, auf das innerhalb einer Webseite intern oder extern verwiesen wird. 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 Befehl setRenderDelay konfiguriert IronPDF so, dass die Interpretation des JavaScript einer Webseite für eine bestimmte Zeit (in Millisekunden) nach dem Laden des DOMs verzögert wird. 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.

Weitere Informationen zu den zusätzlichen Methoden der Klasse ChromePdfRenderOptions finden Sie im Code-Beispiel "JavaScript Charts to PDF".

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.
HTML (Inline-String, Datei oder URL) mithilfe von PdfDocument.renderHtmlAsPdf(...) rendern.
Speichern Sie die Ausgabe mit saveAs(...).

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