如何用jsPDF将HTML模板文件转为适配A4尺寸的PDF？

要让生成的PDF完美适配A4尺寸，需要从jsPDF实例配置、HTML转换参数和内容CSS适配三个方面调整，以下是具体修改方案：

1. 明确指定A4尺寸初始化jsPDF #

创建jsPDF实例时，显式指定格式为A4，同时用mm作为单位更贴合纸张尺寸逻辑：

// 纵向A4，单位mm
var doc = new jsPDF('portrait', 'mm', 'a4');

2. 配置HTML转换的适配参数 #

在doc.html()方法中添加宽度、边距等参数，确保内容适配A4的可打印区域：

• width：设置为A4宽度减去左右边距后的数值
• margin：设置合理页边距，避免内容贴边
• autoPaging：开启自动分页，处理长内容溢出问题

3. 给发票HTML添加打印适配CSS #

在你的发票HTML模板中，添加打印专属CSS规则，限制内容宽度：

@media print {
  .invoice-container {
    width: 190mm; /* A4总宽度210mm，左右各留10mm边距 */
    margin: 0 auto;
    overflow: hidden;
  }
  /* 隐藏不需要打印的按钮、链接等元素 */
  .no-print {
    display: none !important;
  }
}

修改后的完整代码 #

$('#convertToPdf').click(function(){
    var invoiceUrl = $('#invoiceLink').attr('href');

    $.ajax({
        url: invoiceUrl,
        type: 'GET',
        dataType: 'html',
        success: function(htmlContent) {
            // 初始化纵向A4的PDF文档，单位mm
            var doc = new jsPDF('portrait', 'mm', 'a4');
            // 获取A4页面的实际宽度
            var pageWidth = doc.internal.pageSize.getWidth();
            
            doc.html(htmlContent, {
                // 内容宽度=页面宽度-左右边距（各10mm）
                width: pageWidth - 20,
                // 设置上下左右边距均为10mm
                margin: [10, 10, 10, 10],
                // 自动根据文本内容分页
                autoPaging: 'text',
                callback: function (doc) {
                    doc.save('invoice.pdf');
                }
            });
        },
        error: function(xhr, status, error) {
            console.error('Error fetching HTML content:', error);
        }
    });
});

额外注意事项 #

• 发票内的表格、图片等元素尽量用相对宽度（比如width: 100%），避免固定宽度超出页面
• 可以先在浏览器打印预览中调试HTML内容的适配效果，再用jsPDF转换

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