Rendu de graphiques dans les PDFs

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

Rendu de graphiques dans les PDFs

Avec de puissantes capacités de conversion HTML en PDF, IronPDF offre un soutien complet pour le rendu JavaScript - ce qui inclut le support du rendu de canvas et de graphiques. Ce soutien complet for JavaScript permet aux développeurs de créer des PDFs de haute qualité avec des graphiques entièrement rendus, y compris des graphiques 3D et des polygones.

Quelques graphiques pris en charge incluent :

C3.js
D3.js
Highcharts

Pour commencer, nous devons d'abord créer le contenu HTML qui sera utilisé pour créer notre document PDF. Ce code HTML inclut du JavaScript en ligne pour générer un graphique à barres à l'aide de la bibliothèque C3. La fonction setTimeout garantit qu'après 1 seconde, window.ironpdf.notifyRender() est appelée, signalant à IronPDF de procéder au rendu de la page une fois que le JavaScript a terminé son exécution.

Maintenant, nous pouvons voir comment cela est rendu dans un document PDF facile à lire. Tout d'abord, nous créons une nouvelle instance ChromePdfRenderer, qui sert à accéder au puissant moteur de rendu utilisé par IronPDF et permet de rendre du JavaScript avancé dans la page HTML.

Ensuite, nous avons trois options différentes qui sont définies à l'aide de la classe RenderingOptions. Le premier, EnableJavaScript = true, garantit que le code JavaScript contenu dans notre exemple de document HTML est exécuté lors du rendu de la page HTML. WaitFor.JavaScript() est utilisé pour suspendre le processus de rendu jusqu'à ce que tout le code JavaScript ait été exécuté, garantissant ainsi que le graphique est correctement affiché. La troisième option, CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print, définit le type de média CSS sur " PRINT ", optimisant ainsi les styles pour le rendu PDF.

L'étape suivante consiste à convertir le document HTML que nous avons créé précédemment en fichier PDF. Cela s'effectue via la méthode RenderHtmlAsPdf, qui prend la variable htmlWithJs et transforme le code HTML et JavaScript en un nouveau document PDF.

Enfin, le document PDF peut être enregistré à l'aide de la méthode SaveAs. Maintenant, vous aurez un nouveau document PDF avec un graphique entièrement rendu créé en utilisant HTML et JavaScript.

Découvrez comment convertir JavaScript en PDF avec IronPDF.

Voir sur GitHub

Code

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

Télécharger ZIP