使用getBoundingClientRect及client尺寸时，jsPDF添加图片尺寸与位置异常

核心原因 #

你设置了pixelRatio: 2，这会让toPng生成的图片像素尺寸是原DOM元素的2倍，但你在addImage时直接用了原DOM的clientWidth/clientHeight和未缩放的偏移量，导致PDF里的元素被放大2倍，偏移也跟着翻倍。

解决方案 #

1. 同步像素比例的尺寸计算 #

把所有和位置、尺寸相关的值都除以你设置的pixelRatio，确保PDF里的渲染比例和DOM一致：

const pixelRatio = 2;
// 计算偏移量
const parentRect = parentElement.getBoundingClientRect();
const headerRect = pageHeader.getBoundingClientRect();
const xOffset = (headerRect.left - parentRect.left) / pixelRatio;
const yOffset = (headerRect.top - parentRect.top) / pixelRatio;
// 计算尺寸
const imgHeight = pageHeader.clientHeight / pixelRatio;
const imgWidth = pageHeader.clientWidth / pixelRatio;

// 生成图片并添加到PDF
const headerImgData = await toPng(pageHeader as HTMLElement, {
  cacheBust: true,
  pixelRatio: pixelRatio,
});

pdf.addImage(headerImgData, 'PNG', xOffset, yOffset, imgWidth, imgHeight);

2. 改用元素的布局尺寸（可选） #

如果元素包含padding、border，用getBoundingClientRect()的width/height更准确，替代clientWidth/clientHeight：

const imgHeight = headerRect.height / pixelRatio;
const imgWidth = headerRect.width / pixelRatio;

3. 排查父元素缩放 #

如果父元素设置了transform: scale()之类的缩放样式，需要额外计算缩放因子：

// 获取父元素的缩放比例
const parentScale = getComputedStyle(parentElement).transform;
const scaleFactor = parentScale !== 'none' ? parseFloat(parentScale.split(',')[3]) : 1;

// 偏移量和尺寸要再除以缩放因子
const xOffset = (headerRect.left - parentRect.left) / pixelRatio / scaleFactor;
const yOffset = (headerRect.top - parentRect.top) / pixelRatio / scaleFactor;
const imgHeight = headerRect.height / pixelRatio / scaleFactor;
const imgWidth = headerRect.width / pixelRatio / scaleFactor;

4. 验证PDF单位匹配 #

确认你的模拟PDF父元素的尺寸和jsPDF的A4尺寸（px单位下A4为794px×1123px）完全一致，避免父元素本身尺寸和PDF页面不匹配导致的偏移错误。

内容的提问来源于stack exchange，提问作者El baz Houcine