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

IRON VB CONVERTER ERROR developers@ironsoftware.com

Install-Package IronPdf

在PDF中渲染圖表

除了強大的HTML轉PDF的轉換功能外，IronPDF還提供對JavaScript渲染的完整支持，包括對畫布和圖表渲染的支持。這對JavaScript的全面支持使開發人員能夠創建高質量的PDF，其中包含完全渲染的圖表，包括3D圖表和多邊形。

一些支持的圖表包括：

C3.js
D3.js
Highcharts

首先，我們需要創建要用於創建PDF文檔的HTML內容。此HTML包括內嵌JavaScript以使用C3庫生成柱狀圖。 setTimeout函數確保在1秒後調用window.ironpdf.notifyRender()，指示IronPDF在JavaScript執行完畢後繼續渲染頁面。

現在，我們可以查看如何將其渲染到易於閱讀的PDF文檔中。首先，我們創建一個新的ChromePdfRenderer實例，用於訪問IronPDF使用的強大渲染引擎，允許在HTML頁面中渲染高級JavaScript。

接下來，我們使用RenderingOptions類設置三個不同的選項。第一個，EnableJavaScript = true，確保我們示例HTML文檔內的JavaScript在渲染HTML頁面時執行。 WaitFor.JavaScript()用於暫停渲染過程，直到所有JavaScript運行完畢，確保圖表正確渲染。第三個選項，CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print，將CSS媒體類型設置為打印，優化PDF渲染的樣式。

下一步是最終將我們創建的HTML文檔渲染到PDF文件中。這是通過RenderHtmlAsPdf方法完成的，它將htmlWithJs變量變為新的PDF文檔中的HTML和JavaScript。

最後，可以使用SaveAs方法保存PDF文檔。現在，您擁有一個使用HTML和JavaScript創建的全新PDF文檔，內含完整渲染的圖表。

了解如何使用IronPDF將JavaScript轉換為PDF。

在 GitHub 上查看

程式碼

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

下載 ZIP 文件