Dr. Crunch
Dr. Crunch

Reputation: 27

Troubleshoting PDFExtension, cannot get it to work on Autodesk Forge Api v7.55

Good day, I am having difficulties using PDFExtension to load PDF's directly into the viewer. I have omitted the markups extension for testing purposes. I have tried following the steps here to no avail:

instance.canvas.append(htmlViewer); Simply creates a div defined by htmlViewer

let htmlViewer = "<div id=forgeViewer></div>";
//The Viewer will be instantiated here
instance.canvas.append(htmlViewer);


let viewer, markup;

function initializeViewer(pdf) {
    if (viewer) {
        console.log('loading');
        viewer.impl.unloadCurrentModel()
        if (markup) 
            markup.hide();
        viewer.loadModel(pdf, viewer);
        return;
    }
    var options = {
        env: "Local",
        useADP: false
    }

    Autodesk.Viewing.Initializer(options, () => {
        viewer = new Autodesk.Viewing.Private.GuiViewer3D(document.getElementById('forgeViewer'));
        viewer.setTheme("light-theme");
        viewer.start();
        if (!pdf) return;

        viewer.loadExtension('Autodesk.PDF').then( () => {
            viewer.loadModel(pdf, viewer);
        });
    });
}

initializeViewer('//dd7tel2830j4w.cloudfront.net/f1635895094123x658226723587068400/sample.pdf');

The actual viewer itself gets initialized but I see an infinite loading loop. In the console (network) I get a 404 not found for this PDF. However, I can confirm that this URL is indeed correct and I have access to it. Furthermore, I have tried using several different URL's for this file. I cannot use a locally stored file, it must be fetched with a URL. Maybe this is due to a misuse of the env: in options? I am confused... this is pulled directly from the example linked above.

Any help would be appreciated, thank you so much!

Upvotes: 0

Views: 145

Answers (1)

Petr Broz
Petr Broz

Reputation: 9942

Have you checked your browser's dev tools to see if there are any errors?

Here's a minimal Forge Viewer setup that can load a PDF natively:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.css">
    <style>
        body,
        html {
            margin: 0;
            padding: 0;
            height: 100vh;
        }

        #preview {
            position: absolute;
            width: 100%;
            height: 100%;
        }
    </style>
    <title>Autodesk Forge: PDF Demo</title>
</head>

<body>
    <div id="preview"></div>
    <script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.js"></script>
    <script>
        Autodesk.Viewing.Initializer({ accessToken: '' }, async function () {
            const viewer = new Autodesk.Viewing.GuiViewer3D(document.getElementById('preview'));
            viewer.start();
            await viewer.loadExtension('Autodesk.PDF');
            viewer.loadModel('/foo/bar.pdf');
        });
    </script>
</body>

</html>

Just replace /foo/bar.pdf with your own URL. Note however that if you try and load PDF documents from different origins, you might run into CORS problems.

Upvotes: 1

Related Questions