pdfjs-dist实现pdf预览偶现空白不报错问题解决

橙子yq2025-05-24 16:23

javascript 复制代码

const calculateFitScale = (pageWidth, pageHeight) => {
  const canvas = canvasRef.value;
  if (!canvas) return 1;

  const container = document.getElementById("pdf-container");
  if (!container) return 1;

  const containerWidth = container.clientWidth;
  const containerHeight = container.clientHeight;

  if (containerWidth === 0 || containerHeight === 0) {
    return 1;
  }  // 关键代码

  // 计算适应宽度的scale
  const scaleWidth = containerWidth / pageWidth;
  //const scaleHeight = containerHeight / pageHeight;

  // 取平方根使缩放更合理(避免过度缩放)
  return Math.sqrt(scaleWidth);
  // return Math.min(scaleWidth); // 取最小值
};

问题出现情况：在预览第一张图的时候通常都是成功的，后面的图偶尔会在cavnas中空白渲染，经排查就是初始化渲染的时候，计算适应容器的缩放比例这里出错了，关键解决代码如下：

if (containerWidth === 0 || containerHeight === 0) {

return 1;

}

读取pdf容器的宽高的时候读取到0 ，导致渲染了宽高为0的画布。