Copy link to clipboard
Copied
I have a viewer on my website which is supose to show content from a PDF file. It loads perfectly sometimes, but most of the times it displayes a blank modal content. It does triggers an event APP_RENDERING_START but then no other messages can be seeing, neither the content is display inside the pop up modal when it opens.
Any suggestions on what the problem might be as i didn't find many answers on web?
Thank you!
Copy link to clipboard
Copied
Can you share your code?
Copy link to clipboard
Copied
My answer gives always post flooding detected. Any idea why?
Copy link to clipboard
Copied
Copy link to clipboard
Copied
Can you show the part of the code that is loading the API, not just the embed code?
Copy link to clipboard
Copied
Sure, this is the div with the button that opens the modal and the div tag to the modal itself.
<div id="download-button" class="sticky_button">
<a tabindex="0" class="bx--btn bx--btn--primary" onclick="IBMCore.common.widget.overlay.show('overlayExampleLarge'); return false;" style="padding-right: 10px !important" type="button" id="pge—-footer-0__card-0__link-0" driverLocation="0" data-driverId="{{ smartpaper.next_step_01_title | slug }}" href="assets/pdf/Industry-4.0.pdf" download title="{{ smartpaper.next_step_01_title }}" target="_blank" rel="noopener noreferrer">
Download PDF (1.5 MB)
</a>
</div>
<div class="ibm-common-overlay ibm-overlay-alt-three" data-widget="overlay" id="overlayExampleLarge" style="height: 100%">
<div id="adobe-dc-view"></div>
</div>
Copy link to clipboard
Copied
Hi @Joel_Geraci any idea on what is causing the issue?
Thank you!
Copy link to clipboard
Copied
It looks like you are trying to have a button that opens the PDF file in a modal when clicked. If that is the case, take a look at my CodePen example here. The key to making Embed API work every time is to wrap whatever actions it is required for in the "adobe_dc_view_sdk.ready" callback. That way the buttons won't be enabled until Embed API is ready to display the PDF.
Copy link to clipboard
Copied
It seems to be working perfetcly. Thank very much @Joel_Geraci
Copy link to clipboard
Copied
I'm putting this back as open, as it seems to be an issue
Copy link to clipboard
Copied
Hi @Joel_Geraci
I realized that the code provided above doesn't seems to work on Firefox in Icognito tab in some specific cases. Is there any issue related to this?
Thank you!
Copy link to clipboard
Copied
I can't seem to reproduce that issue in Firefox. It's working fine with my CodePen on both macOS and Windows.
Copy link to clipboard
Copied
@Joel_Geraci I guess this might be a bug then. We have the same piece of code working in Chrome and not in Firefox. Has it been tested on both browsers? Can this issue please be investigated?
Thank you!
Copy link to clipboard
Copied
@Joel_Geraci Also, no errors have been displayed in the console when this happens...
Copy link to clipboard
Copied
Can you share the entire code for the page?
Copy link to clipboard
Copied
const clientId = "XXXXXXXXXXXX";
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,
divId: "adobe-dc-view"
});
var previewFilePromise = adobeDCView.previewFile(
{
content: { promise: fetchPDF(urlToPDF) },
metaData: { fileName: urlToPDF.split("/").slice(-1)[0] }
},
);
}
document.addEventListener("adobe_dc_view_sdk.ready", function () {
document.getElementById("pge—-footer-0__card-0__link-0").addEventListener("click", function () {
showPDF("https://XXXXXXXXX.pdf")
});
/* Register the callback to receive the events */
adobeDCView.registerCallback(
/* Type of call back */
AdobeDC.View.Enum.CallbackType.EVENT_LISTENER,
/* call back function */
function (event) {
console.log(event);
if (event.type === 'PAGE_VIEW'){
let pageNumber = event.data.pageNumber;
let pageTitle = document.title.replace(' | ', '');
let pageHref = document.location.origin+document.location.pathname;
if (pages.includes(pageNumber)){
}
else {
console.log(pageNumber);
pages.push(pageNumber);
console.log(pages);
window.history.replaceState('', pageTitle+' PDF '+pageNumber, pageHref+'#'+pageNumber);
digitalData.page.pageInfo.pageID = documentTitle+' - PDF '+pageNumber;
}
}
if (event.type === 'HYPERLINK_OPEN'){
if (event.data.type === 'internal'){
console.log('clicked: pdf nav link');
}
else if (event.data.type === 'external'){
let hyperlink = event.data.url;
if (hyperlink.includes('ibm.com')){
console.log('clicked: IBM link');
let eventInfo = {
type : "pageclick",
primaryCategory : "PAGE CLICK",
eventName : hyperlink
};
console.log(eventInfo);
}
else {
console.log('clicked: external link');
let eventInfo = {
type : "pageclick",
primaryCategory : "EXTERNAL LINK",
eventName : hyperlink
};
console.log(eventInfo);
}
}
}
if (event.type === 'DOCUMENT_DOWNLOAD'){
console.log('downloaded PDF');
let eventInfo = {
type : "pageclick",
primaryCategory : "DOWNLOAD",
eventName : "Download PDF"
};
console.log(eventInfo);
}
if (event.type === 'DOCUMENT_PRINT'){
console.log('printed PDF');
let eventInfo = {
type : "pageclick",
primaryCategory : "DOWNLOAD",
eventName : "Download PDF"
};
console.log(eventInfo);
}
},
/* options to control the callback execution */
{
/* Enable PDF analytics events on user interaction. */
enablePDFAnalytics: true,
}
);
});
// 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>
Copy link to clipboard
Copied
@Joel_Geraci Any ideas on what is going on with the framework?
Thank you!