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 문서로 변환되는지 살펴보겠습니다. 먼저, IronPDF 에서 사용하는 강력한 렌더링 엔진에 접근하고 HTML 페이지에 고급 JavaScript 렌더링할 수 있도록 하는 새로운 ChromePdfRenderer 인스턴스를 생성합니다.

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

다음 단계는 앞서 생성한 HTML 문서를 최종적으로 PDF 파일로 렌더링하는 것입니다. 이는 RenderHtmlAsPdf 메서드를 통해 수행되며, 이 메서드는 htmlWithJs 변수를 인수로 받아 HTML과 JavaScript 새로운 PDF 문서로 변환합니다.

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

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

GitHub에서 보기

암호

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

ZIP 파일 다운로드