react-pdf库未加载PDF文档

Question

我使用react-pdf库来显示PDF文件。

但是库没有加载文件，即使它没有给出任何错误消息。

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

const Dashboard = (): React.ReactElement => {
  const [file, setFile] = React.useState("./invoice.pdf");
  function onFileChange(event: any) {
    console.log(event.target.files);
    setFile(event.target.files[0]);
  }
  function onDocumentLoadSuccess(params: any) {
    console.log("LOAD Success ", params);
  }
  return (
    <React.Fragment>
      <Box minHeight="500px">
        <Document
          file={file}
          onLoadSuccess={onDocumentLoadSuccess}
        ></Document>
      </Box>
      <input onChange={onFileChange} type="file" />
    </React.Fragment>
  );
};

export default Dashboard;

任何形式的帮助都将非常感谢，谢谢！

Answer 1

您还需要使用页面组件。请参阅工作演示https://codesandbox.io/s/stackoverflow-69097706-react-pdf-demo-s2zmc

     <Document
       file={file}
       onLoadSuccess={onDocumentLoadSuccess}
     >
    {/* This is needed to fix the issue */}
    <Page pageNumber={1} /> 
    </Document>