0


pdf.js不分页渲染(渲染完整内容)

直接上代码
首先引入pdf.js 和 pdf.worker.js

// 渲染pdfconst pdfUrl ='test1.pdf', _targetDom ='pdf-container';
    pdfjsLib.getDocument(pdfUrl).promise.then(asyncdoc=>{let _i =0;for(let item ofnewArray(doc.numPages).fill()){awaitrenderOtherPage(doc,++_i, _targetDom)};});// 渲染PDF视图functionrenderOtherPage(pdfDoc, pageNumber){returnnewPromise(resolve=>{
        pdfDoc.getPage(pageNumber).then(page=>{const scale =1.5;const viewport = page.getViewport({scale: scale });const canvas = document.createElement('canvas');const context = canvas.getContext('2d');
            canvas.height = viewport.height;
            canvas.width = viewport.width; 
            document.getElementById(_targetDom).appendChild(canvas);const renderContext ={canvasContext: context,viewport: viewport
            };
            page.render(renderContext);resolve();});});}

看效果

在这里插入图片描述
成功渲染所有分页 PS: 没有展示完全请检查_targetDom 这个标签节点是否拥有css属性 overflow-y: scroll;

页面有报错的请点我的另一篇文章查看

标签: pdf javascript 前端

本文转载自: https://blog.csdn.net/qq_45284938/article/details/134305700
版权归原作者 词不达意难知 所有, 如有侵权,请联系我们删除。

“pdf.js不分页渲染(渲染完整内容)”的评论:

还没有评论