pdfjs-dist能否兼容TypeScript？PDF转Canvas预览导入遇问题求助

第一个错误：类型声明缺失 #

导入pdfjs-dist/build/pdf时出现类型错误，是因为TypeScript没有该模块的类型声明文件，直接安装对应的类型包即可：

yarn add @types/pdfjs-dist --dev

第二个错误：GlobalWorkerOptions undefined #

直接导入pdfjs-dist根目录模块会导致运行时找不到GlobalWorkerOptions，这是因为pdfjs-dist的核心API和配置项都在build/pdf子模块里，正确的做法是从该路径导入，同时必须指定worker文件的路径：

正确导入与配置示例 #

// 导入核心模块
import * as pdfjsLib from 'pdfjs-dist/build/pdf';

// 根据项目构建工具设置worker路径
// Webpack环境下用require.resolve获取正确路径
pdfjsLib.GlobalWorkerOptions.workerSrc = require.resolve('pdfjs-dist/build/pdf.worker.js');

// Vite环境下用import.meta.url处理路径
// pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.js', import.meta.url).href;

// 渲染PDF到Canvas的核心函数
async function renderPdf(pdfUrl, canvasDom) {
  // 加载PDF文档
  const pdfDoc = await pdfjsLib.getDocument(pdfUrl).promise;
  // 获取第一页（可按需修改页码）
  const page = await pdfDoc.getPage(1);
  // 设置预览视口（scale为缩放比例，可调整）
  const viewport = page.getViewport({ scale: 1.2 });
  // 设置Canvas尺寸匹配视口
  canvasDom.width = viewport.width;
  canvasDom.height = viewport.height;
  // 渲染页面到Canvas
  await page.render({
    canvasContext: canvasDom.getContext('2d'),
    viewport: viewport
  }).promise;
}

// 调用示例（比如在页面挂载后执行）
// renderPdf('/static/test.pdf', document.getElementById('pdf-preview-canvas'));

关键注意点 #

• 必须从pdfjs-dist/build/pdf导入核心API，根目录模块仅做导出转发，不包含完整配置项
• worker文件是pdfjs-dist运行必需的，必须正确指定其路径，否则无法加载PDF内容

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