在 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 中呈現圖表

除了強大的 HTML 轉 PDF 轉換功能外，IronPDF 還全面支援 JavaScript 渲染，其中包含對 canvas 和圖表渲染的支援。對 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 頁面時，範例 HTML 文件中的 JavaScript 會被執行。 WaitFor.JavaScript() 用於暫停渲染過程，直至所有 JavaScript 執行完畢，以確保圖表能正確渲染。第三個選項 CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print 會將 CSS 媒體類型設定為"PRINT"，以優化 PDF 渲染的樣式。

下一步是將先前建立的 HTML 文件最終渲染為 PDF 檔案。此操作透過 RenderHtmlAsPdf 方法實現，該方法會接收 htmlWithJs 變數，並將 HTML 和 JavaScript 轉換為新的 PDF 文件。

最後，可使用 SaveAs 方法儲存 PDF 文件。現在，您將獲得一份新的 PDF 文件，其中包含使用 HTML 和 JavaScript 建立的完整渲染圖表。

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

在 GitHub 上查看

程式碼

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

下載 ZIP