使用react-pdf在React(TypeScript)中创建PDFViewer组件报错求助

在React（TypeScript）项目里尝试用react-pdf库做PDFViewer组件，代码跑不起来，网上找到的解决方案都要修改index.d.ts，不想这么干，求其他解决办法。

我的代码 #

import React, { useState } from "react";
import { Document, Page } from "@react-pdf/renderer";

const PDFViewer: React.FC = () => {
  const [numPages, setNumPages] = useState<number | null>(null);
  const [pageNumber, setPageNumber] = useState<number>(1);

  const onDocumentLoadSuccess = ({ numPages }: any) => {
    setNumPages(numPages);
  };

  return (
    <div>
      <Document
        file="https://www.cisco.com/c/fr_ca/support/docs/contact-center/remote-expert-mobile/214321-remote-expert-mobile-reset-web-gateway-a.pdf"
        onLoadSuccess={onDocumentLoadSuccess}
      >
        <Page pageNumber={pageNumber} />
      </Document>
      <p>
        Page {pageNumber} of {numPages}
      </p>
    </div>
  );
};

export default PDFViewer;

报错信息 #

没有匹配的重载调用。
重载1（共2个）：'(props: PropsWithChildren): Document'，给出以下错误：
类型 '{ children: Element; file: string; onLoadSuccess: ({ numPages }: any) => void; }' 不能赋值给类型 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly<PropsWithChildren>'。
属性 'file' 在类型 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly<PropsWithChildren>' 中不存在。
重载2（共2个）：'(props: PropsWithChildren, context: any): Document'，给出以下错误：
类型 '{ children: Element; file: string; onLoadSuccess: ({ numPages }: any) => void; }' 不能赋值给类型 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly<PropsWithChildren>'。
属性 'file' 在类型 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly<PropsWithChildren>' 中不存在。ts(2769)

问题原因 #

你搞混了react-pdf生态里两个不同包的用途：

• @react-pdf/renderer 是用来生成PDF文档的（比如把React组件渲染成PDF文件），它的Document组件根本没有file和onLoadSuccess这些属性。
• 要在页面上展示PDF，需要用专门的查看器包@react-pdf/viewer。

解决方案 #

1. 替换依赖包 #

卸载原来的生成包，安装查看器包：

npm uninstall @react-pdf/renderer
npm install @react-pdf/viewer

2. 修改组件代码 #

用@react-pdf/viewer的组件重构代码：

import React, { useState } from "react";
import { Viewer } from "@react-pdf/viewer";
// 必须引入查看器的样式文件
import "@react-pdf/viewer/lib/styles/index.css";

const PDFViewer: React.FC = () => {
  const [numPages, setNumPages] = useState<number | null>(null);
  const [pageNumber, setPageNumber] = useState<number>(1);

  const onDocumentLoadSuccess = (document: { numPages: number }) => {
    setNumPages(document.numPages);
  };

  return (
    <div style={{ height: "80vh", width: "100%" }}>
      <Viewer
        fileUrl="https://www.cisco.com/c/fr_ca/support/docs/contact-center/remote-expert-mobile/214321-remote-expert-mobile-reset-web-gateway-a.pdf"
        onDocumentLoadSuccess={onDocumentLoadSuccess}
        defaultPage={pageNumber}
        onPageChange={(page) => setPageNumber(page)}
      />
      <p style={{ textAlign: "center", marginTop: "1rem" }}>
        Page {pageNumber} of {numPages}
      </p>
    </div>
  );
};

export default PDFViewer;

补充说明 #

• @react-pdf/viewer的Viewer组件自带分页、缩放等基础功能，不需要自己手动处理Page组件。
• 必须引入样式文件，否则查看器会显示异常。

内容的提问来源于stack exchange，提问作者Yasha_ops