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

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

javascript 复制代码
// 渲染pdf
const pdfUrl = 'test1.pdf', _targetDom = 'pdf-container';
    pdfjsLib.getDocument(pdfUrl).promise.then(async doc => {
        let _i = 0;
        for (let item of new Array(doc.numPages).fill()) {
            await renderOtherPage(doc, ++_i, _targetDom)
        };
    });
// 渲染PDF视图
function renderOtherPage(pdfDoc, pageNumber) {
    return new Promise(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;

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

相关推荐
卸任2 小时前
Vibe coding工具使用心得
前端·ai编程
brien93 小时前
为什么模型标称 1M,Google Antigravity 聊到 256K 却突然失忆?我们给它做了个原生行内监控圆环
前端
修炼的dance3 小时前
录屏关键帧间隔多少合适?六档实测,2秒到10秒小了75.6%
前端
Lank_M3 小时前
关键帧从1秒拉到10秒,录屏小87.3%,摄像头小10.8%
前端
补码缩写3 小时前
用 ffprobe 拆录屏,八成字节在 29 个关键帧上
前端
百思不得小李3 小时前
一个复杂的动态表单是如何实现的
前端·设计模式
陈随易3 小时前
Cmder 停更 17 个月,2.0 支持 Windows Terminal
前端·后端·程序员
清晨Coding4 小时前
删了 Cookie 还能自动登录?Google系网站登录态自动恢复的原理分析
javascript
风骏时光牛马4 小时前
前沿视界
前端
kyriewen4 小时前
我扫了 814 个依赖,97 个还敢要 Node 10
前端·javascript·程序员