@page bleed仅语义声明印刷出血尺寸，不生成裁切标记，且被所有主流浏览器忽略；实际需用jsPDF等工具手动设置BleedBox/TrimBox并绘制裁切线。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
什么是 @page bleed 属性，它真能控制实际裁切标记吗？
@page 的 bleed 属性在 CSS Paged Media 模块中定义，用于声明内容区域外、供印刷裁切预留的扩展区域尺寸。但它**不生成裁切标记（crop marks）本身**，也不被任何主流浏览器实际支持渲染——Chrome、Firefox、Safari 均忽略 bleed 声明，打印预览里看不到效果，更不会输出带出血和裁切线的 PDF。
这意味：你写 @page { bleed: 3mm; }，只是语义声明，不是功能开关。
真正起作用的是：
- 专业排版工具（如 InDesign、LaTeX + pdfpages）会读取并应用该属性生成合规 PDF
- 某些 PDF 打印驱动（如 Adobe PDF Printer）可能识别，但依赖后端引擎，与浏览器无关
- 前端 JavaScript 生成 PDF（如 pdfmake、jsPDF）需手动计算出血区+绘制裁切线，不走
@page bleed
浏览器打印时想加出血和裁切标记，实际能做什么？
浏览器原生打印能力极其有限：@page 支持仅限 size、margin、:first/:left/:right 伪类；bleed、marks（裁切标记）、crop-offset 全部被忽略。
所以必须绕过 CSS 声明，改用“视觉模拟”：
- 把整个内容容器（如
<body>）设为比目标成品大一圈，例如 A4（210×297mm）→ 设为 216×303mm（各边+3mm）
- 用绝对定位在四角画细线（
1px solid black），位置严格按裁切标准：距成品边缘 3mm 处向内 1mm 长，例如右上角裁切线是 top: 3mm; right: 3mm; width: 1mm; height: 1mm;
- 确保这些线在打印时未被裁掉：检查浏览器打印设置中的“页边距”是否设为“无”或“最小”，否则外扩部分会被自动截断
- 导出 PDF 后务必用 Acrobat 或专业工具验证：打开“输出预览” → 查看“裁切框（Trim Box）”和“出血框（Bleed Box）”是否正确嵌套
用 jsPDF 手动生成带 bleed 和 crop marks 的 PDF 更可靠
如果你需要可交付印刷的 PDF，别依赖浏览器打印。用 jsPDF 可精确控制：
const { jsPDF } = window.jspdf;
const doc = new jsPDF({
format: [216, 303], // A4 + 3mm bleed each side
unit: 'mm'
});
// 绘制四条裁切线（标准位置：距成品边缘 3mm，长 1mm）
doc.setLineWidth(0.1);
// 左上
doc.line(3, 3, 3, 4); // left edge
doc.line(3, 3, 4, 3); // top edge
// 右上
doc.line(213, 3, 213, 4);
doc.line(213, 3, 212, 3);
// 左下、右下同理...
// 设置 PDF 裁切框和出血框（关键！）
doc.setDocumentProperties({
creator: 'jsPDF',
producer: 'jsPDF'
});
// 这些需通过低层 API 注入，或用 addPage + setPageSize 并手动写 /BleedBox
注意：jsPDF 默认不写 /BleedBox 和 /TrimBox，得用 doc.internal.write(...) 插入底层 PDF 对象，或改用支持印刷盒的库如 pdf-lib。
最容易被忽略的致命细节：PDF 查看器根本不显示 bleed 区
即使你成功写入了 /BleedBox [3 3 213 300]，Adobe Acrobat Reader 默认只渲染 /MediaBox，出血区域不可见。必须手动开启：
- Acrobat：文件 → 属性 → “初始视图” → 勾选“显示裁切框”或切换到“输出预览”面板
- Mac 预览.app：完全不支持查看 BleedBox，会直接忽略
- 印刷厂拒收没显式声明
/BleedBox 的 PDF，哪怕你 CSS 里写了 bleed: 3mm
最终交付前，永远用 Acrobat Pro 的“输出预览”确认三个盒子：MediaBox（物理纸张）、BleedBox（出血边界）、TrimBox（成品尺寸）是否逐层内缩且数值正确。浏览器里写的 @page bleed，连这个验证环节都进不去。
<body>）设为比目标成品大一圈，例如 A4（210×297mm）→ 设为 216×303mm（各边+3mm）1px solid black），位置严格按裁切标准：距成品边缘 3mm 处向内 1mm 长，例如右上角裁切线是 top: 3mm; right: 3mm; width: 1mm; height: 1mm;
jsPDF 可精确控制：
const { jsPDF } = window.jspdf;
const doc = new jsPDF({
format: [216, 303], // A4 + 3mm bleed each side
unit: 'mm'
});
// 绘制四条裁切线（标准位置：距成品边缘 3mm，长 1mm）
doc.setLineWidth(0.1);
// 左上
doc.line(3, 3, 3, 4); // left edge
doc.line(3, 3, 4, 3); // top edge
// 右上
doc.line(213, 3, 213, 4);
doc.line(213, 3, 212, 3);
// 左下、右下同理...
// 设置 PDF 裁切框和出血框（关键！）
doc.setDocumentProperties({
creator: 'jsPDF',
producer: 'jsPDF'
});
// 这些需通过低层 API 注入，或用 addPage + setPageSize 并手动写 /BleedBox
注意：jsPDF 默认不写 /BleedBox 和 /TrimBox，得用 doc.internal.write(...) 插入底层 PDF 对象，或改用支持印刷盒的库如 pdf-lib。
最容易被忽略的致命细节：PDF 查看器根本不显示 bleed 区
即使你成功写入了 /BleedBox [3 3 213 300]，Adobe Acrobat Reader 默认只渲染 /MediaBox，出血区域不可见。必须手动开启：
- Acrobat：文件 → 属性 → “初始视图” → 勾选“显示裁切框”或切换到“输出预览”面板
- Mac 预览.app：完全不支持查看 BleedBox，会直接忽略
- 印刷厂拒收没显式声明
/BleedBox 的 PDF，哪怕你 CSS 里写了 bleed: 3mm
最终交付前，永远用 Acrobat Pro 的“输出预览”确认三个盒子：MediaBox（物理纸张）、BleedBox（出血边界）、TrimBox（成品尺寸）是否逐层内缩且数值正确。浏览器里写的 @page bleed，连这个验证环节都进不去。
/BleedBox 的 PDF，哪怕你 CSS 里写了 bleed: 3mm
