Hey everyone,
I am trying to use Adobe PDF Embed API, rather than the default browser PDF Viewer for a more consistent PDF experience. For example links, and smart annotations don’t work on Safari or Edge, but they work on Chrome.
All of my back end works fine, and the PDF displays perfectly every time in preview mode, but when I try and view it on the live website, all I see is a white screen with a scrollbar where the PDF should be.
I understand that people on here have had timing issues, so I have put the database commands inside of a function that is only called when the code page receives a message from the html element telling it that it has loaded.
Below is my code and some images, I hope someone can help me out with this issue!
Page Code:
$w . onReady ( function () {
$w ( '#dynamicDataset' ). onReady ( () =>{
// This function will load all of the data and send it to the HTML element when called
function loadPDF (){
// Grab the link from the button that opens pdf in new tab
let source = $w ( "#linksource" ). link ;
console . log ( "Link Source: " , source );
// Store the name and url of the pdf in variables
let url = source . split ( "/" )[ 3 ];
let name = source . split ( "/" )[ 4 ];
// Ensures url and name are correct
console . log ( "URL: " , url );
console . log ( "Name: " , name )
/* Opens url as an embedded pdf. Works great except inconsistent
experience depending on browser, So I'd rather use Adobe PDF viewer */
$w ( '#html1' ). src = `htt ps://docs . wixstatic . com/ugd/ ${ url }`;
// Store the full file path in a variable
let filePath = `h ttp s://docs . wixstatic . co m/ugd/ ${ url }`;
// Send the filepath and pdf name to the html element
let file = { filepath : filePath , filename : name };
$w ( "#html2" ). postMessage ( file );
}
// If html element is loaded and sends message, call loadPDF()
$w ( "#html2" ). onMessage ( ( event ) => {
// If "LoadOk message came through"
if ( event . data == "LoadOk" ) {
console . log ( "Event" , event )
loadPDF ();
}
});
})
});
HTML Code:
Preview:
Live:
The PDF on the left is just there for comparison.
Please save me from hitting my head against a wall!
(P.S. Ignore the spaces in the URL’s. Wix wouldn’t let me post URL’s here)
Cheers,
Daniel
