Renderizando gráficos em 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

Renderizando gráficos em PDFs

Além de recursos avançados de conversão de HTML para PDF, o IronPDF oferece suporte completo à renderização em JavaScript , incluindo suporte para renderização de canvas e gráficos. O suporte completo for JavaScript permite que os desenvolvedores criem PDFs de alta qualidade com gráficos totalmente renderizados, incluindo gráficos 3D e polígonos.

Alguns gráficos suportados incluem:

C3.js
D3.js
Highcharts

Para começar, precisamos primeiro criar o conteúdo HTML que será usado para gerar nosso documento PDF. Este HTML inclui JavaScript embutido para gerar um gráfico de barras usando a biblioteca C3. A função setTimeout garante que, após 1 segundo, a função window.ironpdf.notifyRender() seja chamada, sinalizando ao IronPDF para prosseguir com a renderização da página assim que o JavaScript terminar a execução.

Agora, podemos ver como isso é transformado em um documento PDF de fácil leitura. Primeiro, criamos uma nova instância de ChromePdfRenderer, que é usada para acessar o poderoso mecanismo de renderização que o IronPDF utiliza e permite que JavaScript avançado seja renderizado na página HTML.

Em seguida, temos três opções diferentes que são definidas usando a classe RenderingOptions. O primeiro, EnableJavaScript = true, garante que o JavaScript dentro do nosso documento HTML de exemplo seja executado ao renderizar a página HTML. WaitFor.JavaScript() é usado para pausar o processo de renderização até que todo o JavaScript seja executado, garantindo que o gráfico seja renderizado corretamente. A terceira opção, CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print, define o tipo de mídia CSS como impressão, otimizando os estilos para renderização em PDF.

O próximo passo é finalmente renderizar o documento HTML que criamos anteriormente em um arquivo PDF. Isso é feito através do método RenderHtmlAsPdf, que recebe a variável htmlWithJs e transforma o HTML e o JavaScript em um novo documento PDF.

Finalmente, o documento PDF pode ser salvo usando o método SaveAs. Agora, você terá um novo documento PDF com um gráfico totalmente renderizado, criado usando HTML e JavaScript.

Descubra como converter JavaScript em PDF com o IronPDF.

Ver no GitHub

Código

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

Baixar ZIP