Reputation: 27
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
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