pdfjs，pdf懒加载

2023-12-05 02:15

文章标签 加载 pdf pdfjs

本文主要是介绍pdfjs，pdf懒加载，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

PDF.js是一个使用JavaScript实现的PDF阅读器，它可以在Web浏览器中显示PDF文档。PDF.js支持懒加载，也就是说，它可以在用户滚动页面时才加载PDF文档的某些部分，从而减少初始加载时间和内存占用。

注意点：如果要运行在多留浏览器或移动端浏览器，请注意对js中方法进行兼容处理，比如window.scrollY / window.innerHeight

// 加载PDF.js
var script = document.createElement('script');
script.src = '/pdf.js';
document.body.appendChild(script);// 加载PDF文档
var pdfDoc = null;
PDFJS.getDocument('path/to/pdf').then(function(doc) {pdfDoc = doc;// 显示第一页showPage(1);
});// 显示指定页码的页面
function showPage(pageNum) {pdfDoc.getPage(pageNum).then(function(page) {var canvas = document.getElementById('pdf-canvas');var context = canvas.getContext('2d');// 计算缩放比例var viewport = page.getViewport(canvas.width / page.getViewport(1.0).width);// 渲染页面page.render({canvasContext: context,viewport: viewport});});
}// 监听滚动事件，加载可见页面
window.addEventListener('scroll', function() {var currentPage = Math.floor(window.scrollY / window.innerHeight) + 1;showPage(currentPage);
});