Rendu de graphiques dans les PDFs

VB C#

string(19) "Cliquez pour copier"

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

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 intégré 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 est utilisée pour accéder au puissant moteur de rendu utilisé par IronPDF et permet le rendu de 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 JavaScript dans notre exemple de document HTML est exécuté lors du rendu de la page HTML. WaitFor.JavaScript() est utilisé pour interrompre le processus de rendu jusqu'à ce que tout JavaScript ait été exécuté, garantissant ainsi que le graphique est correctement rendu. La troisième option, CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print, définit le type de média CSS sur impression, optimisant les styles pour le rendu PDF.

L'étape suivante consiste à convertir le document HTML créé précédemment en fichier PDF. Pour ce faire, on utilise 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é 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

Code

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

Télécharger ZIP