Use of PDF EMBED API

[rordahl]

I am currently using the PDF EMBED API "adobeDCView " and I works fine for the first time I execute it, but when I come back to view another PDF it shows nothing.  When I execute it in DEBUG mode it works on the second PDF some times depending on how much time I spend in DEBUG before it is called the second time.  It seems to me to be either a timing issue or the data held by adobeDCView is not being cleared.

Is there a "CLEAR" function or what needs to be reset?  I have tried resetting all VARs before requesting another view, no help.

For clarification, my website is a PHP app that displays a set of buttons to select different categories of PDFs.  When the button is clicked it goes to new page passing the selected category.  That page will retrieve a an item from an sql database which contains the PDF info like filename and filepath which are then passed to the adobeDCView.  After viewing the first PDF the user clicks on a "Back to Menu" button to select another category. When this second or any subsequent selection is made, it produces only the Back Button but no PDF view. No error indications. 

Please help,

Rich Ordahl

ordahlr@gmail.com

312-545-4979

[AmitVishwakarma]

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

[rordahl]

Amit,

Thank you very much.  This solution works great.

I appreciate your response.

Thanks,

Rich