PDF 형식으로 차트 표시

VB C#

string(19) "클릭하여 복사"

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

Install-Package IronPdf

PDF 형식으로 차트 표시

IronPDF는 강력한 HTML-PDF 변환 기능과 더불어 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 파일 다운로드