Vue/Nuxt提取PDF/图片文本报错：TypeError: worker.load is not a function

开发PDF/图片文本提取功能时，图片识别模块触发TypeError: worker.load is not a function错误，相关代码如下：

async parseFile() {
      if (this.uploadedFile) {
        const fileType = this.getFileType(this.uploadedFile.name);
        if (fileType === "image") {
          const worker = createWorker();
          await worker.load();
          await worker.loadLanguage("eng");
          await worker.initialize("eng");
          const {
            data: { text },
          } = await worker.recognize(this.uploadedFile);
          console.log(text);
          await worker.terminate();
        } else if (fileType === "pdf") {
          const fileReader = new FileReader();
          fileReader.onload = async () => {
            const typedArray = new Uint8Array(fileReader.result);
            const pdf = await pdfjsLib.getDocument(typedArray).promise;
            const numPages = pdf.numPages;
            let pdfText = "";
            for (let i = 1; i <= numPages; i++) {
              const page = await pdf.getPage(i);
              const content = await page.getTextContent();
              const pageText = content.items.map((item) => item.str).join(" ");
              pdfText += pageText + "\n";
            }
            console.log(pdfText);
          };
          fileReader.readAsArrayBuffer(this.uploadedFile);
        }

核心原因 #

这个错误90%以上是Tesseract.js版本不兼容导致的：

• Tesseract.js v2 中，createWorker()直接返回Worker实例，需要手动调用load()、loadLanguage()、initialize()完成初始化
• Tesseract.js v3 中，createWorker()返回Promise，且初始化流程被合并，不再需要load()和initialize()方法

解决办法 #

办法1：降级到Tesseract.js v2.x #

如果想保留现有代码结构，直接安装指定版本：

# npm
npm install tesseract.js@2.1.5

# yarn
yarn add tesseract.js@2.1.5

办法2：适配Tesseract.js v3.x API #

如果要使用最新版v3，修改图片识别部分代码：

async parseFile() {
  if (this.uploadedFile) {
    const fileType = this.getFileType(this.uploadedFile.name);
    if (fileType === "image") {
      // v3中createWorker返回Promise，必须await
      const worker = await createWorker('eng');
      const { data: { text } } = await worker.recognize(this.uploadedFile);
      console.log(text);
      await worker.terminate();
    } 
    // PDF部分代码无需修改
    else if (fileType === "pdf") {
      const fileReader = new FileReader();
      fileReader.onload = async () => {
        const typedArray = new Uint8Array(fileReader.result);
        const pdf = await pdfjsLib.getDocument(typedArray).promise;
        const numPages = pdf.numPages;
        let pdfText = "";
        for (let i = 1; i <= numPages; i++) {
          const page = await pdf.getPage(i);
          const content = await page.getTextContent();
          const pageText = content.items.map((item) => item.str).join(" ");
          pdfText += pageText + "\n";
        }
        console.log(pdfText);
      };
      fileReader.readAsArrayBuffer(this.uploadedFile);
    }
  }
}

Nuxt.js额外注意事项 #

• Nuxt 3：Worker只能在浏览器环境运行，需要用process.client判断执行时机：

async parseFile() {
  if (process.client && this.uploadedFile) {
    // 原有逻辑代码
  }
}

• Nuxt 2：需在nuxt.config.js中配置transpile，避免打包错误：

export default {
  build: {
    transpile: ['tesseract.js']
  }
}

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