Use Adobe PDF Embed API in HtmlComponent with dynamic file url

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 y ou 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:

< 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.
F ind how here: https://developer.adobe.com/document-services/docs/overview/pdf-embed-api/howtos/#embed-modes

:stuck_out_tongue_winking_eye:
Cristina

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?

Hello Daniel,

It’s a timing issue, so maybe try to put your page code like this:

import wixWindow from ‘wix-window’ ;
$w.onReady(function () {
if (wixWindow.rendering.env === “browser”) {
let file = { filepath: " https://yourfiledirecturl.pdf “, filename: " filename.pdf “};
$w(”#html1”).postMessage(file)
}
});

And in the html component add “filename” to event.data, like this:

“addEventListener(‘message’, event => {if (event.data.filename){….”

Let me know if it worked out :wink:

Cristina

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:

Hope you are able to help!

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 Daniel, does the browser developer console (live site) shows any errors that can help understand what’s happening? How many times does it log your variables, and in any of that times do they log empty values? Can you send this page url?

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

Hi Daniel,

So two things might be happening there:

1 - not quite sure that wix url is working because of the way adobe embed api processes data, I suggest testing other like gdrive direct link (https://drive.google.com/uc?export=download&id=FILEID ; you get file id from your sharing link), or even adobe url used for testing “https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf” just to see if its related.

2 - Most important check if filename is “undefined” - if so that is what’s causing the error, because adobe embed cant process de file without it.

Hope this helps!
Cristina

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 :sweat_smile:

Cheers,

Daniel

Hi Daniel,

I’m happy for you :grinning:

Regarding your other post, maybe mark it as solved and reference this one, or even consider deleting, otherwise might confuse other users with same question.

Regards,
Cristina

1 Like

@cristinabispo yes good idea!

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!