CODEWITHSUNDEEP
reactjstypescriptpdf.jspdfjs-dist
Null Salad
Null Salad

Reputation: 1030

how to use pdfjs worker in react and typescript?

I'm trying to use pdfjs in a react+ts project.

import React from "react";
import * as pdfjs from "pdfjs-dist"

export default function EditPdf() {
  React.useEffect(()=>{    
    const doc = pdfjs.getDocument("helloworld.pdf");
    doc.promise.then((pdf)=>{
      console.log(pdf)
    })
  },[])  
  return (
        <div>
            content
        </div>
    )
  }

Here I import it but I get the error:

Error: No "GlobalWorkerOptions.workerSrc" specified.
    at get workerSrc (http://localhost:5173/node_modules/.vite/deps/pdfjs-dist.js?v=aab08523:12098:11)
    at _PDFWorker._initialize (http://localhost:5173/node_modules/.vite/deps/pdfjs-dist.js?v=aab08523:11983:7)
    at new _PDFWorker (http://localhost:5173/node_modules/.vite/deps/pdfjs-dist.js?v=aab08523:11956:10)
    at getDocument (http://localhost:5173/node_modules/.vite/deps/pdfjs-dist.js?v=aab08523:11120:69)
    at http://localhost:5173/src/EditPdf.tsx?t=1727811223984:24:17
    at commitHookEffectListMount (http://localhost:5173/node_modules/.vite/deps/chunk-W6L2VRDA.js?v=2bfcffa6:16915:34)
    at invokePassiveEffectMountInDEV (http://localhost:5173/node_modules/.vite/deps/chunk-W6L2VRDA.js?v=2bfcffa6:18324:19)
    at invokeEffectsInDev (http://localhost:5173/node_modules/.vite/deps/chunk-W6L2VRDA.js?v=2bfcffa6:19701:19)
    at commitDoubleInvokeEffectsInDEV (http://localhost:5173/node_modules/.vite/deps/chunk-W6L2VRDA.js?v=2bfcffa6:19686:15)
    at flushPassiveEffectsImpl (http://localhost:5173/node_modules/.vite/deps/chunk-W6L2VRDA.js?v=2bfcffa6:19503:13)

Well online it seems "easy" enough... I can do something like:

import pdfjsWorker from "pdfjs-dist/build/pdf.worker.entry";

// ...
pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker

but pdf.worker.entry doesn't exist. I searched in the node_modules folder and found a similarly named pdf.worker.mjs file. I tried to import with import pfdjsWorker from "pdfjs-dist/build/pdf.worker.entry" but it cannot find the declaration for this. Finally I noticed that there exists a pdfjs.PDFWorker type declaration, but I am not sure how to use it (no documentation).

How can I successfully import and use pdfjs + a worker in a React+TS proj?

Upvotes: 0

Views: 1018

Answers (5)

Nikita Rybak
Nikita Rybak

Reputation: 68016

I'm also running pdfjs v4 in vite and found this works:

import { GlobalWorkerOptions } from 'pdfjs-dist/legacy/build/pdf.mjs';
GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/legacy/build/pdf.worker.min.mjs', import.meta.url).toString();

(We're running a legacy build, but I assume the main build works the same way)

Vite won't recognise it's a js module and hence won't minify it, so I'm using the min.mjs version here.

Upvotes: 0

keven
keven

Reputation: 1

You need to check if the webpack version of the project is running lower than the wenbpack version of the pdfjs project

Upvotes: 0

akanjimm
akanjimm

Reputation: 36

This worked for me:

  • Import the package as below

    import * as pdfjsLib from "pdfjs-dist";

  • Copy the pdf.worker.min.mjs file from node_modules/pdfjs-dist/build/ directory into your public folder

  • Set the worker to point to the file in your public folder

    pdfjsLib.GlobalWorkerOptions.workerSrc = window.location.origin + "/pdf.worker.min.mjs";

Helpful articles:

https://medium.com/@hesseclaus/using-pdfjs-with-react-app-rewired-f1f3a2527c45

https://mozilla.github.io/pdf.js/examples/index.html#interactive-examples

Upvotes: 2

Sunil Sharma
Sunil Sharma

Reputation: 11

import * as pdfjs from "pdfjs-dist/webpack.mjs";

Try importing from pdfjs-dist/webpack.mjs

And for typing you can declare module in .d.ts file. Code from my index.d.ts file:

declare module "pdfjs-dist/webpack.mjs" {
  export * from "pdfjs-dist";
}

Upvotes: 0

Kim Minh Thắng
Kim Minh Thắng

Reputation: 159

You can try grant the workerSrc by //mozilla.github.io/pdf.js/build/pdf.worker.mjs. Please refer to this document: https://mozilla.github.io/pdf.js/examples/

Upvotes: 0

Related Questions