CODEWITHSUNDEEP
javascriptreactjscdnpdf-viewerreact-pdf
Haseeb Ahmed
Haseeb Ahmed

Reputation: 31

react-pdf failed to view pdf file from remote url

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;

Upvotes: 2

Views: 11636

Answers (2)

Azeli
Azeli

Reputation: 748

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

Upvotes: 6

William Scalabre
William Scalabre

Reputation: 653

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)}
>

Upvotes: 3

Related Questions