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;

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

相关推荐
leoZ2312 分钟前
第 8 篇:与 AI 协作的工作流 + 完整案例
前端·人工智能·神经网络·自然语言处理·性能优化·c#·php
背对疾风3 分钟前
提前还贷,缩短年限和降低月供其实是一样的
前端
2501_9289962213 分钟前
Agent 开发 API 选型:硅碳相变下 Function Calling 兼容性与多模型路由拆解
前端
invicinble15 分钟前
做数字产品的核心内容--数据的设计与展示
大数据·前端
LabVIEW开发15 分钟前
LabVIEW运行时动态修改控件标题
前端·labview·labview知识·labview功能·labview程序
晴天1627 分钟前
ES6+ 核心语法
前端·es6·状态模式
AC赳赳老秦32 分钟前
农产品公开数据应用:OpenClaw 抓取农产品价格、产销公开数据,实现农产品行情动态监测
java·c语言·javascript·python·php·deepseek·openclaw
API快乐传递者43 分钟前
淘宝海外商品详情接口实战指南:从全球开放平台到跨境铺货的全链路方案
java·前端·数据库
gyratesky1 小时前
支持独立部署的地图方案
前端·gis
a1117761 小时前
图片转3D模型 img2threejs 开源
前端·开源