\n \n \n \n \n \n \n `;\n\n // Configure rendering options\n const options = {\n enableJavaScript: true,\n waitFor: {\n type: WaitForType.JavaScript,\n maxWaitTime: 1000, // 1000 milliseconds delay\n },\n cssMediaType: CssMediaType.Screen,\n };\n\n // Render HTML content to a PDF\n const pdf = await PdfDocument.fromHtml(htmlWithJs, { renderOptions: options })\n\n await pdf.saveAs(\"js-chart.pdf\");\n})();","about":{"@id":"https://ironpdf.com/tr/nodejs/examples/js-charts-to-pdf/#product"},"targetProduct":{"@id":"https://ironpdf.com/tr/nodejs/examples/js-charts-to-pdf/#product"},"keywords":"PDF'lerdegrafikleri işlememi,JavaScript grafik ve diyagramları Node.js,IronPDF waitFor özelliği,Node.js kullanarak PDF'e grafik ekleme,PDF işleme için JavaScript yürüt,PDF oluşturma sırasında JavaScript yürütme zamanlaması","datePublished":"2018-08-29","dateModified":"2026-06-29"}]}
Grafikleri PDF'lerde Oluşturma
import {PdfDocument, WaitForType, CssMediaType} from "@ironsoftware/ironpdf";

(async () => {
    const 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>`;

    // Configure rendering options
    const options = {
        enableJavaScript: true,
        waitFor: {
            type: WaitForType.JavaScript,
            maxWaitTime: 1000, // 1000 milliseconds delay
        },
        cssMediaType: CssMediaType.Screen,
    };

    // Render HTML content to a PDF
    const pdf = await PdfDocument.fromHtml(htmlWithJs, { renderOptions: options })

    await pdf.saveAs("js-chart.pdf");
})();
npm i @ironsoftware/ironpdf
Grafikleri PDF'lerde Oluşturma

Grafikleri PDF'lerde Oluşturma

Grafikleri JavaScript kullanarak yüklerken, JavaScript yürütmesi için yeterli zaman tanımak önemlidir. Aşağıda bu sürecin nasıl yapılandırılacağını gösteren bir örnek bulunmaktadır:

Yukarıdaki kodda, enableJavaScript özelliğini kullanarak JavaScript yürütmesini etkinleştirdik. waitFor özelliği, render sürecini geciktirmek ve JavaScript 'nun çalışmasını beklemek için kullanılır. Bu özel yapılandırma, WaitForType.JavaScript kullanarak, betik içinde window.ironpdf.notifyRender işlevi çağrılıncaya veya maksimum bekleme süresine ulaşılıncaya kadar bekleyecektir.

Ek olarak, CSS medya seçeneği, HTML içeriğinin görünüm ve yerleşiminin ekran ayarlarına uygun olmasını sağlayacaktır.

JS Grafiklerden PDF Örneğini GitHub'da Keşfedin
GitHub'da Görüntüle

Başlamaya Hazır mısınız?

Sürüm:2026.10yeni yayınlandı