PDF'lerde Grafik Çizimi

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

PDF'lerde Grafik Çizimi

Güçlü HTML'den PDF'ye dönüştürme yeteneklerinin yanı sıra, IronPDF JavaScript render desteği sağlar - ki bu tuval ve grafik render etmeyi de içerir. JavaScript için tam destek, geliştiricilerin 3D grafikler ve çokgenler dahil olmak üzere tam olarak render edilmiş grafiklerle yüksek kaliteli PDF'ler oluşturmasını sağlar.

Desteklenen grafiklerden bazıları şunlardır:

C3.js
D3.js
Highcharts

Başlangıç olarak, PDF belgemizi oluşturacak HTML içeriğini öncelikle oluşturmamız gerekir. Bu HTML, C3 kutuphanesini kullanarak bir bar grafiği oluşturmak için satır içi JavaScript içerir. setTimeout fonksiyonu, 1 saniye sonra, JavaScript tamamlandığında sayfanın işlenmesine devam etmesi için IronPDF'e sinyal vererek window.ironpdf.notifyRender() olarak çağrılmasını sağlar.

Şimdi, bunun kolay okunabilen bir PDF belgesi olarak nasıl render edildiğine bakabiliriz. Öncelikle, IronPDF'in kullandığı güçlü işleme motoruna erişmek ve HTML sayfasında gelişmiş JavaScript'in işlenmesini sağlamak için yeni bir ChromePdfRenderer örneği oluşturuyoruz.

Sonra, RenderingOptions sınıfını kullanarak ayarlanan üç farklı seçeneğimiz var. İlk olarak, EnableJavaScript = true, örnek HTML belgemizdeki JavaScript'in HTML sayfası işlenirken çalıştırılmasını sağlar. WaitFor.JavaScript(), tüm JavaScript çalıştırılana kadar işleme sürecini duraklatmak için kullanılır ve grafiğin düzgün bir şekilde işlenmesini sağlar. Üçüncü seçenek, CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print, CSS medya türünü baskı olarak ayarlayarak, PDF işleme için stilleri optimize eder.

Bir sonraki adım, daha önce oluşturduğumuz HTML belgesini nihayet bir PDF dosyasına dönüştürmektir. Bu, RenderHtmlAsPdf yöntemi ile yapılır, htmlWithJs değişkenini alır ve HTML ile JavaScript'i yeni bir PDF belgesine dönüştürür.

Son olarak, PDF belgesi, SaveAs yöntemi kullanılarak kaydedilebilir. Şimdi, HTML ve JavaScript kullanarak oluşturulan tamamen render edilmiş bir çubuk grafik içeren yeni bir PDF belgeniz olacak.

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

GitHub'da Görüntü

Kod

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

ZIP İndirin