Rendu des graphiques dans les 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");

IRON VB CONVERTER ERROR developers@ironsoftware.com

Install-Package IronPdf

Rendu des graphiques dans les PDF

En plus de puissantes capacités de conversion HTML en PDF, IronPDF offre un support complet pour le rendu JavaScript, y compris le support pour le rendu de canvas et de graphiques. Ce support complet pour JavaScript permet aux développeurs de créer des PDF de haute qualité avec des graphiques entièrement rendus, y compris des graphiques 3D et des polygones.

Parmi les graphiques pris en charge, on peut citer

C3.js
D3.js
Highcharts

Étapes pour rendre les graphiques dans les PDF


var renderer = new ChromePdfRenderer
```();


var renderer = new ChromePdfRenderer
```();

JAVASCRIPT

renderer.RenderingOptions.EnableJavaScript = true;
renderer.RenderingOptions.WaitFor.JavaScript();
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print;
var pdf = renderer.RenderHtmlAsPdf(htmlWithJs);

Pour commencer, nous devons d'abord créer le contenu HTML qui sera utilisé pour créer notre document PDF. Ce HTML inclut du JavaScript en ligne 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 procéder au rendu de la page une fois que le JavaScript a terminé son exécution.

Nous pouvons maintenant examiner comment cela est transformé en un document PDF facile à lire. Tout d'abord, nous créons une nouvelle instance de ChromePdfRenderer, qui est utilisée pour accéder au puissant moteur de rendu qu'IronPDF utilise, et permet le rendu avancé de JavaScript dans la page HTML.

Ensuite, nous avons trois options différentes qui sont définies en utilisant la classe RenderingOptions. Le premier, 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 ainsi que le graphique est correctement restitué. La troisième option, CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print, définit le type de média CSS sur imprimé, optimisant ainsi les styles pour le rendu PDF.

La prochaine étape consiste à enfin convertir le document HTML que nous avons créé précédemment en un fichier PDF. Cela se fait via la méthode RenderHtmlAsPdf, qui utilise la variable htmlWithJs pour transformer le HTML et JavaScript en un nouveau document PDF.

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

Cliquez ici pour voir le guide pratique, y compris des exemples, du code d'exemple et des fichiers >