I am trying to view a pdf file inside react pdf
but I cannot do that because it failed to load the file. I don't know why, and I have tried these CDNs:
One of them keeps loading and the other keeps on giving me an error. Either CORS or fake worker failed
error. I need help, thanks in advance.
This is my code:
import { Document, Page, pdfjs } from "react-pdf";
pdfjs.GlobalWorkerOptions.workerSrc =
"https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.7.570/pdf_viewer.js.map";
const DocsViewer = ({ link }) => {
const [pages, setPages] = useState(null);
const [pageNumber, setPageNumber] = useState(1);
function onDocumentLoadSuccess({ numPages }) {
console.log("object:", numPages, pages);
setPages(numPages);
setPageNumber(1);
}
return (
<div className="property-overview-container property-flex-half">
<div className="description-overview">
<Document
file={
"https://yahuda.s3.us-east-2.amazonaws.com/4d0970da-f0c7-4a37-9ce4-5c48619a996b.pdf"
}
// link={link}
onLoadSuccess={onDocumentLoadSuccess}
onLoadError={(error) => console.log("Inside Error", error)}
>
<Page pageNumber={pageNumber} style={{ display: "none" }} />
</Document>
</div>
</div>
);
};
export default DocsViewer;
You can find more info in another post on the subject: react-pdf loads file from disk but not url
You need to use the parameter as follow:
<Document
file={{url:'https://yahuda.s3.us-east-2.amazonaws.com/4d0970da-f0c7-4a37-9ce4-5c48619a996b.pdf'}}
onLoadSuccess={onDocumentLoadSuccess}
onLoadError={(error) => console.log("Inside Error", error)}
>
I think most people hitting this answer will probably not realize that they are getting CORS errors, especially developing locally. https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
here is a public URL that has CORS opened https://cdn.filestackcontent.com/wcrjf9qPTCKXV3hMXDwK
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.