pdfjs，pdf懒加载

Wxinin2023-12-01 15:57

PDF.js是一个使用JavaScript实现的PDF阅读器，它可以在Web浏览器中显示PDF文档。PDF.js支持懒加载，也就是说，它可以在用户滚动页面时才加载PDF文档的某些部分，从而减少初始加载时间和内存占用。
注意点：如果要运行在多留浏览器或移动端浏览器，请注意对js中方法进行兼容处理，比如window.scrollY / window.innerHeight

javascript 复制代码

// 加载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);
});

在上面的例子中，PDF.js会在用户滚动页面时加载可见的PDF页面，从而减少初始加载时间和内存占用。需要注意的是，PDF.js的懒加载需要手动实现，而且需要根据具体的需求进行调整。