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çerir. setTimeout işlevi, 1 saniye sonra window.ironpdf.notifyRender() işlevinin çağrılmasını sağlar ve JavaScript'in yürütülmesi tamamlandığında IronPDF'ye sayfayı işlemeyi sürdürmesi için sinyal gönderir.

Şimdi, bunun kolay okunabilir bir PDF belgeye nasıl dönüştürüldüğüne bakalım. İlk olarak, IronPDF'nin kullandığı güçlü görüntüleme motoruna erişmek ve HTML sayfasında gelişmiş JavaScript'in görüntülenmesini sağlamak için kullanılan yeni bir ChromePdfRenderer örneği oluşturuyoruz.

Ardından, RenderingOptions sınıfı kullanılarak ayarlanan üç farklı seçeneğimiz var. İlki, EnableJavaScript = true, HTML sayfasının görüntülenmesi sırasında örnek HTML belgemizdeki JavaScript'in çalıştırılmasını sağlar. WaitFor.JavaScript(), tüm JavaScript kodları çalıştırılana kadar görüntüleme işlemini duraklatmak ve grafiğin doğru şekilde görüntülenmesini sağlamak için kullanılır. Üçüncü seçenek olan CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print, CSS medya türünü PRINT olarak ayarlar ve stilleri PDF görüntüleme için optimize eder.

Bir sonraki adım, daha önce oluşturduğumuz HTML belgesini nihayet bir PDF dosyasına dönüştürmektir. Bu, RenderHtmlAsPdf değişkenini alan ve HTML ile JavaScript'i yeni bir PDF belgesine dönüştüren htmlWithJs yöntemi ile yapılı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