pdfautodesk-viewerautodesk

How to create "Next" and "Previous" buttons for navigating PDF pages with Autodesk Viewer?


I am working with the Autodesk Viewer API to display PDF documents. Currently, I can load and display a PDF stored as a base64 string in local storage using the following code:

if (isPdf) {
  viewers[viewerNumber].loadExtension("Autodesk.PDF").then(function () {

      
     ...
      const blob = new Blob([byteArray], { type: "application/pdf" });

       let blobUrl = URL.createObjectURL(blob).toString();
     ...

      viewers[viewerNumber]
        .loadExtension(`Autodesk.PDF`)
        .then(function () {
          viewers[viewerNumber].loadModel(blobUrl, { page: 1 });
        })
        ....
  return;
}

This code loads and displays the PDF document on the first page. Now, I want to add "Next" and "Previous" buttons to navigate between the pages of the PDF.

How can I modify this code to add these buttons and enable page navigation, I can't find anything in document browser https://aps.autodesk.com/en/docs/viewer/v7/reference/Extensions/DocumentBrowser/

Best regards.


Solution

  • I think the following blog post shows exactly what you need:
    https://aps.autodesk.com/blog/switch-between-sheets

    Basically, the solution relies on the "Autodesk.DocumentBrowser" extension of the Viewer to help with the navigation.

    Update:
    I updated the code in the blog post to make it work with local PDFs - had to add this line to both prev and next button's code:

    // Workaround to make things work with local PDFs
    ext.geometries = ext.rootNode.search({type: "geometry", role: "2d"});
    

    The issue was fixed in v7.98, so the above workaround is not needed from that version on.