跳到主要内容

页面

bkhtmltopdf 遵循标准 HTML/CSS 规范，您可以自由编写 HTML 代码来定义页面布局。核心是通过 CSS 的 @page 规则控制打印输出（如页面大小、方向）。以下是详细指南和示例。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hi, bkhtmltopdf!</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>

大小​

bkhtmltopdf 支持多种标准页面大小。通过 CSS @media print 和 @page 规则指定： 有几个标准的页面大小：

预定义大小​

以下是常用标准大小（单位：mm）：

大小宽度 × 高度描述
A3297 × 420大型海报/图表
A4210 × 297标准信纸
A5148 × 210书籍/小册子
B4250 × 353日文标准
B5176 × 250日文小册子
Letter216 × 279美式信纸
Legal216 × 356美式法律文书
Ledger432 × 279美式大表格

示例：设置 A5 大小​

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hi, bkhtmltopdf!</title>
    <style>
        @media print {
            @page {
                size: A5;
            }
        }
    </style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>

单位​

如果预定义大小不满足需求，可以手动指定宽度和高度。支持的单位包括：

  • mm
  • cm
  • in
  • px（像素，基于 72 DPI）
@media print {
    @page {
        size: 210mm 297mm; /* A4 */
    }
}
提示

像素单位适合屏幕适配，但打印时会转换为物理单位。推荐使用 mm 或 cm 以确保精度。

页面方向（横向/纵向）​

默认方向为纵向（portrait）。要切换为横向（landscape），在 @page 中添加 landscape 关键字。

@media print {
    @page {
        size: A5 landscape;
    }
}

自定义方向注意事项​

如果使用自定义大小，非预定义时需手动交换宽高：

@media print {
    @page {
        size: 210mm 297mm; /* A4 纵向 */
        /* size: 297mm 210mm; /* A4 横向（注释示例） */
    }
}

JavaScript​

bkhtmltopdf 完全支持 JavaScript，包括内联脚本和外部引入。渲染时会执行 JS 以动态生成内容。 您可以使用 script，也可以引入外部的 script。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hi, bkhtmltopdf!</title>
    <script src="https://cdn.jsdelivr.net/gh/jquery/jquery/dist/jquery.min.js"></script>
</head>
<body>
<h1>Hello World!</h1>
<p id="dynamic">Loading...</p>
<script>
    document.getElementById('dynamic').innerHTML = 'Hello from JavaScript!';
</script>
</body>
</html>
提示

JS 执行时机受 waitUntil 参数影响。对于复杂交互，使用 waitUntil: manual 确保完整渲染。