pdf.js不分页渲染(渲染完整内容)

直接上代码
首先引入pdf.js 和 pdf.worker.js


// 渲染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;

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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
pdf.js和turn.js都是常见的用于网页中展示PDF文件的JavaScript库。 pdf.js是Mozilla开发的一个开源项目,用于在网页中渲染和显示PDF文件。它可以将PDF文件解析成HTML5技术支持的格式,然后利用Canvas和SVG等技术进行绘制,以便在网页中以更佳的视觉效果展示。pdf.js具有高度自定义的能力,可以根据需求自定义样式、布局和用户交互方式。此外,pdf.js还支持导出PDF页面为图片,支持缩放、旋转和分页等功能。 turn.js是一款专门用于在网页中实现翻书效果的JavaScript插件,它可以让网页上的内容以类似真实书籍的方式进行翻页展示。通过turn.js,可以将网页中的内容,如文字、图片、视频等,以翻书的形式进行展示。turn.js可以很好地模拟实际书籍的视觉效果,使得用户在浏览网页时有更加亲切的感受。 结合pdf.js和turn.js,可以实现在网页中以翻书的形式展示PDF文件。首先,使用pdf.jsPDF文件渲染为HTML5格式,然后利用turn.js将渲染后的内容呈现为翻书效果。这样,用户可以通过拖拽、点击等方式进行翻页,浏览PDF文件的内容。使用两个库的结合,不仅可以在网页中呈现出高质量的PDF内容,还可以增加交互性和视觉效果。 总而言之,pdf.js和turn.js是两个常用的JavaScript库,可以分别用于处理和展示PDF文件和实现翻书效果。它们的结合使用可以让我们在网页中实现以翻书形式展示PDF文件的功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

词不达意难知

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值