Install pdfjs-dist
import { Document, Page, pdfjs } from "react-pdf";
import pdfjsWorker from "pdfjs-dist/build/pdf.worker.entry";
pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker;
Reference: https://github.com/mozilla/pdf.js/issues/8305
UPDATE
react-pdf >= 9.0.0
import { Document, Page, pdfjs } from "react-pdf";
import { WorkerMessageHandler } from "pdfjs-dist/build/pdf.worker.min.mjs";
pdfjs.GlobalWorkerOptions.workerSrc = new URL(
WorkerMessageHandler,
import.meta.url
).toString();
This also fixed a known issue:
Failed to load module script: Expected a JavaScript-or-Wasm module script but the server responded with a MIME type of "application/octet-stream". Strict MIME type checking is enforced for module scripts per HTML spec.
https://github.com/wojtekmaj/react-pdf/issues/1825
Answer from lissettdm on Stack OverflowCan't resolve 'pdfjs-dist/build/pdf.worker.min.mjs in Nextjs 14 app router
How do I solve this issue: Error: Setting up fake worker failed: "Cannot find module '/pdf.worker.js' ?
Install pdfjs-dist
import { Document, Page, pdfjs } from "react-pdf";
import pdfjsWorker from "pdfjs-dist/build/pdf.worker.entry";
pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker;
Reference: https://github.com/mozilla/pdf.js/issues/8305
UPDATE
react-pdf >= 9.0.0
import { Document, Page, pdfjs } from "react-pdf";
import { WorkerMessageHandler } from "pdfjs-dist/build/pdf.worker.min.mjs";
pdfjs.GlobalWorkerOptions.workerSrc = new URL(
WorkerMessageHandler,
import.meta.url
).toString();
This also fixed a known issue:
Failed to load module script: Expected a JavaScript-or-Wasm module script but the server responded with a MIME type of "application/octet-stream". Strict MIME type checking is enforced for module scripts per HTML spec.
https://github.com/wojtekmaj/react-pdf/issues/1825
found a more efficient way of including the worker by including the library from the dependencies of react-pdf itself, this way you will never get a version mismatch like this The API version "2.3.45" does not match the Worker version "2.1.266"
if you install pdfjs-dist manually you will have to check react pdf dependency version on every build
import { Document, Page, pdfjs } from "react-pdf";
import pdfjsWorker from "react-pdf/node_modules/pdfjs-dist/build/pdf.worker.entry";
pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker;
see similar error on pdfjs library : https://github.com/mozilla/pdf.js/issues/10997
hope it helps people
» npm install pdfjs-dist
Hope am not too late in answering your question. Here are the steps:
- Open the particular pdf in the reader to full screen.
- Launch inspect.
- Look for a hidden download button with id
downloadstyled asdisplay: none, Change that todisplay: inlineto make it visible. - Click the button to download your pdf.
document.getElementById('download').click()
Answer by Matt C and Vincent Omondi