top of page
Forum Posts
danielhumphreys
May 13, 2022
In Coding with Velo
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: <!DOCTYPE html> <html> <body onload="sendLoadMessage();"> <div id="adobe-dc-view"></div> <script src="htt ps:// document cloud.adob e . co m/view-sdk/m ain.js"></script> <script type="text/javascript"> window.onmessage = (event) => { if (event.data) { document.getElementById("html2").innerHTML = event.data; } }; function sendLoadMessage() { window.parent.postMessage("LoadOk", "*"); } document.addEventListener("adobe_dc_view_sdk.ready", function(){ var adobeDCView = new AdobeDC.View({clientId: "b393fe7717dc413db8e4dbcbb9d6d668", divId: "adobe-dc-view" }); addEventListener('message', event => { if (event.data.filepath) { adobeDCView.previewFile({content: {location: {url: event.data.filepath }}, metaData: {fileName: event.data.filename}}, {embedMode: "SIZED_CONTAINER", showFullScreen: false}); } }) }) </script> <div id="html2"></div> </body> </html> 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
0
3
91
danielhumphreys
More actions
bottom of page