javascript - react-pdf failed to view pdf file from remote url - Stack Overflow

admin管理员组

文章数量:1289845

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:

• .js/2.7.570

• .js/2.7.570/pdf.min.js

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 =
  ".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={
            ".pdf"
          }
          // link={link}
          onLoadSuccess={onDocumentLoadSuccess}
          onLoadError={(error) => console.log("Inside Error", error)}
        >
          <Page pageNumber={pageNumber} style={{ display: "none" }} />
        </Document>
      </div>
    </div>
  );
};
export default DocsViewer;

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:

• https://cdnjs./libraries/pdf.js/2.7.570

• https://cdnjs.cloudflare./ajax/libs/pdf.js/2.7.570/pdf.min.js

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./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./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;

• javascript
• reactjs
• cdn
• pdf-viewer
• react-pdf

Share Improve this question Follow edited Jul 28, 2021 at 7:40 Costa 2,96422 gold badges1717 silver badges2222 bronze badges asked Jul 27, 2021 at 14:32 Haseeb AhmedHaseeb Ahmed 3111 gold badge11 silver badge33 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

I think most people hitting this answer will probably not realize that they are getting CORS errors, especially developing locally. https://developer.mozilla/en-US/docs/Web/HTTP/CORS

here is a public URL that has CORS opened https://cdn.filestackcontent./wcrjf9qPTCKXV3hMXDwK

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./4d0970da-f0c7-4a37-9ce4-5c48619a996b.pdf'}}
    onLoadSuccess={onDocumentLoadSuccess}
    onLoadError={(error) => console.log("Inside Error", error)}
>

本文标签： javascriptreactpdf failed to view pdf file from remote urlStack Overflow