如何使用jsPDF为下载的PDF文件添加顶部边距

PDF导出后内容开头无顶部边距，期望设置顶部边距为15，但现有代码未生效，相关代码如下：

HTML结构 #

<div id="summaryId">
    <p>paragraph 1</p>
    <p>paragraph 2</p>
    <p>paragraph 3</p>
    <p>paragraph 4</p> 
    <p>paragraph 5</p>
</div>

现有JS代码 #

const section = document.getElementById('summaryId');
var HTML_Width = section.scrollWidth;
var HTML_Height = section.scrollHeight;
var top_left_margin = 35;
var PDF_Width = HTML_Width + (top_left_margin * 2);
var PDF_Height = (PDF_Width * 1.2) + (top_left_margin * 2);
var canvas_image_width = HTML_Width;
var canvas_image_height = HTML_Height;

var totalPDFPages = Math.ceil(HTML_Height / PDF_Height) - 1;
 
html2canvas(section, { allowTaint: true }).then(function (canvas) {
  var imgData = canvas.toDataURL('image/png');
  var imgWidth = 210;
  var pageHeight = 299;
  var imgHeight = canvas.height * imgWidth / canvas.width;
  var heightLeft = imgHeight;
  var top_left_margin = 15;
  var doc = new jspdf.jsPDF();
  var position = 0;

  doc.addImage(imgData, 'PNG', top_left_margin, position, imgWidth, imgHeight+30);
  heightLeft -= pageHeight;

  while (heightLeft >= 0) {
      position = heightLeft - imgHeight; 
      doc.addPage();
      doc.addImage(imgData, 'PNG', top_left_margin, position, imgWidth, imgHeight+30);
      heightLeft -= pageHeight;
  }
doc.save("Dashboard.pdf");
});

问题核心是顶部边距的参数逻辑错误：jspdf.addImage的第四个参数是y轴起始位置（对应顶部边距），你之前把position设为0，导致图片紧贴PDF顶部。修改方案如下：

1. 初始位置绑定顶部边距
   将position初始值从0改为top_left_margin，让第一页内容从y=15的位置开始，直接保留顶部边距。

2. 修正分页位置计算
   分页时需要让每页内容都从顶部边距位置开始，不能直接用heightLeft - imgHeight，要结合页面高度和边距重新计算。

3. 统一变量避免混淆
   移除外部重复定义的top_left_margin，保持变量一致性。

修改后的完整代码：

const section = document.getElementById('summaryId');
const HTML_Width = section.scrollWidth;
const HTML_Height = section.scrollHeight;
const canvas_image_width = HTML_Width;
const canvas_image_height = HTML_Height;

html2canvas(section, { allowTaint: true }).then(function (canvas) {
  const imgData = canvas.toDataURL('image/png');
  const imgWidth = 210;
  const pageHeight = 299;
  const topLeftMargin = 15; // 统一设置顶部/左侧边距
  const imgHeight = canvas.height * imgWidth / canvas.width;
  let heightLeft = imgHeight;
  const doc = new jspdf.jsPDF();
  let position = topLeftMargin; // 初始y位置设为顶部边距

  // 第一页
  doc.addImage(imgData, 'PNG', topLeftMargin, position, imgWidth, imgHeight);
  heightLeft -= pageHeight - topLeftMargin; // 减去页面高度与顶部边距的差值

  // 分页处理
  while (heightLeft >= 0) {
    position = heightLeft - imgHeight + topLeftMargin; // 每页都保留顶部边距
    doc.addPage();
    doc.addImage(imgData, 'PNG', topLeftMargin, position, imgWidth, imgHeight);
    heightLeft -= pageHeight;
  }

  doc.save("Dashboard.pdf");
});

额外可选方案：如果希望网页端内容也同步显示顶部边距，可以给容器加CSS内边距：

#summaryId {
  padding-top: 15px;
}

内容的提问来源于stack exchange，提问作者ck-s