SvelteKit 4 TypeScript项目使用pdfjs 4.1.392报workerSrc类型错误解决方法

错误原因 #

你遇到的Invalid 'workerSrc' type错误，是因为pdfjs 4.x版本中，GlobalWorkerOptions.workerSrc要求传入字符串类型的Worker文件URL，但你直接导入的pdfjsWorker是模块对象，类型不匹配导致的。

两种正确解决方案 #

方案1：使用CDN托管的Worker（最简单）

直接将workerSrc设置为对应版本的CDN地址，无需处理本地打包：

import * as pdfjs from 'pdfjs-dist/build/pdf';

// 替换为你使用的pdfjs版本对应的CDN地址
pdfjs.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.1.392/pdf.worker.min.js';

方案2：本地导入Worker（Vite/SvelteKit原生支持）

利用Vite的import.meta.url特性，将本地Worker文件转换为URL：

import * as pdfjs from 'pdfjs-dist/build/pdf';

// 自动获取本地Worker的打包后URL
const workerUrl = new URL('pdfjs-dist/build/pdf.worker.js', import.meta.url).href;
pdfjs.GlobalWorkerOptions.workerSrc = workerUrl;

完整文本提取示例代码 #

在src/routes/+page.svelte中实现PDF文本提取：

<script lang="ts">
import * as pdfjs from 'pdfjs-dist/build/pdf';

// 初始化Worker（二选一即可）
// 方案1：CDN
pdfjs.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.1.392/pdf.worker.min.js';
// 方案2：本地
// const workerUrl = new URL('pdfjs-dist/build/pdf.worker.js', import.meta.url).href;
// pdfjs.GlobalWorkerOptions.workerSrc = workerUrl;

async function extractTextFromPdf(pdfFile: File) {
  const arrayBuffer = await pdfFile.arrayBuffer();
  // 加载PDF文档
  const pdfDoc = await pdfjs.getDocument(arrayBuffer).promise;
  let fullText = '';

  // 遍历所有页面提取文本
  for (let pageNum = 1; pageNum <= pdfDoc.numPages; pageNum++) {
    const page = await pdfDoc.getPage(pageNum);
    const textContent = await page.getTextContent();
    // 拼接当前页面的文本内容
    const pageText = textContent.items.map(item => (item as pdfjs.TextItem).str).join(' ');
    fullText += `${pageText}\n\n`;
  }

  return fullText;
}

// 处理文件上传事件
async function handleFileSelect(event: Event) {
  const input = event.target as HTMLInputElement;
  const file = input.files?.[0];
  if (!file || file.type !== 'application/pdf') return;

  try {
    const extractedText = await extractTextFromPdf(file);
    console.log('提取的PDF文本:', extractedText);
    // 这里可以将文本展示到页面上
  } catch (err) {
    console.error('PDF文本提取失败:', err);
  }
}
</script>

<div>
  <input type="file" accept=".pdf" on:change={handleFileSelect} />
</div>

注意事项 #

• pdfjs 4.x自带完整的TypeScript类型定义，无需额外安装@types/pdfjs-dist，如果之前安装了可能导致类型冲突，建议移除。
• 使用本地Worker时，SvelteKit的Vite打包工具会自动处理Worker文件的打包，无需额外配置。

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