react-pdf 无法从远程 url 查看 pdf 文件答案

【问题标题】：react-pdf failed to view pdf file from remote urlreact-pdf 无法从远程 url 查看 pdf 文件
【发布时间】：2021-07-28 15:40:07
【问题描述】：

我正在尝试查看react pdf 中的 pdf 文件，但我不能这样做，因为它无法加载文件。不知道为什么，我试过这些 CDN：

其中一个不断加载，另一个不断给我一个错误。 CORS 或 fake worker failed 错误。我需要帮助，在此先感谢。

这是我的代码：

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;

【问题讨论】：

标签： javascript reactjs cdn pdf-viewer react-pdf

【解决方案1】：

您可以在有关该主题的另一篇文章中找到更多信息： react-pdf loads file from disk but not url

您需要使用如下参数：

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

【讨论】：