React Hooks使用pdfjs-dist

系统页面中有时候会有一些加载pdf资源的功能需求，pdfjs-dist这个插件可以满足要求。
处理步奏：请求->转换->加载
这里使用的版本是 2.2.228
请求有两种，一种可以是Url链接请求。一种是二进制文件。代码上差别不大,业务逻辑处理如下：

const winW = (document.querySelector('.pdf-calssname') as HTMLDivElement).getBoundingClientRect().width;

const loadingFile = PDFJS.getDocument('your url'); // URL
const laodingFile = PDFJS.getDocument({data:atob(blod)}); //二进制文件

//loading....
loadingFile.promise.then((pdf)=>{
    const nums = pdf.numPages;
    setpageNum(new Array(nums).fill(1)); // pageNum variable
    for(let i =1;i<nums;++i){
        pdf.getPage(i).then((page:any)=>{
            const viewport:any = page.getViewport(i);
            const scale:any = (winW / viewport.width).toFixed(2); //url
            cosnt scale:any = (winW /viewport.width *viewport.scale).toFixed(2) // 二进制文件流
            const scaledViewport = page.getViewport({scale:Math.max(scale,1)*2});
            const canvas:any = document.getElementById('the-canvas'+i);
            const context = canvas.getContext('2d');
            canvas.height = Math.ceil(scaleViewport.height);
            canvas.width = Math.ceil(scaleViewport.width);
            const renderContext ={
                canvasContext:context,
                viewport:scaledViewport,
            }
            const render:any = page.render(renderContext);
            render.then((=>{})
        })
    }
},(err)=>{
    console.log(err);
})

部分tsx代码如下：

<div className = 'pdfdetail-innderbox'>
    {
        pageNum.map((v:number,i:number)=>{
            <canvas key={i} id = {`the-canvas${i+1}`} className = 'pdf-content'>
        })
    }
</div>