如何用JavaScript为变长HTML生成带页面边距的PDF？

方案1：直接在jsPDF配置中设置全局边距 #

修改你的jsPDF代码，在html方法的选项里添加margin参数，指定上下左右的边距（单位和初始化时一致，这里是mm）：

var doc = new jspdf.jsPDF("p", "mm", "a4");
doc.html(document.body, {
    callback: function (doc) {
        doc.save("output.pdf");
    },
    // 上、右、下、左边距，按需调整数值
    margin: [15, 10, 15, 10]
});

这个参数会让jsPDF渲染每一页时自动给内容留出边距，分页后上下页的内容就不会紧贴。

方案2：用CSS打印样式控制边距 #

给页面添加打印专用的CSS样式，利用@media print规则设置全局边距，同时可配合手动分页控制：

/* 全局打印样式 */
@media print {
    body {
        /* 设置和PDF纸张匹配的边距，单位mm */
        margin: 15mm 10mm;
        padding: 0;
    }
    /* 可选：给需要手动分页的元素添加标记 */
    .page-break {
        page-break-after: always;
        /* 分页后预留额外间距 */
        margin-bottom: 15mm;
    }
}

这种方式对window.print()、jsPDF、html-to-pdf-js等工具都有效，因为它们都会读取打印样式。

方案3：自定义分页回调（进阶） #

如果需要更精细的控制，可利用jsPDF的回调手动调整每页边距：

var doc = new jspdf.jsPDF("p", "mm", "a4");
const pageWidth = doc.internal.pageSize.getWidth();
const pageHeight = doc.internal.pageSize.getHeight();
const margin = 15; // 上下边距

doc.html(document.body, {
    callback: function (doc) {
        doc.save("output.pdf");
    },
    autoPaging: 'text',
    didDrawPage: function (data) {
        // 手动给每页底部添加空白区域
        doc.setFillColor(255,255,255);
        doc.rect(0, pageHeight - margin, pageWidth, margin, 'F');
    }
});

内容的提问来源于stack exchange，提问作者Xavier Patiño