Grafikleri PDF'lerde Oluşturma

VB C#

using IronPdf;

const string 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>";

// Instantiate Renderer
var renderer = new ChromePdfRenderer();

// Enable JavaScript in our RenderingOptions
renderer.RenderingOptions.EnableJavaScript = true;
renderer.RenderingOptions.WaitFor.JavaScript();
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print;

var pdf = renderer.RenderHtmlAsPdf(htmlWithJs);

// Export to a file or Stream
pdf.SaveAs("js-chart.pdf");

Imports IronPdf

Const htmlWithJs As String = "<!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>"

' Instantiate Renderer
Dim renderer As New ChromePdfRenderer()

' Enable JavaScript in our RenderingOptions
renderer.RenderingOptions.EnableJavaScript = True
renderer.RenderingOptions.WaitFor.JavaScript()
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print

Dim pdf = renderer.RenderHtmlAsPdf(htmlWithJs)

' Export to a file or Stream
pdf.SaveAs("js-chart.pdf")

Install-Package IronPdf

Grafikleri PDF'lerde Oluşturma

Güçlü HTML'den PDF'ye dönüştürme yeteneklerinin yanı sıra, IronPDF tuval ve grafiklerin işlenmesi de dahil olmak üzere JavaScript işleme için tam destek sağlar. JavaScript için bu tam destek, geliştiricilerin 3D grafikler ve çokgenler dahil olmak üzere tamamen işlenmiş grafiklerle yüksek kaliteli PDF'ler oluşturmasını sağlar.

Desteklenen grafiklerden bazıları şunları içerir:

C3.js
D3.js
Highcharts

Başlamak için, PDF belgemizi oluşturmak için kullanılacak olan HTML içeriğini önce oluşturmamız gerekiyor. Bu HTML, C3 kütüphanesini kullanarak bir çubuk grafik oluşturmak için satır içi JavaScript içermektedir. setTimeout fonksiyonu, 1 saniye sonra window.ironpdf.notifyRender() fonksiyonunun çağrılmasını sağlayarak JavaScript çalışmasının tamamlanmasının ardından IronPDF'e sayfayı oluşturmaya devam etmesi için sinyal gönderir.

Şimdi, bunun kolay okunabilir bir PDF belgeye nasıl dönüştürüldüğüne bakalım. İlk olarak, güçlü render motoruna erişmek ve HTML sayfasında gelişmiş JavaScript'lerin işlenmesine izin vermek için kullanılan yeni bir ChromePdfRenderer örneği oluşturuyoruz.

Ardından, RenderingOptions sınıfı kullanılarak ayarlanacak üç farklı seçeneğimiz var. İlk olarak, EnableJavaScript = true, örnek HTML belgemizin içindeki JavaScript'in HTML sayfasını render ederken çalışmasını sağlar. WaitFor.JavaScript(), grafiğin doğru bir şekilde render edilmesini sağlamak için tüm JavaScript çalışana kadar render işlemini durdurmak için kullanılır. Üçüncü seçenek, CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print, CSS medya tipini yazdır olarak ayarlar ve PDF render işlemi için stilleri optimize eder.

Sonraki adım, daha önce oluşturduğumuz HTML belgeyi bir PDF dosyasına dönüştürmektir. Bu işlem, RenderHtmlAsPdf yöntemiyle gerçekleştirilir ve htmlWithJs değişkenini alarak HTML ve JavaScript'i yeni bir PDF belgisine dönüştürür.

Son olarak, PDF belgesi SaveAs yöntemi kullanılarak kaydedilebilir. Artık, HTML ve JavaScript kullanılarak oluşturulmuş tamamen işlenmiş bir grafik içeren yeni bir PDF belgeniz olacaktır.

IronPDF ile JavaScript'i PDF'ye Dönüştürmeyi Keşfedin.

GitHub'da Görüntüle

Kod

https://github.com/iron-software/IronPdf.Examples/tree/main/examples/js-charts-to-pdf

ZIP dosyasını indirin