Renderowanie wykresów 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 wykresów 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 HTML zawiera wbudowany JavaScript do generowania wykresu słupkowego za pomocą biblioteki C3. Funkcja setTimeout zapewnia, że po 1 sekundzie, wywołuje się window.ironpdf.notifyRender(), sygnalizując IronPDF do kontynuowania renderowania strony po zakończeniu wykonywania JavaScript.

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

Następnie mamy trzy różne opcje, które są ustawione za pomocą klasy RenderingOptions. Pierwsza, EnableJavaScript = true, zapewnia, że JavaScript w naszej przykładowej dokumencie HTML jest wykonywany podczas renderowania strony HTML. WaitFor.JavaScript() jest używany do wstrzymania procesu renderowania, aż do zakończenia wykonywania wszystkich JavaScript, zapewniając prawidłowe zrenderowanie wykresu. Trzecia opcja, CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print, ustawia typ mediów CSS na druk, optymalizując style do renderowania PDF.

Kolejnym krokiem jest w końcu zrenderowanie wcześniej stworzonego dokumentu HTML do pliku PDF. Jest to realizowane za pomocą metody RenderHtmlAsPdf, która przyjmuje zmienną htmlWithJs i zamienia HTML oraz JavaScript na nowy dokument PDF.

Na koniec, dokument PDF może być zapisany przy użyciu 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