如何在 ReactJS 中使用 React-PDF 放大缩小?

React-PDF 是一个 ReactJS 库，它能够通过 React 组件来在您的应用程序中显示 PDF。如果您想要在您的应用程序中使用 PDF，则可以使用 React-PDF。本文将介绍如何在 ReactJS 中使用 React-PDF 放大缩小。

安装

安装 React-PDF：

npm install react-pdf

安装完成后，您可以在您的 React 应用程序中导入 react-pdf 库：

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

使用放大和缩小

React-PDF 允许您使用放大和缩小功能。

使用 Document 组件来呈现 PDF：

<Document
  file="sample.pdf"
  onLoadSuccess={onDocumentLoadSuccess}
>
  <Page pageNumber={pageNumber} />
</Document>

在您的组件中添加新的状态来存储当前页面和比例：

const [scale, setScale] = useState(1.0);
const [pageNumber, setPageNumber] = useState(1);

您可以使用 scale 来更改比例：

<button onClick={() => setScale(scale * 1.1)}>放大</button>
<button onClick={() => setScale(scale * 0.9)}>缩小</button>

在 Document 组件中使用 scale 值：

<Document
  file="sample.pdf"
  onLoadSuccess={onDocumentLoadSuccess}
>
  <Page pageNumber={pageNumber} scale={scale} />
</Document>

完整代码

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

const App = () => {
  const [numPages, setNumPages] = useState(null);
  const [pageNumber, setPageNumber] = useState(1);
  const [scale, setScale] = useState(1.0);

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

  return (
    <div>
      <div>
        <button onClick={() => setPageNumber(pageNumber - 1)} disabled={pageNumber <= 1}>上一页</button>
        <p>页面 {pageNumber} / {numPages}</p>
        <button onClick={() => setPageNumber(pageNumber + 1)} disabled={pageNumber >= numPages}>下一页</button>
      </div>
      <div>
        <button onClick={() => setScale(scale * 1.1)}>放大</button>
        <button onClick={() => setScale(scale * 0.9)}>缩小</button>
      </div>
      <div>
        <Document
          file="sample.pdf"
          onLoadSuccess={onDocumentLoadSuccess}
        >
          <Page pageNumber={pageNumber} scale={scale} />
        </Document>
      </div>
    </div>
  );
}

export default App;

以上就是如何在 ReactJS 中使用 React-PDF 放大缩小的方法。希望本文对你有帮助。