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

Explorer ,
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

278

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
Explorer ,
Apr 18, 2021 Apr 18, 2021

Copy link to clipboard

Copied

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
Explorer ,
Sep 28, 2021 Sep 28, 2021

Copy link to clipboard

Copied

LATEST

Sorry, it was my fault that I did not thoroughly test the outcome -- the downloaded file was ZERO BYTES! I do not know how to unmark the above as answer, so might as well submit another reply here again. I'm still waiting for the answer from Stack Overflow.

Sorry for jumping the gun for too soon, my apologies.

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
Resources