[英]ZoomIn/ZoomOut buttons doesn't work with react-pdf
I tried to code zoom in and zoom out buttons for my pdf viewer but it doesn't work.我尝试为我的 pdf 查看器编写放大和缩小按钮,但它不起作用。 In each function I increase or reduce the initial scale, but nothing happens.
在每个 function 我增加或减少初始比例,但没有任何反应。 My function is however well called at the click.
然而,我的 function 在点击时被很好地调用了。 Someone to help me or tell me what I am doing wrong please?
请有人帮助我或告诉我我做错了什么?
Here is my code for the viewer:这是我的查看器代码:
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>
);
}
}
You need to scale the Page component:您需要缩放 Page 组件:
<Page
pageNumber={pageNumber}
renderTextLayer={false}
scale={scale}
>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.