\n \n \n \n \n \n \n \";\n\n// Instantiate Renderer\nvar renderer = new ChromePdfRenderer();\n\n// Enable JavaScript in our RenderingOptions\nrenderer.RenderingOptions.EnableJavaScript = true;\nrenderer.RenderingOptions.WaitFor.JavaScript();\nrenderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print;\n\nvar pdf = renderer.RenderHtmlAsPdf(htmlWithJs);\n\n// Export to a file or Stream\npdf.SaveAs(\"js-chart.pdf\");\n","about":{"@id":"https://ironpdf.com/zh/examples/js-charts-to-pdf/#product"},"targetProduct":{"@id":"https://ironpdf.com/zh/examples/js-charts-to-pdf/#product"},"keywords":"JavaScript图表到PDF,IronPDF图表渲染,将JS图表转换为PDF,使用IronPDF在PDF中渲染图表,使用JavaScript图表创建PDF,在PDF中嵌入交互式图表","datePublished":"2023-06-06","dateModified":"2026-04-22"}]}
在PDF中渲染图表
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");
NuGet Download
PM > Install-Package IronPdf
在PDF中渲染图表

在PDF中渲染图表

除了强大的HTML到PDF转换功能外,IronPDF还提供对JavaScript渲染的全面支持,这包括对画布和图表渲染的支持。 这种对JavaScript的全面支持使开发人员能够创建高质量的PDF,其中包括完全渲染的图表,包括3D图表和多边形。

支持的一些图表包括:

  • C3.js
  • D3.js
  • Highcharts

首先,我们需要创建将用于创建PDF文档的HTML内容。 此HTML包含内联JavaScript,使用C3库生成条形图。 window.ironpdf.notifyRender(),在JavaScript执行完毕后,通知IronPDF继续渲染页面。

现在,我们可以查看如何将其渲染为易于读取的PDF文档。 首先,我们创建一个新的ChromePdfRenderer实例,用于访问IronPDF使用的强大渲染引擎,并允许在HTML页面中渲染高级JavaScript。

接下来,我们使用RenderingOptions类设置了三个不同的选项。 第一个,EnableJavaScript = true,确保JavaScript在我们示例的HTML文档中被执行,以渲染HTML页面。 WaitFor.JavaScript()用于暂停渲染过程,直到所有JavaScript运行完毕,确保图表正确渲染。 第三个选项,CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print,将CSS媒体类型设置为打印,优化PDF渲染的样式。

下一步是将我们之前创建的HTML文档最终渲染为PDF文件。这是通过htmlWithJs变量和HTML及JavaScript转换为新的PDF文档。

最后,可以使用SaveAs方法保存PDF文档。 现在,您将拥有一个使用HTML和JavaScript创建的完全渲染的图表的新的PDF文档。

了解如何使用 IronPDF 将 JavaScript 转换为 PDF。
在 GitHub 上查看

准备开始了吗?

Nuget Downloads 21,916,531版本:2026.11刚刚发布