Я попытался закодировать кнопки увеличения и уменьшения масштаба для моей программы просмотра 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>
);
}
}