Hi @rordahl ,
This is a known behavior in some implementations of the Adobe PDF Embed API when reusing the same container or improperly reinitializing adobeDCView across page transitions. The issue is often caused by not properly re-instantiating the API container or viewer context, especially in single-page or pseudo single-page apps.
Try below steps:
1. Ensure container cleanup before initializing again
Add a step to remove the container div or empty it before reloading another PDF.
<div id="adobe-dc-view"></div>
Before re-instantiating adobeDCView, clear it like this:
document.getElementById("adobe-dc-view").innerHTML = "";
2. Full working JavaScript code snippet
Replace this code in the page that loads the PDF:
<!-- Include the PDF Embed API script -->
<script src="https://documentcloud.adobe.com/view-sdk/viewer.js"></script>
<!-- Container for the PDF viewer -->
<div id="adobe-dc-view" style="height: 100vh;"></div>
<script>
function showPDF(pdfUrl, fileName) {
// Clear the container
document.getElementById("adobe-dc-view").innerHTML = "";
// Give a slight delay (optional but helps in reflow issues)
setTimeout(() => {
if (window.AdobeDC) {
var adobeDCView = new AdobeDC.View({
clientId: "YOUR_ADOBE_CLIENT_ID", // <-- Use your real client ID
divId: "adobe-dc-view"
});
adobeDCView.previewFile({
content: {
location: {
url: pdfUrl // <-- URL to your PDF file
}
},
metaData: {
fileName: fileName
}
}, {
embedMode: "SIZED_CONTAINER", // or "IN_LINE", "FULL_WINDOW"
showDownloadPDF: false,
showPrintPDF: false
});
}
}, 200); // 200ms delay to allow DOM re-render
}
// Example call
showPDF("https://example.com/path/to/your.pdf", "Document.pdf");
</script>
3. Additional Point:
Make sure you always reinitialize AdobeDC.View on each page load or each new PDF request.
Avoid using global reused instances of adobeDCView.
Ensure that the PDF URL is publicly accessible and properly CORS-enabled.
If you're navigating between PHP pages, ensure that:
Each PDF viewer page loads the viewer script fresh.
You don’t cache the #adobe-dc-view container with HTML partials or templates.
Add the PDF path using PHP variable injection:
<script>
var pdfURL = "<?php echo $pdf_path ?>";
var fileName = "<?php echo $pdf_name ?>";
showPDF(pdfURL, fileName);
</script>
This approach has worked reliably across SPAs, Laravel/PHP apps, and classic multi-page apps. If it still fails:
Check browser console for blocked requests or CORS issues.
Ensure YOUR_ADOBE_CLIENT_ID is valid and enabled for Embed API in Adobe Developer Console.
Regards,
Amit