Javascript 从src文件夹加载时如何以百分比显示加载

我正在我的reactJS应用程序中使用pdf阅读器。我需要显示pdf文件的加载指示器。我的pdf阅读器仅在文件完全加载后加载。正如你在书中看到的

我认为先单独加载pdf文件，同时显示加载百分比指示器，然后只加载pdf加载器组件就可以了

另外，使用useState设置加载状态和加载百分比可能是一个好主意。请帮助我实现这一点，并随时提出任何其他建议

我目前的代码如下：

import PDFViewer from "mgr-pdf-viewer-react"

function Reader({ bookDetail }) {
    const readerRef = useRef(null)

    return (
        bookDetail !== null && (
            //  ...
                <PDFViewer
                    page={1}
                    document={{
                        url: bookDetail.bookUrl,
                    }}
                />
            // ...
        )
    )
}

export default Reader

从“mgr pdf查看器”导入PDFViewer
函数读取器（{bookDetail}）{
const readerRef=useRef（空）
返回(
bookDetail！==null&&(
//  ...
// ...
)
)
}
导出默认读取器

使用

mgr pdf viewer react

无法直接显示进度%。所以你必须自己做

• 使用

  ref

  并将其附加到

  PDF

  组件。该库维护一个名为

  页面

  的状态，该状态在加载pdf文档后设置。使用

  ref

  读取

  pages

  值，并显示进度条，直到pages获得一些值

使用一些库作为进度条。我用过

从“mgr pdf查看器”导入PDFViewer；
从“react ProgressBar”导入ProgressBar；
导出默认函数App（）{
常量[currentProgress，setCurrentProgress]=useState（0）；
useffect（（）=>{
进步（）；
}, []);
const ref=useRef（null）；
常量进度=（）=>{
让step=5；//越小，进度条越慢
让当前_进度=0；
const interval=setInterval（函数（）{
当前_进度+=步骤；
setCurrentProgress（当前进度）；
让进步=
数学四舍五入（（Math.atan（当前进度）/（Math.PI/2））*100*1000）/
1000;
//控制台日志（参考当前）；
if（ref.current&&ref.current.state.pages）{
控制台日志（“清除”）；
当前进度=100；
setCurrentProgress（当前进度）；
间隔时间；
}否则，如果（进度>=70）{
阶跃=0.1；
}
}, 100);
};
返回(
你好，代码沙盒
{currentProgress+“%”

{}
);
}

使用

mgr pdf viewer react

无法直接显示进度%。所以你必须自己做

• 使用

  ref

  并将其附加到

  PDF

  组件。该库维护一个名为

  页面

  的状态，该状态在加载pdf文档后设置。使用

  ref

  读取

  pages

  值，并显示进度条，直到pages获得一些值

使用一些库作为进度条。我用过

从“mgr pdf查看器”导入PDFViewer；
从“react ProgressBar”导入ProgressBar；
导出默认函数App（）{
常量[currentProgress，setCurrentProgress]=useState（0）；
useffect（（）=>{
进步（）；
}, []);
const ref=useRef（null）；
常量进度=（）=>{
让step=5；//越小，进度条越慢
让当前_进度=0；
const interval=setInterval（函数（）{
当前_进度+=步骤；
setCurrentProgress（当前进度）；
让进步=
数学四舍五入（（Math.atan（当前进度）/（Math.PI/2））*100*1000）/
1000;
//控制台日志（参考当前）；
if（ref.current&&ref.current.state.pages）{
控制台日志（“清除”）；
当前进度=100；
setCurrentProgress（当前进度）；
间隔时间；
}否则，如果（进度>=70）{
阶跃=0.1；
}
}, 100);
};
返回(
你好，代码沙盒
{currentProgress+“%”

{}
);
}

您好，谢谢您的建议。它确实有效。但是仍然有更好的方法，也许不需要使用

mgr pdf viewer react

，我愿意使用另一个读者，没问题。您好，谢谢您的建议。它确实有效。但是仍然有更好的方法，也许不使用

mgr pdf viewer react

，我愿意使用另一个阅读器，没有问题。