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

Grafikleri PDF'lerde Oluşturma

JavaScript kullanarak grafikleri yüklerken, JavaScript'in yürütülmesi için yeterli süre tanınması ö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, işleme sürecini geciktirmek ve JavaScript'nin yürütülmesini beklemek için kullanılır. WaitForType.JavaScript kullanılan bu özel yapılandırma, komut dosyasında window.ironpdf.notifyRender işlevi çağrılana kadar veya maksimum bekleme süresine ulaşılana kadar bekleyecektir.

Ayrıca, CSS medya seçeneği, HTML içeriğinin görünümü ve düzeninin ekran ayarlarına uygun olmasını sağlar.

JS Grafiklerden PDF Örneğini GitHub'da Keşfedin