PDF Embed API's previewFile() method render blank container, no error

Community Beginner ,
Apr 18, 2021 Apr 18, 2021

Copy link to clipboard

Copied

Today, I deployed my app from localhost to my production site (with different domain name of course). Later, I discovered that every credential for PDF Embed API can only support one single domain; therefore, I tried to create another project with a new credential for my production site. But when I tested it on my localhost with the same API key that I used for localhost again, no error was logged on the browser console except a blank HTML container (with the expected height and width though).

Later I thought it could be due to CORS issue (although less likely, because the PDF URL is hosted my own website with CORS header allowed all (*)), so I tried with the PDF URL given by the demo:

 

https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea%20Brochure.pdf

 

Still no luck. Below is my code just in case you need to make sure I did it right:

 

document.addEventListener("adobe_dc_view_sdk.ready", function () {
let adobeDCView = new AdobeDC.View({ clientId: "4d80b79560164302a9aff1c55484356a", divId: "pdfContainer" });
adobeDCView.previewFile({
    content: { location: { url: "https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea%20Brochure.pdf" } },
    metaData: { fileName: "download-from-mtn-webstore.pdf" }
}, { embedMode: "IN_LINE" });
});

So what else could it be wrong? Please enlighten me, thanks in advance!

 

TOPICS
PDF Embed API

Views

41

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct Answer

Community Beginner , Apr 18, 2021 Apr 18, 2021
After some further investigation, I realized that it was due to my attempt to dynamically render the embed on a dynamically created container element, i.e. the "pdfContainer". The solution is to dynamically add the SDK using jQuery's $.getScript() and call the previewFile() method when done:$.getScript("https://documentcloud.adobe.com/view-sdk/main.js") .done(function (script, textStatus) { document.addEventListener("adobe_dc_view_sdk.ready", function...

Likes

Translate

Translate
Community Beginner ,
Apr 18, 2021 Apr 18, 2021

Copy link to clipboard

Copied

LATEST

After some further investigation, I realized that it was due to my attempt to dynamically render the embed on a dynamically created container element, i.e. the "pdfContainer". The solution is to dynamically add the SDK using jQuery's $.getScript() and call the previewFile() method when done:

$.getScript("https://documentcloud.adobe.com/view-sdk/main.js")
    .done(function (script, textStatus) {                                 
        document.addEventListener("adobe_dc_view_sdk.ready", function () {
            var adobeDCView = new AdobeDC.View({ clientId: envManager.PDFEmbedAPIClientID, divId: "pdfContainer" });
            adobeDCView.previewFile({
                content: { location: { url: urlInfo.pdf.embedLink } },
                metaData: { fileName: "download-from-mtn-webstore.pdf" }
            }, { embedMode: "IN_LINE" });
    });
})

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines