如何从HTML文件生成单页PDF并避免内容被分页拆分

单页PDF生成方案（实现成本最低） #

convert-html-to-pdf v1.0.1 未在文档中明确标注单页配置，但可通过手动指定匹配内容尺寸的页面大小实现无分页输出：

• 渲染目标HTML获取内容实际总宽高：如果是前端环境直接取DOM的scrollWidth、scrollHeight属性；如果是服务端转换，可通过无头浏览器加载HTML后读取DOM尺寸
• 转换时传入自定义页面尺寸参数，示例代码：

const htmlContent = '你的HTML内容';
// 假设已提前获取到内容实际宽高
const contentW = 800;
const contentH = 2300;

const pdfResult = await convertHtmlToPdf(htmlContent, {
  pageSize: {
    width: `${contentW}px`,
    height: `${contentH}px`
  },
  margin: { top: 0, right: 0, bottom: 0, left: 0 }
});

• 若需要更稳定的单页转换能力，可替换为以下成熟方案：
  • Puppeteer：服务端转换首选，自定义页面尺寸自由度高，对响应式HTML适配兼容性好
  • jsPDF + html2canvas组合：前端侧转换首选，可完全自定义输出尺寸，避免默认分页逻辑
  • html-pdf-node：轻量服务端转换库，原生支持自定义页面宽高参数

多页PDF防元素拆分方案 #

如果必须输出多页PDF，无需手动测量元素尺寸，通过CSS规则即可强制块级元素不被分页切割：

• 给所有不允许跨页拆分的div添加样式：

.protected-block {
  page-break-inside: avoid !important;
  break-inside: avoid !important;
}

• 若上述CSS规则不生效，可在转换前遍历DOM，计算每个块元素的位置与当前页剩余高度，在需要换页的元素前添加page-break-before: always强制分页即可。

内容的提问来源于stack exchange，提问作者Helena Guimarães