PDF Embed API sometimes stuck on 0%
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>
