Just sharing a cool achievement for previewing pdf files on wix, using PDF Embed API by Abobe and wix HtmlComponent.
Page Code:
//simple exemple but you can feed filepath and filename from a database, for exemple.
$w.onReady(function () { let file = { filepath: "https://yourfiledirecturl.pdf", filename: "filename.pdf"}; $w("#html1").postMessage(file) });
HtmlComponent Code:
<!DOCTYPE html> <html> <div id="adobe-dc-view"></div> <script src="https://documentcloud.adobe.com/view-sdk/main.js"></script> <script type="text/javascript"> document.addEventListener("adobe_dc_view_sdk.ready", function(){ var adobeDCView = new AdobeDC.View({clientId: "YOUR-API-KEY", divId: "adobe-dc-view" }); window.addEventListener('message', event => { if (event.data) { adobeDCView.previewFile({content: {location: {url: event.data.filepath }}, metaData: {fileName: event.data.filename}}, {embedMode: "SIZED_CONTAINER", showFullScreen: false}); } }) }) </script> </html>
You have to create an API KEY and authorize "filesusr.com" domain (which is the html component domain).
Also you can tweak the Embed Api to your requirements.
Find how here: https://developer.adobe.com/document-services/docs/overview/pdf-embed-api/howtos/#embed-modes
😜
Cristina
I got this to work on a desktop browser but it's not displaying on mobile. I thought maybe it was safari, but I've also tried on chrome & firefox with no luck. Does anyone have a solution? Thanks in advance!