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

npm i @ironsoftware/ironpdf

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