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

IRON VB CONVERTER ERROR developers@ironsoftware.com

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 pour 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 HTML inclut du JavaScript intégré pour générer un graphique à barres en utilisant la bibliothèque C3. La fonction setTimeout s'assure 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, utilisée pour accéder au moteur de rendu puissant qu'utilise IronPDF et qui permet de rendre du JavaScript avancé 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, assure 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 sur impression, optimisant les styles pour le rendu PDF.

L'étape suivante est de finalement rendre le document HTML que nous avons créé plus tôt en un fichier PDF. Cela se fait via 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

Code

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

Télécharger ZIP