使用jsPDF将HTML转PDF时文字垂直偏移行高显示异常问题求助

这个问题本质是jsPDF内置HTML渲染逻辑的字体基线计算与浏览器不匹配导致的，你之前尝试的行高调整、单位修改没有命中核心问题，以下是可落地的解决方案：

• 方案1：改用html2canvas预渲染DOM，再插入PDF（最稳定，无偏移）
  先安装html2canvas依赖：npm install html2canvas
  再修改转换代码：

  import html2canvas from 'html2canvas'
  import jsPDF from 'jspdf'
  
  async function print () {
    const input = document.getElementById('divToPrint')!
    // 直接复用浏览器渲染逻辑转canvas，效果和页面显示完全一致
    const canvas = await html2canvas(input, {
      scale: 2, // 提高导出清晰度，可按需调整
      useCORS: true, // 处理跨域图片资源，无跨域资源可省略
      logging: false
    })
    const imgWidth = canvas.width
    const imgHeight = canvas.height
    const pdf = new jsPDF({
      orientation: 'portrait',
      unit: 'px',
      format: [imgWidth, imgHeight]
    })
    pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0, imgWidth, imgHeight)
    pdf.save('test.pdf')
  }
  

  该方案不会出现字体偏移、样式不一致的问题，适合大部分非矢量PDF导出需求。
• 方案2：显式注册页面对应字体到jsPDF（适合需要保留矢量文本的PDF导出场景）
  你遇到的偏移大概率是页面使用的字体和jsPDF默认的Helvetica字体基线不匹配导致的，可将页面用到的字体转成base64格式注册到jsPDF，再设置默认字体即可修正基线计算逻辑：

  // 字体文件转base64可通过本地工具处理
  pdf.addFileToVFS('你的字体文件名.ttf', '字体对应的base64字符串')
  pdf.addFont('你的字体文件名.ttf', '自定义字体名', 'normal')
  pdf.setFont('自定义字体名')
  

  注册完成后再调用pdf.html方法即可解决文字下沉问题。
• 方案3：调整pdf.html的配置参数（适合不想改动现有逻辑的场景）
  调用pdf.html时传入html2canvas的配套配置，修正行高和基线计算规则，同时可禁用自动分页避免多余空白页：

  pdf.html(input, {
    callback: (pdf) => {
      pdf.save('test.pdf')
    },
    x: 0,
    y: 0,
    width: input.getBoundingClientRect().width,
    windowWidth: input.getBoundingClientRect().width,
    html2canvas: {
      scale: 2,
      letterRendering: true,
      defaultFont: '和页面一致的字体名',
      lineHeight: 1.2 // 可根据实际渲染效果微调
    },
    autoPaging: false // 禁用自动分页后不需要手动删除第二页
  })
  

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