使用pdfjs展示文件夹PDF时页面空白问题求助

1. 先处理PDF.js的TT字体警告 #

这个Warning: TT: undefined function: 32来自PDF.js的util.js，大概率是PDF文件本身的字体嵌入异常（TT指代TrueType字体）——可能是PDF里的字体缺失、损坏或未正确嵌入。

• 先替换一个已知正常的PDF文件到目标文件夹，测试是否能正常显示，以此排查是单文件问题还是批量文件的共性问题。
• 如果是批量PDF的字体问题，可以用Ghostscript工具重新生成修复字体：

  gs -dNOPAUSE -dBATCH -sDEVICE=pdfwrite -dPDFSETTINGS=/prepress -sOutputFile=fixed.pdf input.pdf
  

2. 前端渲染逻辑检查 #

确认PDF.js库的加载与使用 #

如果你的displayPDFs()依赖PDF.js渲染，要确保：

• 正确引入pdf.js和pdf.worker.js，检查文件路径是否无误，worker文件在DevTools的Network面板中是否加载成功。
• 渲染PDF的容器DOM元素存在且有明确的宽高（避免因容器尺寸为0导致视觉空白）。
• 渲染代码的核心逻辑无遗漏，参考标准写法：

  function displayPDF(pdfUrl, containerId) {
    const container = document.getElementById(containerId);
    if (!container) return;
  
    pdfjsLib.getDocument(pdfUrl).promise.then(pdf => {
      return pdf.getPage(1); // 先渲染第一页测试
    }).then(page => {
      const viewport = page.getViewport({ scale: 1.2 });
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      canvas.width = viewport.width;
      canvas.height = viewport.height;
      container.appendChild(canvas);
  
      page.render({ canvasContext: ctx, viewport });
    }).catch(err => {
      console.error('PDF渲染报错:', err);
    });
  }
  

检查showPDFs()的执行时机 #

确保showPDFs()在DOM完全加载后执行，避免操作未生成的DOM元素：

document.addEventListener('DOMContentLoaded', () => {
  showPDFs();
});

3. 后端接口返回数据验证 #

确认get_pdf_list.php返回的PDF路径有效：

• 查看DevTools的Network面板中该接口的响应，检查返回的路径是绝对路径、还是相对于当前页面的正确相对路径。
• 复制返回的PDF路径到浏览器地址栏，验证是否能直接打开PDF文件，排除路径错误问题。
• 后端代码需确保路径拼接正确，示例参考：

  <?php
  $pdfDir = './pdf_storage/'; // 替换为你的实际文件夹路径
  $pdfList = [];
  if (is_dir($pdfDir)) {
    $files = scandir($pdfDir);
    foreach ($files as $file) {
      $ext = strtolower(pathinfo($file, PATHINFO_EXTENSION));
      if ($ext === 'pdf') {
        $pdfList[] = $pdfDir . $file;
      }
    }
  }
  header('Content-Type: application/json');
  echo json_encode($pdfList);
  ?>
  

4. 其他排查点 #

• 清除浏览器缓存后强制刷新页面（Ctrl+F5），避免加载旧的损坏资源。
• 如果PDF文件存放在跨域域名下，确认后端配置了CORS规则，允许前端跨域加载资源。

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