Vue3+PDFJS中如何让绘制画布高度匹配PDF容器高度？

1. 修正画布布局基础 #

先确保draw_canvas与pages_container完全重叠，避免布局偏移导致的高度视觉差：

• 给外层滚动容器doc_container添加position: relative，作为绝对定位的参考
• 给draw_canvas设置以下CSS：

#draw_canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none; /* 可选：避免遮挡PDF页面的交互 */
}

2. 同步画布的像素高度与显示高度 #

Canvas元素有两个独立的高度属性，只设置其中一个会导致尺寸偏差，必须同时同步：

const resizeObserver = new ResizeObserver(entries => {
  const container = entries[0].target;
  const canvas = document.getElementById('draw_canvas');
  if (!canvas) return;

  // 同步画布的实际绘制像素高度
  canvas.height = container.offsetHeight;
  // 同步画布的页面显示高度
  canvas.style.height = `${container.offsetHeight}px`;
});

resizeObserver.observe(document.getElementById('pages_container'));

3. 处理PDF渲染的异步延迟 #

PDFJS渲染页面是异步操作，可能在ResizeObserver首次触发后，页面才完全加载导致容器高度变化。在所有PDF页面渲染完成后，手动触发一次尺寸同步：

// 假设pageRenderPromises是所有页面渲染任务的Promise数组
Promise.all(pageRenderPromises).then(() => {
  const container = document.getElementById('pages_container');
  const canvas = document.getElementById('draw_canvas');
  if (container && canvas) {
    canvas.height = container.offsetHeight;
    canvas.style.height = `${container.offsetHeight}px`;
  }
});

4. 排查容器的额外间距影响 #

• 如果pages_container包含border，offsetHeight会包含该值，若只需要覆盖内容+padding区域，改用clientHeight替代offsetHeight
• 确认pages_container没有设置margin（offsetHeight不包含margin，不会影响画布高度）

内容的提问来源于stack exchange，提问作者sweet-pineapple