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;

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

相关推荐
鬼手点金22 分钟前
opencode-rules 插件
java·开发语言·前端·人工智能·chrome·git·github
柳杉23 分钟前
借助 Codex 和可视化工作流,从调研到完整实现,3D 大屏竟然可以这么简单
前端·ai编程·数据可视化
IMPYLH1 小时前
HTML 的 <wbr> 元素
前端·html
Dovis(誓平步青云)1 小时前
常用命令藏得太深?怎么做一个快捷命令坞
运维·前端·自动化·音视频·prometheus
IT_陈寒2 小时前
Vite的这个问题坑了我三天,原来如此解决!
前端·人工智能·后端
网易云信2 小时前
大模型能上岗做销售吗?我们让 12 款国产模型交了 420 份作业
前端·后端
蜗牛互联网2 小时前
Python Agent工具调用的白名单、参数校验与审批门禁
java·服务器·前端·人工智能·后端·python
计算机魔术师2 小时前
Perplexity:每个 Project 都是一个 Git 仓库
前端
Andrew5513 小时前
让 AI 写页面不再“一眼假”:我把设计品味做成了一个 Claude Code Skill 流水线
前端
乐享qicheng3 小时前
14-AI智能管家JSBridge深度问答
前端