// 加载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的懒加载需要手动实现,而且需要根据具体的需求进行调整。

12-01 10:21