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 HTML zawiera osadzony JavaScript do wygenerowania wykresu słupkowego za pomocą biblioteki C3. Funkcja setTimeout zapewnia, że po 1 sekundzie wywoływana jest window.ironpdf.notifyRender(), sygnalizując IronPDF, aby przystąpił do 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 renderującego używanego przez IronPDF i pozwala na zaawansowane renderowanie JavaScript na stronie HTML.

Następnie mamy trzy różne opcje, które są ustawiane za pomocą klasy RenderingOptions. Pierwsza z nich, EnableJavaScript = true, zapewnia, że JavaScript w naszym przykładowym dokumencie HTML jest wykonywany podczas renderowania strony HTML. WaitFor.JavaScript() jest używany do wstrzymania procesu renderowania do czasu zakończenia działania całego JavaScript, zapewniając poprawne wyrenderowanie wykresu. Trzecia opcja, CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print, ustawia typ mediów CSS na druk, optymalizując style do renderowania PDF.

Kolejny krok to ostateczne renderowanie stworzonego wcześniej dokumentu HTML do pliku PDF. Dokonywane jest to za pomocą metody RenderHtmlAsPdf, która przyjmuje zmienną htmlWithJs i zamienia HTML oraz JavaScript w nowy dokument PDF.

Na koniec dokument PDF można zapisać za pomocą metody SaveAs. Teraz powstanie 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