![](/img/trans.png)
[英]How to trigger mxGraph zoomin and zoomout functions in my own buttons?
[英]ZoomIn/ZoomOut buttons doesn't work with react-pdf
我尝试为我的 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>
);
}
}
您需要缩放 Page 组件:
<Page
pageNumber={pageNumber}
renderTextLayer={false}
scale={scale}
>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.