Use Adobe PDF Embed API in HtmlComponent with dynamic file url

Show and tell
,
4

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!