使用react-pdf反应嵌入PDF不起作用

Question

我正在尝试使用react-pdf来渲染pdf 文档。我有一个由 create-react-app 生成的反应应用程序。我已按照 CRA 的 github 自述文件中提到的说明进行操作（https://github.com/wojtekmaj/react-pdf#create-react-app）。

import { Document, pdfjs } from "react-pdf";
pdfjs.GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;

我已将示例 PDF 文件放入./public/dummy.pdf.

并且可以在以下位置访问：

我正在使用文档组件，如下所示，但页面上没有呈现任何内容。

<Document file="http://localhost:3000/dummy.pdf" />

这就是 Chrome 版 React DevTools 中的样子

我缺少什么？

Answer 1

Document组件主要处理获取 PDF 和管理加载/错误状态。要渲染 PDF 的页面，您需要Page传递相应页码的渲染组件。

对取自“使用”部分的示例进行稍微修改后的版本，用于呈现 PDF 的所有页面：

import React, { useState } from 'react';
import { Document, Page } from 'react-pdf';

function MyApp() {
  const [numPages, setNumPages] = useState(null);
  const [pageNumber, setPageNumber] = useState(1);

  function onDocumentLoadSuccess({ numPages }) {
    setNumPages(numPages);
  }

  return (
    <div>
      <Document
        file="dummy.pdf"
        onLoadSuccess={onDocumentLoadSuccess}
      >
        {[...Array(numPages).keys()].map((p) => (
          <Page pageNumber={p + 1} />
        ))}
      </Document>
    </div>
  );
}