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

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

PDF 형식으로 차트 표시

IronPDF 강력한 HTML-PDF 변환 기능과 더불어 JavaScript 렌더링을 완벽하게 지원하며, 여기에는 캔버스 및 차트 렌더링 지원이 포함됩니다. JavaScript 에 대한 완벽한 지원을 통해 개발자는 3D 차트 및 다각형을 포함하여 완벽하게 렌더링된 차트가 포함된 고품질 PDF를 생성할 수 있습니다.

지원되는 차트는 다음과 같습니다.

C3.js
D3.js
Highcharts

우선, PDF 문서를 생성하는 데 사용될 HTML 콘텐츠를 먼저 만들어야 합니다. 이 HTML에는 C3 라이브러리를 사용하여 막대 차트를 생성하기 위한 인라인 JavaScript가 포함되어 있습니다. setTimeout 함수는 1초 후 window.ironpdf.notifyRender()가 호출되도록 하여 JavaScript 실행이 완료된 후 IronPDF가 페이지 렌더링을 진행하도록 신호를 보냅니다.

이제 이것이 어떻게 읽기 쉬운 PDF 문서로 변환되는지 살펴보겠습니다. 먼저, 우리는 새로운 ChromePdfRenderer 인스턴스를 생성합니다. 이는 IronPDF가 사용하는 강력한 렌더링 엔진에 접근하여 고급 JavaScript가 HTML 페이지에 렌더링되게 합니다.

다음으로, 우리는 RenderingOptions 클래스를 사용하여 설정할 수 있는 세 가지 다른 옵션을 가지고 있습니다. 첫 번째 EnableJavaScript = true는 HTML 페이지를 렌더링할 때 우리의 예제 HTML 문서 내의 JavaScript가 실행되도록 보장합니다. WaitFor.JavaScript()는 모든 JavaScript가 실행될 때까지 렌더링 과정을 일시 중지하는 데 사용되며, 차트가 제대로 렌더링되도록 보장합니다. 세 번째 옵션 CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print는 PDF 렌더링을 최적화하기 위해 CSS 미디어 유형을 인쇄로 설정합니다.

다음 단계는 우리가 이전에 만든 HTML 문서를 PDF 파일로 렌더링하는 것입니다. 이는 RenderHtmlAsPdf 메서드를 통해 이루어지며 htmlWithJs 변수를 가져와 HTML과 JavaScript를 새로운 PDF 문서로 변환합니다.

마지막으로, PDF 문서는 SaveAs 메서드를 사용하여 저장할 수 있습니다. 이제 HTML과 JavaScript 사용하여 완벽하게 렌더링된 차트가 포함된 새 PDF 문서를 얻게 될 것입니다.

IronPDF 사용하여 JavaScript PDF로 변환하는 방법을 알아보세요.

GitHub에서 보기

코드

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

ZIP 파일 다운로드