如何使用jsPDF的addHTML()将HTML元素居中渲染到PDF页面？

要解决HTML转PDF后内容居左上角的问题，通常需要配合html2canvas来渲染HTML元素（jsPDF原生处理HTML能力有限），核心是通过计算页面与元素的尺寸差来确定居中坐标，具体步骤如下：

• 引入依赖：确保项目中引入了jsPDF和html2canvas，可以用CDN方式快速引入：

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
  

• 编写核心逻辑：

  // 获取要转换的HTML元素
  const targetElement = document.getElementById('your-target-element');
  
  // 初始化jsPDF实例，A4尺寸的宽高为595.28和841.89（单位：pt）
  const pdf = new jspdf.jsPDF('p', 'pt', 'a4');
  const pdfWidth = pdf.internal.pageSize.getWidth();
  const pdfHeight = pdf.internal.pageSize.getHeight();
  
  // 用html2canvas渲染元素为canvas
  html2canvas(targetElement).then(canvas => {
    const canvasWidth = canvas.width;
    const canvasHeight = canvas.height;
  
    // 计算缩放比例（如果元素宽高超过PDF页面，按比例缩小）
    const scale = Math.min(pdfWidth / canvasWidth, pdfHeight / canvasHeight);
    const scaledWidth = canvasWidth * scale;
    const scaledHeight = canvasHeight * scale;
  
    // 计算居中坐标
    const x = (pdfWidth - scaledWidth) / 2;
    const y = (pdfHeight - scaledHeight) / 2;
  
    // 将canvas内容添加到PDF的指定坐标
    pdf.addImage(canvas, 'PNG', x, y, scaledWidth, scaledHeight);
    // 保存或下载PDF
    pdf.save('centered-content.pdf');
  });
  

• 关键说明：

  • 必须先获取PDF页面的实际宽高，再结合渲染后的canvas尺寸计算偏移量，这是居中的核心。
  • 加入缩放逻辑是为了避免元素尺寸超过PDF页面导致内容被截断，确保完整显示。

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