Copy link to clipboard
Copied
The documentation only gives the javascript for the lightbox, but doesn't give clear examples of connecting it to a button. Here is the code that I have used, but it is not working. I based it on the codepen from Joel Geraci: https://codepen.io/practicalPDF/pen/MWyKKLZ
I have just one button in my example..
You can check it at the following link and click the button. Unfortunately, the lightbox does not open: https://mdpl.org/2020/08/21/ocean-drive-master-plans/
<button id="showPDF01">See the plan</button>
<script type="text/javascript">
const clientId = "9dcefe93a0974e39bde91432083cffec";
const viewerOptions = {
embedMode: "LIGHT_BOX",
defaultViewMode: "FIT_PAGE",
showDownloadPDF: false,
showPrintPDF: false
};
function fetchPDF(urlToPDF) {
return new Promise((resolve) => {
fetch(urlToPDF)
.then((resolve) => resolve.blob())
.then((blob) => {
resolve(blob.arrayBuffer());
})
})
}
function showPDF(urlToPDF) {
var adobeDCView = new AdobeDC.View({
clientId: clientId
});
var previewFilePromise = adobeDCView.previewFile(
{
content: { promise: fetchPDF(urlToPDF) },
metaData: { fileName: urlToPDF.split("/").slice(-1)[0] }
},
viewerOptions
);
}
document.addEventListener("adobe_dc_view_sdk.ready", function () {
document.getElementById("showPDF01").addEventListener("click", function () {
showPDF("https://documentcloud.adobe.com/view-sdk-demo/PDFs/Summary.pdf")
});
document.getElementById("showPDF02").addEventListener("click", function () {
showPDF("https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf")
});
document.getElementById("showPDF03").addEventListener("click", function () {
showPDF("https://documentcloud.adobe.com/view-sdk-demo/PDFs/Overview.pdf")
});
});
// 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>
Hi, thank you for using PDF Embed API.
I noticed that the code snippet doesn't include the Embed API JavaScript.
Please try to run the code after including this line.
<script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
Let us know if you still face any issue while using Lightbox embed mode.
Copy link to clipboard
Copied
Hi, thank you for using PDF Embed API.
I noticed that the code snippet doesn't include the Embed API JavaScript.
Please try to run the code after including this line.
<script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
Let us know if you still face any issue while using Lightbox embed mode.
Copy link to clipboard
Copied
Copy link to clipboard
Copied
Hi, I was able to fix the problem of not working on the public site, by removing the page from caching. Thanks again for your help.