PDF Embed API sometimes stuck on 0%

New Here ,
Sep 20, 2022 Sep 20, 2022

Copy link to clipboard

Copied

We're using the Embed API to display PDFs. The files are hosted on Dropbox and displayed on a Squarespace website. Things worked great until recently when randomly the files will stay at "Loading 0%". I'm not sure what to do since the developer who set up the code is no longer available. I have a test link you can try and also the code we use. Keep in mind that sometimes the files open just fine, but other times they stay at 0%. Does anyone know what we can do to fix the issue?

Test link: https://www.fortebarprep.com/test-blog
Click on any of the titles in the blog to go to an embed page.

 

Here is the code. The only difference on each page is the dropbox file link. 

<style type="text/css" media="print">
  body {
    visibility: hidden;
    display: none; }
</style>


<div id="embeddedView" style="width: 100%;"></div>
<script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
<script type="text/javascript">
const dropboxLink = "https://www.dropbox.com/s/e2kgzwcd1jp3vyw/Torts%20Long.pdf?dl=0";
const clientId = "ea984d5c8470476e92d932abe900d200";
const viewerOptions = {
    embedMode: "IN_LINE",
    defaultViewMode: "FIT_PAGE",
    showDownloadPDF: false,
    showPrintPDF: false,
    showLeftHandPanel: true,
    showAnnotationTools: true
};
  
const allowTextSelection = false;
  
document.addEventListener("adobe_dc_view_sdk.ready", function () {
    var urlToPDF = directLinkFromDropboxLink(dropboxLink);
    var adobeDCView = new AdobeDC.View({
        clientId: clientId, // This clientId can be used for any CodePen example
        divId: "embeddedView"
    });
  
let resultPromise = adobeDCView.previewFile(
        {
            content: { promise: fetchPDF(urlToPDF) },
            metaData: { fileName: urlToPDF.split("/").slice(-1)[0] }
        },
        viewerOptions
    );

resultPromise.then(adobeViewer => {
  adobeViewer.getAPIs().then(apis => {
    apis.getPDFMetadata()
    .then(result => console.log(result))
    .catch(error => console.log(error));
    apis.gotoLocation(parseInt(page));
	apis.enableTextSelection(false);
  	});
  });
  
});  
  
// Utility Functions:
// Return a Promise that fetches the PDF. 
function fetchPDF(urlToPDF) {
    return new Promise((resolve) => {
        fetch(urlToPDF)
            .then((resolve) => resolve.blob())
            .then((blob) => {
                resolve(blob.arrayBuffer());
            })
    })
}
  
// Converts a standard Dropbox link to a direct download link
function directLinkFromDropboxLink(dropboxLink) {
    return dropboxLink.replace("www.dropbox.com", "dl.dropboxusercontent.com").replace("?dl=0", "");
}

// Add arrayBuffer if necessary i.e. Safari
(function () {
    if (Blob.arrayBuffer != "function") {
        Blob.prototype.arrayBuffer = myArrayBuffer;
    }

    function myArrayBuffer() {
        return new Promise((resolve) => {
            let fileReader = new FileReader();
            fileReader.onload = () => {
                resolve(fileReader.result);
            };
            fileReader.readAsArrayBuffer(this);
        });
    }
})();
</script>

 

TOPICS
Bug , PDF Embed API

Views

44

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
no replies

Have something to add?

Join the conversation