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;

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

相关推荐
凌览3 分钟前
为什么我不推荐一人公司用PostgreSQL
前端·后端·node.js
王琦03187 分钟前
shell 第二章 变量和引用
前端·chrome
暗中讨饭xdm8 分钟前
立体echarts柱状图咋做
前端·vue.js·echarts
俊哥工具12 分钟前
不用打开文件也能预览!支持压缩包、PDF、音视频
python·智能手机·django·pdf·计算机外设·virtualenv
wuhen_n16 分钟前
阿里云百炼平台 API 接入教程(附 Node.js + TypeScript 实战)
前端·人工智能·阿里云·ai编程
码语智行16 分钟前
操作日志注解模块
java·前端·python
CDN36017 分钟前
【前端实战】LCP指标从2.5s优化至0.8s!用360CDN的WebP自适应与缓存策略榨干性能
前端·缓存
星辰_mya19 分钟前
ThreadLocal之微服务链路追踪
java·开发语言·前端
会编程的土豆23 分钟前
前端和后端是怎么配合工作的(Go后端视角)
前端·golang·状态模式