I’m working on a React project where I use a PdfArea component to display PDF files. I receive a link on a PDF-file from server and then use react-pdf to show it. It works fine most of the time but sometimes when I load a PDF file, it doesn’t display and I encounter an endless "Loading page…" text even though the file i pass to the Document component is valid. This is how i receive a file:
const fetchTemplate = async () => {
const { pdf } = await templateApi.getOne(id as string);
const url = pdf.download_url;
const response = await fetch(url);
const blob = await response.blob();
const file = new File([blob], 'uploadedFile', { type: blob.type });
setUploadedFile(file);
};
This is how i render the PDF.
import { pdfjs, Document, Page } from 'react-pdf';
pdfjs.GlobalWorkerOptions.workerSrc = new URL(
'pdfjs-dist/build/pdf.worker.min.mjs',
import.meta.url,
).toString()
export const DroppableArea = (uploadedFile) => {
return (
<div className="h-full relative">
<Document loading={<Spinner loading={true} color="#ff4c04" override={spinnerStyleOverride} />} file={uploadedFile} onLoadSuccess={handleLoadSuccess}>
<Page pageNumber={1} renderAnnotationLayer={false} renderTextLayer={false} />
</Document>
{children}
</div>
);
}
I thought there might be the problem with the worker but i don’t have a clue of how to debug it because there is no any errors. Are there any ways i can encounter the problem?
You need to sign in to view this answers
Leave feedback about this