使用jsPDF将HTML转PDF时粗体文本对齐错位问题求助

动态生成HTML渲染数据，代码如下：

<div class="prv-blk" id="content-to-print"> 
  <p style="page-break-inside: avoid;"><b>${el.pName || ''}:</b> ${el.pDescription ? el.pDescription + ',' : ''} ${el.ServicePhoneNumber ? el.ServicePhoneNumber + ',' : ''}, 
  ${el.addressLine1 ? el.addressLine1 + ',' : ''}, ${el.addressCity ? el.addressCity + ',' : ''}, 
  ${el.addressPostalCode ? el.addressPostalCode + ',' : ''}, Utah</p>
</div>

使用jsPDF将其转换为PDF的代码：

await pdf.html(tempContainer, {
  callback: async(pdf) => {
    await this.openPdf(pdf);
  },
  margin: [10, 10, 10, 10],
  autoPaging: 'text',
  x: 0,
  y: 50,
  html2canvas: {
    scale: 0.5
  }
});

转换后出现粗体文本对齐错位的问题，需修复该偏移。

1. 统一字体与行高基线 #

粗体错位多因字体基线不匹配导致，给父元素<p>和粗体元素设置明确的继承样式：

<p style="page-break-inside: avoid; line-height: 1.4; font-family: Arial, sans-serif; font-size: 12px;">
  <b style="font-family: inherit; line-height: inherit;">${el.pName || ''}:</b> 
  ${el.pDescription ? el.pDescription + ',' : ''} ${el.ServicePhoneNumber ? el.ServicePhoneNumber + ',' : ''}, 
  ${el.addressLine1 ? el.addressLine1 + ',' : ''}, ${el.addressCity ? el.addressCity + ',' : ''}, 
  ${el.addressPostalCode ? el.addressPostalCode + ',' : ''}, Utah
</p>

强制粗体元素继承父元素的字体属性，避免浏览器自动替换字体引发基线偏移。

2. 提高html2canvas渲染精度 #

当前scale:0.5的低缩放比例易导致字体渲染失真，调整为更高的缩放值：

await pdf.html(tempContainer, {
  callback: async(pdf) => {
    await this.openPdf(pdf);
  },
  margin: [10, 10, 10, 10],
  autoPaging: 'text',
  x: 0,
  y: 50,
  html2canvas: {
    scale: 2, // 提升渲染精度，减少错位
    useCORS: true
  }
});

更高的缩放比例能还原更准确的字体布局，jsPDF会自动适配PDF尺寸。

3. 改用CSS粗体替代<b>标签 #

<b>标签的默认样式可能与父元素冲突，改用font-weight:bold的<span>标签控制粗体：

<p style="page-break-inside: avoid; line-height: 1.4; font-family: Arial, sans-serif;">
  <span style="font-weight: bold;">${el.pName || ''}:</span> 
  ${el.pDescription ? el.pDescription + ',' : ''} ${el.ServicePhoneNumber ? el.ServicePhoneNumber + ',' : ''}, 
  ${el.addressLine1 ? el.addressLine1 + ',' : ''}, ${el.addressCity ? el.addressCity + ',' : ''}, 
  ${el.addressPostalCode ? el.addressPostalCode + ',' : ''}, Utah
</p>

这种方式能更精准控制样式继承，减少布局异常。

4. 清理HTML中的冗余换行与空格 #

原HTML内的换行和多余空格可能干扰渲染布局，整理内容并通过CSS控制换行：

<div class="prv-blk" id="content-to-print"> 
  <p style="page-break-inside: avoid; line-height: 1.4; font-family: Arial, sans-serif; white-space: pre-line;">
    <span style="font-weight: bold;">${el.pName || ''}:</span> ${el.pDescription ? el.pDescription + ',' : ''} ${el.ServicePhoneNumber ? el.ServicePhoneNumber + ',' : ''}, ${el.addressLine1 ? el.addressLine1 + ',' : ''}, ${el.addressCity ? el.addressCity + ',' : ''}, ${el.addressPostalCode ? el.addressPostalCode + ',' : ''}, Utah
  </p>
</div>

用white-space:pre-line保留必要换行，消除多余空格带来的布局干扰。

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