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/Whosebug-69097706-react-pdf-demo-s2zmc

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

react-pdf 库未加载 PDF 文档

react-pdf library is not loading the PDF document

reactjs

typescript

react-pdf