Rendu de graphiques dans les PDFs

VBC#

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 = 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")

PM > Install-Package IronPdf

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. Cet HTML inclut JavaScript intégré pour générer un graphique à barres en utilisant la bibliothèque C3. La fonction setTimeout garantit qu'après 1 seconde, window.ironpdf.notifyRender() est appelé, signalant à IronPDF de poursuivre le 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 est utilisée pour accéder au moteur de rendu puissant utilisé par IronPDF et permet que le JavaScript avancé soit rendu dans la page HTML.

Ensuite, nous avons trois options différentes qui sont définies en utilisant la classe RenderingOptions. La première, EnableJavaScript = true, garantit que le JavaScript dans notre document HTML d'exemple 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 JavaScript ait été exécuté, garantissant que le graphique est correctement rendu. La troisième option, CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print, définit le type de média CSS à imprimer, optimisant les styles pour le rendu PDF.

L'étape suivante consiste à finalement rendre le document HTML que nous avons créé plus tôt dans un fichier PDF. Cela se fait grâce à la méthode RenderHtmlAsPdf, qui prend la variable htmlWithJs et transforme le HTML et le JavaScript en un nouveau document PDF.

Enfin, le document PDF peut être enregistré en utilisant 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