如何为Autodesk Viewer添加PDF文档上下页导航按钮

你不需要依赖Document Browser扩展，Autodesk.PDF扩展本身就提供了分页相关的API，直接用这些方法就能实现上一页/下一页功能，具体步骤如下：

1. 保存PDF扩展实例 #

修改现有代码，避免重复加载扩展，同时将扩展实例保存到可访问的作用域中：

// 在合适的作用域定义变量保存PDF扩展实例（比如全局或组件内部）
let pdfExtension;

if (isPdf) {
  viewers[viewerNumber].loadExtension("Autodesk.PDF").then(function (ext) {
    pdfExtension = ext; // 保存扩展实例
    const blob = new Blob([byteArray], { type: "application/pdf" });
    const blobUrl = URL.createObjectURL(blob).toString();
    // 加载PDF模型，默认显示第一页
    viewers[viewerNumber].loadModel(blobUrl, { page: 1 });
  });
  return;
}

2. 实现分页逻辑 #

编写上一页、下一页的点击事件处理函数，利用PDF扩展的getCurrentPage()、getPageCount()和setCurrentPage()方法：

// 上一页
function goToPrevPage() {
  if (!pdfExtension) return; // 确保扩展已加载
  const currentPage = pdfExtension.getCurrentPage();
  const totalPages = pdfExtension.getPageCount();
  if (currentPage > 1) {
    pdfExtension.setCurrentPage(currentPage - 1);
  }
}

// 下一页
function goToNextPage() {
  if (!pdfExtension) return; // 确保扩展已加载
  const currentPage = pdfExtension.getCurrentPage();
  const totalPages = pdfExtension.getPageCount();
  if (currentPage < totalPages) {
    pdfExtension.setCurrentPage(currentPage + 1);
  }
}

3. 绑定按钮事件 #

给分页按钮绑定上述函数：

<button onclick="goToPrevPage()">上一页</button>
<button onclick="goToNextPage()">下一页</button>

注意事项 #

• 确保在调用分页方法前，PDF扩展和模型已经完全加载完成，否则getPageCount()可能返回0，导致逻辑失效。
• 如果你的代码是模块化结构，注意pdfExtension变量的作用域，确保分页函数能访问到它。

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