如何实现PDF滚动至最后一页时启用Accept复选框

直接用iframe加载PDF没法实现这个需求——浏览器会限制对PDF iframe内部DOM的访问，不管同源还是跨域，都拿不到滚动位置或页码信息。得换用PDF.js来渲染PDF，这样就能监听滚动和页码变化了。

具体实现步骤 #

1. 准备PDF.js #

先把PDF.js库下载到本地（官网可获取包含pdf.js和pdf.worker.js的压缩包），放到项目目录中。

2. HTML结构 #

替换原有的iframe，用一个div承载PDF渲染内容：

<div>
  <div id="pdf-container" style="width:970px; height:370px; overflow:auto;"></div>
  <input type="checkbox" id="accept-checkbox" disabled> I Accept
  <input type="button" value="Submit" id="submit-btn" disabled>
</div>

3. JavaScript代码 #

用PDF.js加载并渲染PDF，监听滚动事件判断是否到达最后一页：

// 配置PDF.js的worker文件路径
pdfjsLib.GlobalWorkerOptions.workerSrc = 'path/to/pdf.worker.js';

// 定义核心元素和路径
const pdfPath = 'assets/terms.pdf';
const container = document.getElementById('pdf-container');
const acceptCheckbox = document.getElementById('accept-checkbox');
const submitBtn = document.getElementById('submit-btn');

let pdfDoc = null;
let totalPages = 0;

// 加载PDF文件
pdfjsLib.getDocument(pdfPath).promise.then(doc => {
  pdfDoc = doc;
  totalPages = doc.numPages;
  // 渲染所有PDF页面
  for (let i = 1; i <= totalPages; i++) {
    renderPage(i);
  }
  // 绑定滚动监听
  container.addEventListener('scroll', checkIfLastPage);
});

// 渲染单页PDF到canvas
function renderPage(pageNum) {
  pdfDoc.getPage(pageNum).then(page => {
    const viewport = page.getViewport({ scale: 1.5 }); // 调整缩放比例适配显示
    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');
    canvas.height = viewport.height;
    canvas.width = viewport.width;
    container.appendChild(canvas);

    // 将页面内容渲染到canvas
    page.render({
      canvasContext: context,
      viewport: viewport
    });
  });
}

// 检查是否滚动到最后一页
function checkIfLastPage() {
  const containerHeight = container.clientHeight;
  const scrollTop = container.scrollTop;
  const scrollHeight = container.scrollHeight;

  // 滚动到底部（留10px误差避免精度问题）时启用复选框
  if (scrollTop + containerHeight >= scrollHeight - 10) {
    acceptCheckbox.disabled = false;
    // 可选：复选框勾选后启用提交按钮
    acceptCheckbox.addEventListener('change', () => {
      submitBtn.disabled = !acceptCheckbox.checked;
    });
    // 仅触发一次，移除监听
    container.removeEventListener('scroll', checkIfLastPage);
  }
}

注意事项 #

• 确保pdf.worker.js的路径配置正确，否则PDF无法正常渲染。
• 需在本地服务器环境下运行（比如用Node.js的http-server），直接用file://协议打开可能出现文件加载或跨域问题。
• 可调整scale参数改变PDF显示大小，适配页面布局。
• 滚动判断的误差值（10px）可根据需求调整，避免因滚动精度问题导致无法触发启用逻辑。

内容的提问来源于stack exchange，提问作者Suraj Verma