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;

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

相关推荐
IT_陈寒14 分钟前
Vue的这个响应式陷阱,我调试了一整天才爬出来
前端·人工智能·后端
莪_幻尘16 分钟前
手把手书写你的第一个 AI Skill:从原则到工程化
前端·agent·ai编程
lpfasd12316 分钟前
2025-2026前端3D展示技术发展全景
前端·3d
JR空位投 李佃贵是20 分钟前
如何编写轻量级 CSS 框架
前端·css·tensorflow
求真学习25 分钟前
字节跳动Dolphin-v2:数字 PDF 拆开读、拍照文档整页读,自建拍照文档集平均编辑距离较原始 Dolphin降低约 91%
pdf·ocr·pdf解析·字节跳动·文档解析·dolphin-v2
白猫不黑35 分钟前
Web 应用中“敏感信息泄露“的常见位置?
前端·网络·web安全·网络安全·信息安全·渗透测试
CodexDave40 分钟前
Python 自动化接单实战(四):PDF 批量提取先识别文本层还是扫描件
python·pdf·自动化·ocr·python自动化·文档处理·pdf提取
张风捷特烈41 分钟前
Flutter UI 解耦 - 天下大势,合久必分, 分久必合
android·前端·flutter
安冬的码畜日常1 小时前
【工欲善其事】深入理解 Node.js 带并发上限的异步任务批量执行逻辑
javascript·设计模式·node.js·ai编程·异步编程·并发执行
meilindehuzi_a2 小时前
Vue3组件样式隔离与组件通信实战:从 scoped、props 校验到记事本应用
前端·javascript·vue.js