HTML转PDF添加页面边框 解决@page CSS设置不生效问题

@page规则内设置的边框不生效，是主流浏览器打印引擎的实现限制：目前所有主流浏览器对@page的支持范围仅覆盖页面尺寸、页边距、裁切线等有限属性，页面级的边框、背景样式属于未实现的能力，写在@page内的这类配置会被直接忽略，不会生成到PDF里。

完全基于文档流实现，不使用任何position: fixed定位，避免固定定位带来的跨页错位、边框仅单页显示的问题，调整逻辑如下：

• 将@page下的所有页面边距设置为0
• 把原@page的边距值转移为内容容器的内边距，保留视觉上的页边距效果
• 给内容容器直接配置需要的边框样式

原理：边框跟随文档流内的内容容器渲染，当内容自动跨页分页时，容器边框会在每一页的对应位置自动重复生成，和文档内容的分页逻辑完全对齐。

注意：运行下述打印相关代码时，会自动打开浏览器的打印预览窗口，可直接导出为PDF验证效果

无效的错误配置：

@page {
    size: A4;
    margin-top: 0.25in;
    margin-bottom: 0.25in;
    /* 浏览器不支持该配置，不会生效 */
    border: 1px solid black;
}

可正常生效的正确配置：

@page {
    size: A4;
    /* 页面边距清零，边距逻辑转移到内容容器 */
    margin: 0;
}
.wrapper {
    margin: 0 auto;
    /* 替换原@page的上下边距，可按需补充左右边距值 */
    padding: 0.25in;
    /* 配置边框，跨页自动重复渲染 */
    border: 1px solid black;
    /* 保证容器高度适配单页，避免首页边框高度异常 */
    min-height: 297mm; /* 对应A4纸的标准高度，可根据实际使用的纸张尺寸调整 */
}

浏览器原生打印逻辑：

window.print();

额外注意：触发浏览器打印时，需要在打印设置面板中将“页边距”选项选择为“无”，避免浏览器自动叠加默认边距导致边框偏移。

内容的提问来源于stack exchange，提问作者umanga shrestha