React pdf js - Warning: Setting up fake worker

user_4592083 0
Viewed 13533

I am using a react pdf viewer and I would like to set up worker locally. I have tried doing that like this:

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

<Worker workerUrl={pdfjsWorker}>
    <Viewer
      fileUrl={url}
      defaultScale={SpecialZoomLevel.PageFit}
      plugins={[
        defaultLayoutPluginInstance
      ]}
    />
  </Worker>

But, that throws a warning:

Warning: Setting up fake worker

What is the correct way of import a worker then, why do I get this warning?

service-worker pdf.js reactjs javascript
4 Answers
user_33142430

In my case, instead of write the code like this:

<script src="/js/pdf.worker.min.js"></script>
<script src="/js/pdf.min.js"></script>

I wrote it as:

<!--script src="/js/pdf.worker.min.js"></script--> // removed
<script src="/js/pdf.min.js"></script>

$(function() {
  pdfjsLib.GlobalWorkerOptions.workerSrc = '/js/pdf.worker.min.js';    
});

Which made the warning disappear ... even though my PDF was rendered anyway - i just wanted that warning removed.

user_2819650

Worker component expects a workerUrl which is of type string. You might have to replace pdfjsWorker in your code with actual pdf-worker url.

const pdfVersion = "2.6.347"
const pdfWorkerUrl = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfVersion}/pdf.worker.js`
<Worker workerUrl={pdfWorkerUrl}>
    <Viewer
      fileUrl={url}
      defaultScale={SpecialZoomLevel.PageFit}
      plugins={[
        defaultLayoutPluginInstance
      ]}
    />
</Worker>

Note: Please make sure to set the same version for both pdfjs-dist and worker.

The official documentation mentions the same thing here: https://react-pdf-viewer.dev/docs/basic-usage/

user_50225670

Watch out!

pdfjs version must be the same

Use it like below please

import { Worker, Viewer } from '@react-pdf-viewer/core';
import '@react-pdf-viewer/core/lib/styles/index.css';

import { pdfjs } from 'react-pdf';

const YourComponent = () => {
  return (
    <div>
      <Worker workerUrl={`https://unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.js`}>
        <Viewer fileUrl={fileUrl} />
      </Worker>
    </div>
  )
};
user_149995990
Related