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;

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

相关推荐
计算机魔术师16 分钟前
AI 推翻了一个当了30年地基的假设,查的人恰好是立论者
前端
范同学~20 分钟前
项目添加水印
java·前端·javascript
鬼手点金22 分钟前
缓存作为架构约束
开发语言·前端·人工智能·python·microsoft·缓存·架构
月夏23 分钟前
前端第一次接自己的后端:mock 切真接口踩了 2 个坑,组件只改了一行 import
前端·后端·node.js
IT_陈寒27 分钟前
React实战技巧总结:如何优雅处理复杂列表的渲染卡顿问题?
前端·人工智能·后端
ZoeLandia29 分钟前
React11:数据请求与 TanStack Query
前端·react.js·typescript·react
软件技术NINI31 分钟前
基于PHP和MySQL的快递代收点管理系统的设计与实现
开发语言·javascript·数据库·mysql·毕业设计·php·毕设
前端架构师-老李40 分钟前
HTML与CSS基础第二课—初识HTML
前端·css·html
视***间41 分钟前
视程空间Edge工业边缘盒:给工业机器人装一颗耐造的“本地大脑“
前端·edge·机器人·边缘计算·智慧工业·工业视觉·视程空间
Dovis(誓平步青云)42 分钟前
一个分区超温就全棚浇水,控制系统怎样按区下策略
开发语言·前端·javascript·人工智能·机器学习