\n \n \n \n \n \n \n `;\n\n // Configure rendering options\n const options = {\n enableJavaScript: true,\n waitFor: {\n type: WaitForType.JavaScript,\n maxWaitTime: 1000, // 1000 milliseconds delay\n },\n cssMediaType: CssMediaType.Screen,\n };\n\n // Render HTML content to a PDF\n const pdf = await PdfDocument.fromHtml(htmlWithJs, { renderOptions: options })\n\n await pdf.saveAs(\"js-chart.pdf\");\n})();","about":{"@id":"https://ironpdf.com/zh/nodejs/examples/js-charts-to-pdf/#product"},"targetProduct":{"@id":"https://ironpdf.com/zh/nodejs/examples/js-charts-to-pdf/#product"},"keywords":"在 PDF 中渲染图表,Node.js 中的 JavaScript 图表和图形,IronPDF waitFor 属性,如何使用 Node.js 向 PDF 添加图表,执行 JavaScript 进行 PDF 渲染,PDF 创建中的 JavaScript 执行时间","datePublished":"2018-08-29","dateModified":"2026-06-29"}]}
IRONSOFTWAREHOME
在PDF中渲染图表
import {PdfDocument, WaitForType, CssMediaType} from "@ironsoftware/ironpdf";

(async () => {
    const 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>`;

    // Configure rendering options
    const options = {
        enableJavaScript: true,
        waitFor: {
            type: WaitForType.JavaScript,
            maxWaitTime: 1000, // 1000 milliseconds delay
        },
        cssMediaType: CssMediaType.Screen,
    };

    // Render HTML content to a PDF
    const pdf = await PdfDocument.fromHtml(htmlWithJs, { renderOptions: options })

    await pdf.saveAs("js-chart.pdf");
})();
npm i @ironsoftware/ironpdf
在PDF中渲染图表

在PDF中渲染图表

当使用JavaScript的执行预留足够的时间。 下面是一个展示如何配置这一过程的示例:

在上述代码中,我们已使用JavaScript的执行。 JavaScript执行。 此特定配置使用window.ironpdf.notifyRender函数或达到最大等待时间为止。

另外,HTML内容的视图和布局符合屏幕设置。

在 GitHub 上探索 JS 图表转 PDF 示例
在 GitHub 上查看

准备开始了吗?

版本:2026.6刚刚发布

Key in blue circle

立即获取免费的 30 天试用版密钥。

Your trial license will be sent to your email address

无任何限制。100% 解锁。无需信用卡。

OR
bullet_checked无需信用卡或创建账户无任何限制。100% 解锁。无需信用卡。
  • Logo Aetna
  • Logo NASA
  • Logo GE
  • Logo Porsche
  • Logo USDA
  • Logo Qatar
Join Millions of Engineers who’ve tried Iron Suite
预约您的免费现场演示
Booking Badge

深受全球数百万工程师信赖

Iron Software 的客户徽标
获取您的无义务咨询
填写下面的表格或通过sales@ironsoftware.com
您的资料将始终保密。
深受全球数百万工程师信赖
Iron Software 的客户徽标
立即获取您的免费30 天试用密钥。
无需信用卡或创建账户
Node.js 模块下载用于 PDF
using npm 安装

版本: 2026.6

  1. 下载并安装 Node.js 12+。
  2. 在终端中执行上述命令。

$999 起