使用pdf.js渲染PDF时如何消除顶部多余空白边距

可行解决思路 #

• 优先修正PDF页面视口计算逻辑，大部分顶部空白都是因为PDF本身的框定义参数问题：很多用户上传的PDF会存在MediaBox（媒体框，定义页面物理大小）比CropBox（裁切框，定义实际显示内容范围）大的情况，pdf.js默认使用MediaBox计算视口会导致内容四周出现额外空白，同时要强制归零渲染偏移参数，修改代码参考如下：

pdfDoc.getPage(1).then(page => {
  // 优先用实际显示的裁切框作为视口计算基准，无裁切框再用媒体框
  const displayBox = page._pageInfo.cropBox || page._pageInfo.mediaBox;
  const viewport = page.getViewport({ 
    scale: 1.5, // 替换为你的实际缩放参数
    offsetX: 0, 
    offsetY: 0, // 强制归零偏移，避免默认偏移导致的顶部留白
    // 若以上调整后仍有固定高度留白，可手动设置offsetY为负数微调，比如offsetY: -20
  });
  // 必须同时设置canvas的元素属性宽高（对应渲染像素）和CSS宽高（对应页面显示尺寸），避免尺寸不匹配导致的占位空白
  const canvas = document.getElementById('pdf-canvas');
  const context = canvas.getContext('2d');
  canvas.height = viewport.height;
  canvas.width = viewport.width;
  canvas.style.width = '100%';

  const renderContext = {
    canvasContext: context,
    viewport: viewport
  };
  page.render(renderContext);
});

• 排查DOM样式遗留问题：你使用的bootstrap col-sm-9类可能继承了父级行高、垂直对齐属性，额外新增样式重置：

.pdf_col_main {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important; /* 避免空字符占位产生空白 */
}
#pdf-canvas {
  display: block;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: top; /* 强制顶部对齐，覆盖默认基线对齐属性 */
}

• 排查异步渲染时序问题：canvas默认初始尺寸是300*150，如果PDF渲染是异步执行的，渲染完成前canvas会按默认尺寸占位，导致顶部提前空出一块。解决方法是初始化时先把canvas设为display: none，等page.render()的promise执行完成后再设为display: block。
• 若你使用单canvas渲染多页PDF，需手动计算每页的Y轴偏移，第一页的Y偏移必须从0开始，不要加额外边距参数。

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