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가 사용하는 강력한 렌더링 엔진에 접근하는 데 사용되며, HTML 페이지에서 고급 JavaScript를 렌더링할 수 있게 해줍니다.

다음으로, RenderingOptions 클래스를 사용하여 설정된 세 가지 옵션이 있습니다. 첫 번째, EnableJavaScript = true,는 HTML 페이지를 렌더링할 때 예제 HTML 문서 내의 JavaScript가 실행되도록 보장합니다. WaitFor.JavaScript()은 모든 JavaScript가 실행될 때까지 렌더링 프로세스를 일시 중지하여 차트가 올바르게 렌더링되도록 하는 데 사용됩니다. 세 번째 옵션인 CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print는 CSS 미디어 유형을 PRINT로 설정하여 PDF 렌더링에 최적화된 스타일을 적용합니다.

다음 단계는 앞서 생성한 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 파일 다운로드