Renderowanie wykresow w PDF

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

Renderowanie wykresow w PDF

Wraz z potężnymi możliwościami konwersji HTML na PDF, IronPDF zapewnia pełne wsparcie dla renderowania JavaScript - które obejmuje wsparcie dla renderowania canvas i wykresów. To pełne wsparcie dla JavaScript pozwala deweloperom tworzyć wysokiej jakości pliki PDF z w pełni wyrenderowanymi wykresami, w tym wykresami 3D i wielokątami.

Niektóre obsługiwane wykresy to:

C3.js
D3.js
Highcharts

Na początek musimy najpierw stworzyć treść HTML, która zostanie użyta do stworzenia naszego dokumentu PDF. Ten kod HTML zawiera wbudowany kod JavaScript służący do generowania wykresu słupkowego przy użyciu biblioteki C3. Funkcja setTimeout zapewnia, że po upływie 1 sekundy wywoływana jest funkcja window.ironpdf.notifyRender(), sygnalizująca IronPDF, aby przystąpił do renderowania strony po zakończeniu wykonywania kodu JavaScript.

Teraz możemy zobaczyć, jak to jest renderowane w łatwy do przeczytania dokument PDF. Najpierw tworzymy nową instancję ChromePdfRenderer, która służy do uzyskania dostępu do potężnego silnika renderującego używanego przez IronPDF i umożliwia renderowanie zaawansowanego kodu JavaScript na stronie HTML.

Następnie mamy trzy różne opcje, które są ustawiane za pomocą klasy RenderingOptions. Pierwszy, EnableJavaScript = true, zapewnia, że kod JavaScript w naszym przykładowym dokumencie HTML zostanie wykonany podczas renderowania strony HTML. WaitFor.JavaScript() służy do wstrzymania procesu renderowania do momentu zakończenia działania całego kodu JavaScript, co gwarantuje prawidłowe wyświetlenie wykresu. Trzecia opcja, CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print, ustawia typ mediów CSS na drukowanie, optymalizując style pod kątem renderowania plików PDF.

Kolejnym krokiem jest ostateczne przekształcenie utworzonego wcześniej dokumentu HTML w plik PDF. Odbywa się to za pomocą metody RenderHtmlAsPdf, która pobiera zmienną htmlWithJs i przekształca kod HTML oraz JavaScript w nowy dokument PDF.

Na koniec dokument PDF można zapisać za pomocą metody SaveAs. Teraz będziesz mieć nowy dokument PDF z w pełni wyrenderowanym wykresem stworzonym za pomocą HTML i JavaScript.

Odkryj, jak konwertować JavaScript do PDF za pomocą IronPDF.

Zobacz na GitHubie

Kod

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

Pobierz plik ZIP