0

我尝试为我的 pdf 查看器编写放大和缩小按钮，但它不起作用。在每个函数中，我都会增加或减少初始比例，但没有任何反应。然而，我的函数在点击时被很好地调用了。请有人帮助我或告诉我我做错了什么？

这是我的查看器代码：

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>
    );
  }
}
4

1 回答 1

1

您需要缩放 Page 组件：

<Page
  pageNumber={pageNumber}
  renderTextLayer={false}
  scale={scale}
>
于 2021-01-24T22:57:25.840 回答