在 Page 组件中使用 scale prop 时，react-pdf 渲染缓慢

问题描述

我正在使用 react 应用程序制作 pdf 查看器。我有一个包含近 150 页的 pdf，我使用放大和缩小图标，我在 scale 组件中使用 Page 道具来实现这一点。但是每当我放大或缩小时，pdf 文件都会有轻微的延迟以重新渲染放大的页面。对于小型pdf，这种延迟不会发生。 这是我的代码 -

    const [pages,setPages] = React.useState(0);
    const [pagesArr,setPagesArr] = React.useState([]);
    const [scrolledValue,setScrolledValue] = React.useState(0);
    const [pageNumber,setPageNumber] = React.useState(1);
    const [pdfScale,setPdfScale] = React.useState(1.0);

    function onLoadSuccess(param) {
        setPages(param.numPages);
        const numArr = [];
        for (let num = 1; num <= param.numPages; num++) {
            numArr.push(num);
        }
        setPagesArr(numArr);
    }

    function handleZoominIcon() {
        setPdfScale(prev => {
            if (prev > 2.1) {
                return 2.2;
            } else {
                return prev + 0.1;
            }
        });
    }

    function handleZoomoutIcon() {
        setPdfScale(prev => {
            console.log(prev);
            if (prev <= 0.5) {
                return 0.5;
            } else {
                return prev - 0.1;
            }
        });
    }


return (
  <section className = 'ppt-view-pdf' style = {scrolledStyle[1],{zoom: '100%'}} ref = {props.pdfViewRef}>
      <Document  file = {PPT} onLoadSuccess = {onLoadSuccess}>
          {pagesArr.map(element => <Page scale = {pdfScale} key = {element} pageNumber = {element}></Page>)}
       </Document>
  </section>
)

有什么解决办法吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）