Always shows "Loading PDF..."
newproplus opened this issue · comments
Before you start - checklist
- I followed instructions in documentation written for my React-PDF version
- I have checked if this bug is not already reported
- I have checked if an issue is not listed in Known issues
- If I have a problem with PDF rendering, I checked if my PDF renders properly in PDF.js demo
Description
I use a worker file on my server, but when I open a PDF file, the component always shows "Loading PDF..."
Steps to reproduce
I use a base64 string, and I tried use file={{ data: base64 }} or file={base64}, it doesn't work. My code like:
import React, { useEffect, useState } from 'react'
import { Document, Page, pdfjs } from 'react-pdf'
pdfjs.GlobalWorkerOptions.workerPort = new Worker('/worker/pdf.worker.min.mjs')
interface Props {
base64Str: string
toolBarHeightPx: number
contentEditableHeightPx: string
}
export const PdfViewer: React.FC<Props> = ({ base64Str, toolBarHeightPx, contentEditableHeightPx }) => {
const [numPages, setNumPages] = useState(0)
const [pageNumber, setPageNumber] = useState(1)
const [renderedPageNumber, setRenderedPageNumber] = useState(0)
// function onDocumentLoadSuccess({ numPages }) {
// setNumPages(numPages)
// }
function changePage(offset: number) {
setPageNumber((prevPageNumber) => prevPageNumber + offset)
}
function previousPage() {
changePage(-1)
}
function nextPage() {
changePage(1)
}
const isLoading = renderedPageNumber !== pageNumber
const base64 = `data:application/pdf;base64,JVBERi0xLjMKJf////8KOSAwIG9iago8PAovVHlwZSAvRXh0R1N0YXRlCi9jYSAxCj4+CmVuZG9iago4IDAgb2JqCjw8Ci9UeXBlIC9QYWdlCi9QYXJlbnQgMSAwIFIKL01lZGlhQm94IFswIDAgNTk1LjI4MDAyOSA4NDEuODkwMDE1XQovQ29udGVudHMgNiAwIFIKL1Jlc291cmNlcyA3IDAgUgovVXNlclVuaXQgMQo+PgplbmRvYmoKNyAwIG9iago8PAovUHJvY1NldCBbL1BERiAvVGV4dCAvSW1hZ2VCIC9JbWFnZUMgL0ltYWdlSV0KL0V4dEdTdGF0ZSA8PAovR3MxIDkgMCBSCj4+Ci9Gb250IDw8Ci9GMSAxMCAwIFIKL0YyIDExIDAgUgo+Pgo+PgplbmRvYmoKMTMgMCBvYmoKKHJlYWN0LXBkZikKZW5kb2JqCjE0IDAgb2JqCihyZWFjdC1wZGYpCmVuZG9iagoxNSAwIG9iagooRDoyMDI0MDIwMTA4MzIyMVopCmVuZG9iagoxMiAwIG9iago8PAovUHJvZHVjZXIgMTMgMCBSCi9DcmVhdG9yIDE0IDAgUgovQ3JlYXRpb25EYXRlIDE1IDAgUgo+PgplbmRvYmoKMTAgMCBvYmoKPDwKL1R5cGUgL0ZvbnQKL0Jhc2VGb250IC9IZWx2ZXRpY2EKL1N1YnR5cGUgL1R5cGUxCi9FbmNvZGluZyAvV2luQW5zaUVuY29kaW5nCj4+CmVuZG9iagoxNyAwIG9iago8PAovVHlwZSAvRm9udERlc2NyaXB0b3IKL0ZvbnROYW1lIC9RVkNZREsrT3N3YWxkLVJlZ3VsYXIKL0ZsYWdzIDQKL0ZvbnRCQm94IFstMTk3IC0yODcgMTIyMyAxMjk3XQovSXRhbGljQW5nbGUgMAovQXNjZW50IDExOTMKL0Rlc2NlbnQgLTI4OQovQ2FwSGVpZ2h0IDgxMAovWEhlaWdodCA1NzgKL1N0ZW1WIDAKL0ZvbnRGaWxlMiAxNiAwIFIKPj4KZW5kb2JqCjE4IDAgb2JqCjw8Ci9UeXBlIC9Gb250Ci9TdWJ0eXBlIC9DSURGb250VHlwZTIKL0Jhc2VGb250IC9RVkNZREsrT3N3YWxkLVJlZ3VsYXIKL0NJRFN5c3RlbUluZm8gPDwKL1Jl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g+uv4mO1CBUxS08Ss8TFcoGOmysW7S6srlVhdQUa+U9mx+Qalfji7readgIW4XBIUEVoVII9ASY4RKiyp45QswRNhGOd4Eiec4ITAU9wprJ8Dycle0aCrAgCkUAS5HuQHioTKFL2BIz6aU7UfW4z5hBnds9Y3JwL8dJgKdeYqDZ4n72dbXTR9wOEQpsgCmVuZHN0cmVhbQplbmRvYmoKNiAwIG9iago8PAovTGVuZ3RoIDM5NAovRmlsdGVyIC9GbGF0ZURlY29kZQo+PgpzdHJlYW0KeJzVVE1PwzAMvfdX5A+Q+SOxE2naAfEhcRvqDXGArkMcQEKT+P04bTfKyCQOHKCpo+Q5ceyX16IDa2doXQroUwbA6LqX5s0aDs6xP4I4lncA9xBm9qSh7EfwqTgXF/37c9ffXp+7bteAj4BZQFNgZKUY3c+gXffaLK536J52dt76cGYl7fN2lvXM1VoyV5YjuXbb3C21J1g5uHftTXPZWshDEeA5hLHeP5t9YMvdLZUkCmqwPhCoDqBkA5JNB6ewBtooSBAxrK/XTMlzSmPR6/qNTr714P8iA0kesz16pIaIPkcqey28MFUYHZb+Fj3kKIz0gIFmZDYSZYNgFs3ETM3StMACwMPkf5yNO7PNNO6n8SHYthywn2yqnBKhZ5UKp5+8nOYUgb2K5py+kmpX6ONY84lP7FcpnSluI1lUo2mqo6Imq2BSoUSllTvjIkhZOYoGofRFlsp1vVnu+J2ZWXEnmAGn2bRU7oyOiEnRZ/kf/x5GAtoSMNaVw54jVej5LHFGT2kfDwEwfAplbmRzdHJlYW0KZW5kb2JqCnhyZWYKMCAyMAowMDAwMDAwMDAwIDY1NTM1IGYgCjAwMDAwMDEzNDMgMDAwMDAgbiAKMDAwMDAwMTQwMCAwMDAwMCBuIAowMDAwMDAxMjU2IDAwMDAwIG4gCjAwMDAwMDEyMzUgMDAwMDAgbiAKMDAwMDAwMTQ0NyAwMDAwMCBuIAowMDAwMDA1NTU5IDAwMDAwIG4gCjAwMDAwMDAxODkgMDAwMDAgbiAKMDAwMDAwMDA1OSAwMDAwMCBuIAowMDAwMDAwMDE1IDAwMDAwIG4gCjAwMDAwMDA0ODYgMDAwMDAgbiAKMDAwMDAwMTA4NiAwMDAwMCBuIAowMDAwMDAwNDEwIDAwMDAwIG4gCjAwMDAwMDAzMTggMDAwMDAgbiAKMDAwMDAwMDM0NiAwMDAwMCBuIAowMDAwMDAwMzc0IDAwMDAwIG4gCjAwMDAwMDE0OTAgMDAwMDAgbiAKMDAwMDAwMDU4NCAwMDAwMCBuIAowMDAwMDAwNzk5IDAwMDAwIG4gCjAwMDAwMDUxOTEgMDAwMDAgbiAKdHJhaWxlcgo8PAovU2l6ZSAyMAovUm9vdCAzIDAgUgovSW5mbyAxMiAwIFIKL0lEIFs8MWE5ZTZkMzI0ZTdlZTI1NzRjNmI4YWNiY2UyMTZmYTI+IDwxYTllNmQzMjRlN2VlMjU3NGM2YjhhY2JjZTIxNmZhMj5dCj4+CnN0YXJ0eHJlZgo2MDI1CiUlRU9GCg==`
return (
<div className="App">
<div>
<p>
Page {pageNumber || (numPages ? 1 : '--')} of {numPages || '--'}
</p>
<button type="button" disabled={pageNumber <= 1} onClick={previousPage}>
Previous
</button>{' '}
<button type="button" disabled={pageNumber >= numPages} onClick={nextPage}>
Next
</button>
</div>
<Document
file={{ data: base64 }}
// onLoadSuccess={onDocumentLoadSuccess}
>
{isLoading && renderedPageNumber ? <Page key={renderedPageNumber} className="prevPage" pageNumber={renderedPageNumber} width={400} /> : null}
<Page key={pageNumber} pageNumber={pageNumber} onRenderSuccess={() => setRenderedPageNumber(pageNumber)} width={400} />
</Document>
</div>
)
}Expected behavior
Render PDF file.
Actual behavior
Always shows "Loading PDF..."
Additional information
No response
Environment
- Browser (if applicable): webview on android12
- React-PDF version: 7.7.0
- React version: 18.2.0
- Webpack version (if applicable): I'm using vite 5.0.12
Nowhere in the documentation I'm suggesting to use workerPort. I think it might fail to load the worker and cause the issue you're seeing. Why did you choose to use it?
Actually, I use pdfjs.GlobalWorkerOptions.workerSrc = '/worker/pdf.worker.min.js' at first, but it shows an error "Uncaught SyntaxError: Unexpected token 'export'", source: http://192.168.1.123:1420/worker/pdf.worker.min.mjs (21)
And now I found that because the worker version and API version are different.
After I change the worker's version, it works.