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!
Hey thanks For the help! I actually solved a few hours after sharing this. The filename was undefined for some reason so just changed it to, “ “ and it works great now!
Thanks again because if i hadn’t found your post in the first place I would’ve never figured this out 😅
Cheers,
Daniel
Hi Cristina, is there a way to send you the website privately? It is for a client so I don't think I should share on the web.
Also this is the error I receive on the live website.
I've also made a thread if you'd like to help out further! I changed my code a bit since we last spoke.
HTML Element that displays dynamic URL's with Adobe PDF Embed API only works in Preview, not on live website. | Velo by Wix
Heres some pictures. of the preview site. (The client ID is set for the live site)
The Live site
The PDF embed on the left is just showing that my links are working before they are sent to the embed with postMessage()
Hi Cristina,
So I added what you said to and it works every time in preview! But still a blank white embed on my live site..... I will share you my code. It's a dynamic page.
Page Code:
import wixWindow from 'wix-window'; let source; $w.onReady(function() { if (wixWindow.rendering.env === "browser") { $w('#dynamicDataset').onReady( () =>{ // Grab the link from the button that opens pdf in new tab 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 = `https://docs.wixstatic.com /ugd/${url}`; // Store the full file path in a variable let filePath = `https://docs.wixstatic.com /ugd/${url}`; // Send the filepath and pdf name to the html element let file = { filepath: filePath, filename: name}; $w("#html2").postMessage(file); }) } });
HTML 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: "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>
</html>
Hope you are able to help!
Hey! I have this working except for one bug. Wix loads the HTML embed before it runs my Javascript, so the html Embed can't find the url I send over with postMessage and just displays a white screen. Any ideas?