PDF渲染项目中async/await无报错阻塞问题求助

问题定位 #

你代码里await loadingTask.promise无响应且无报错，核心原因大概率是：

• FileReader回调的上下文问题导致隐性错误被吞
• PDF Worker加载失败（Worker异常不会抛出到主线程，会导致Promise永久pending）
• 二进制数据处理或DOM引用错误

修复步骤 #

1. 替换FileReader为原生异步API（避免回调陷阱） #

放弃回调式的FileReader，改用file.arrayBuffer()的async/await写法，彻底避免this指向混乱和错误吞掉的问题：

async onpdf(e: any) {
  const file = e.target.files[0];
  if (file.type !== "application/pdf") return;
  
  const canvas = this.$refs.pdfViewer as HTMLCanvasElement;
  if (!canvas) {
    console.error("未找到canvas元素");
    return;
  }

  try {
    // 直接读取文件二进制数据
    const arrayBuffer = await file.arrayBuffer();
    const pdfData = new Uint8Array(arrayBuffer);
    
    const loadingTask = pdfjsLib.getDocument({ data: pdfData });
    const pdf = await loadingTask.promise;
    console.log("PDF加载完成");

    // 渲染第一页
    const page = await pdf.getPage(1);
    const scale = 0.5;
    const viewport = page.getViewport({ scale });
    
    canvas.width = viewport.width;
    canvas.height = viewport.height;
    
    const renderContext = {
      canvasContext: canvas.getContext("2d")!,
      viewport
    };
    await page.render(renderContext).promise;
    console.log("页面渲染完成");
  } catch (err) {
    // 强制捕获所有异常，定位问题根源
    console.error("PDF处理失败:", err);
  }
}

2. 修正Canvas的Ref引用 #

模板中canvas需要添加ref属性，否则this.$refs.pdfViewer会获取不到元素：

<template>
  <input id="file" type="file" accept=".pdf" @change="onpdf"/>
  <canvas ref="pdfViewer"></canvas>
</template>

3. 验证Worker加载状态 #

检查浏览器Network面板，确认pdf.min.js（Worker文件）是否成功加载：

• 确保CDN地址的版本与你安装的pdfjs-dist版本完全一致（当前用的是2.16.105）
• 若CDN加载失败，改用本地Worker：将pdfjs-dist/build/pdf.worker.min.js复制到项目静态资源目录，然后设置：

  pdfjsLib.GlobalWorkerOptions.workerSrc = "/static/pdf.worker.min.js";
  

4. 简化数据传递（可选） #

PDF.js支持直接传入File对象，省略手动转换Uint8Array的步骤：

const loadingTask = pdfjsLib.getDocument(file);

备选方案 #

如果上述方法仍无效，可以尝试使用PDF.js官方提供的PDFViewer组件，封装更完善，减少手动处理的异常点。

内容的提问来源于stack exchange，提问作者Nawapol R.