时间戳

首页 > 解决方案 > react-pdf 无法从远程 url 查看 pdf 文件

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

问题描述

我试图在里面查看一个 pdf 文件，react 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;

标签： javascriptreactjscdnpdf-viewerreact-pdf

解决方案

您可以在有关该主题的另一篇文章中找到更多信息： react-pdf 从磁盘加载文件但不是 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)}
>

推荐阅读