Autodesk Forge viewer renders only single page for

In our application we're using Autodesk Forge Viewer to render 3D and 2D design files. Files with other formats get rendered pretty well. But in case of the pdf files, only the first page gets rendered even if the file actually has multiple pages. But we need to display all the pages.

Here's the part of code I'm using to initialize the viewer:

function doInitializeTheViewer(urn, token, element) {
    const options = {
        'env': 'AutodeskProduction',
        'accessToken': token
    };

    let documentId = 'urn:' + urn;

    return new Promise((resolve, reject) => {
        Autodesk.Viewing.Initializer(options, function onInitialized() {
            let viewerApp = new Autodesk.A360ViewingApplication(element.id);

            viewerApp.onDocumentLoaded = function (doc) {

                resolve(getViewerInstance().then(viewer => {
                    state.viewer = viewer;
                    return state;
                }));
            };

            viewerApp.onDocumentFailedToLoad = (reason, errorCode) => {
                reject({errorCode, reason});
            };

            viewerApp.registerViewer(viewerApp.k3D, Autodesk.Viewing.Private.GuiViewer3D);
            viewerApp.loadDocumentWithItemAndObject(documentId);

            state.viewerApp = viewerApp;
        });
    });
}

And, this is how it gets invoked:

let element = document.getElementById('#the-viewer');

fetch2LegToken().then(
    ({accessToken}) => doInitializeTheViewer(urnB64, accessToken, element)
);

What else do I need to do here to get the viewer also render multi-page pdf files along with other 3D/2D files?

I couldn't find any way to configure this in the API documentation as well nor could I find it in any sample.

.pdf files are translated as 2D sheets in the viewer, each page in the .pdf file should appear as individual 2D views.

If you just use the boilerplate code from the Instantiate a Basic Viewer you'll get multiple views like so:

Since you override onDocumentLoaded, take a look at how the Autodesk360App.js implemented onDocumentLoaded method. At line 621:

function showDesignExplorer( modelDocument )
{
    var viewableItems = Autodesk.Viewing.Document.getSubItemsWithProperties(modelDocument.getRootItem(), {'type':'folder','role':'viewable'}, true);
    var root = viewableItems[0];
    var geometryItems = Autodesk.Viewing.Document.getSubItemsWithProperties(root, {'type':'geometry'}, true);
    if (geometryItems.length === 0)
        return false;

    if (geometryItems.length === 1) {
        // Check if the item has camera views.
        return modelDocument.getNumViews( geometryItems[0] ) > 1;
    }
    return true;
}

In your onDocumentLoaded method, call the Autodesk.Viewing.Document.getSubItemsWithProperties method to get all the views.

There's also a line at lmvdbg at demonstrate how to load all the views.