放大/縮小按鈕不適用於 react-pdf

Question

我嘗試為我的 pdf 查看器編寫放大和縮小按鈕，但它不起作用。 在每個 function 我增加或減少初始比例，但沒有任何反應。 然而，我的 function 在點擊時被很好地調用了。 請有人幫助我或告訴我我做錯了什么？

這是我的查看器代碼：

import { Document, Page, pdfjs } from 'react-pdf';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faChevronRight, faChevronLeft, faMinus, faPlus } from '@fortawesome/free-solid-svg-icons';
import './PdfViewer.scss';

pdfjs.GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
// Small screens width detection
const MOBILE_WIDTH = 768;

export default class App extends Component {
  state = {
    numPages: null,
    pageNumber: 1,
    scale: 1,
  };

  componentDidMount() {
    window.addEventListener('resize', this.resize);
    this.resize();
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.resize);
  }

  onDocumentLoadSuccess = ({ numPages }) => {
    this.setState({ numPages });
  };

  // Adapt the size of the scale according to the screen
  resize = () => {
    if (window.innerWidth <= MOBILE_WIDTH) {
      this.setState({ scale: 0.75 });
    }
  }

  zoomIn = () => {
    this.setState({
      scale: this.state.scale + 0.2,
    });
  };

  zoomOut = () => {
    this.setState({
      scale: this.state.scale - 0.2,
    });
  };

  goToPrevPage = () => this.setState(state => ({ pageNumber: state.pageNumber - 1 }));

  goToNextPage = () => this.setState(state => ({ pageNumber: state.pageNumber + 1 }));

  render() {
    const { pageNumber, numPages } = this.state;

    return (
      <div className="pdfviewer">
        <Document
          file="https://test.s3.amazonaws.com/20200202.pdf"
          onLoadSuccess={this.onDocumentLoadSuccess}
        >
          <Page
            pageNumber={pageNumber}
            renderTextLayer={false}
          >
            <div className="pdfviewer__controls">
              <button id="button-left" onClick={this.goToPrevPage} disabled={pageNumber <= 1}><FontAwesomeIcon icon={faChevronLeft} /></button>
              <button id="zoomInButton" onClick={this.zoomIn}><FontAwesomeIcon icon={faPlus} /></button>
              <span>page {pageNumber}/{numPages || '--'}</span>
              <button id="zoomOutButton" onClick={this.zoomOut}><FontAwesomeIcon icon={faMinus} /></button>
              <button id="button-right" onClick={this.goToNextPage} disabled={pageNumber >= numPages}><FontAwesomcreIcon icon={faChevronRight} /></button>
            </div>
          </Page>
        </Document>
      </div>
    );
  }
}

Answer 1

您需要縮放 Page 組件：

<Page
  pageNumber={pageNumber}
  renderTextLayer={false}
  scale={scale}
>