Embedding PDF from Dataset on Dataset Dynamic Page

I am trying to embed a pdf file which has been uploaded on my dataset to be displayed on the dynamic page of the dataset along with the download button.

The download button is working fine. But the pdf file is not showing on the screen and I can only see white screen. If I click somewhere on the white screen, the same pdf file starts getting downloaded. However, I am unable to see the pdf file being displayed.

Please help!

This is the code I am using:


import wixData from 'wix-data';
import wixLocation from 'wix-location';
let source;

$w.onReady(function () {

   $w("#dynamicDataset").onReady( () => {  
      source = $w("#button1").link;
 let name;
let url;
if (source.includes('ugd')) {
    name = source.split("/")[5];
    url = source.split("/")[4];
} else {
    name = source.split("/")[4];
    url = source.split("/")[3];
}
      console.log('url', url);

      $w("#html1").src = `https://docs.wixstatic.com/ugd/${url}?`;
 
    }); 

});

export function downloadButton_click(event, $w) {
 let name;
let url;
if (source.includes('ugd')) {
    name = source.split("/")[5];
    url = source.split("/")[4];
} else {
    name = source.split("/")[4];
    url = source.split("/")[3];
}
    wixLocation.to(`https://docs.wixstatic.com/ugd/${url}?dn=${name}.pdf`);

}

Hi,

Currently, the only way to display your PDF files would be with the PDF viewer app . However, you’d need to upload your document manually and would not be able to connect your database collection to it.

As an alternative, you could link a table to your document so that your visitors can click and download the PDF. You can check out this post here

Or you can try this workaround where the HTML element is used to display the PDF by retrieving the source from the db collection.

Hope this helps!

Hello.

I am already trying the third method of using HTML element but facing error in that. Please help with that.

I am trying to embed a pdf file which has been uploaded on my dataset to be displayed on the dynamic page of the dataset along with the download button.

The download button is working fine. But the pdf file is not showing on the screen and I can only see white screen. If I click somewhere on the white screen, the same pdf file starts getting downloaded. However, I am unable to see the pdf file being displayed.

Please help!

This is the code I am using:

import wixData from ‘wix-data’ ;
import wixLocation from ‘wix-location’ ;
let source ;

$w . onReady ( function () {

$w ( “#dynamicDataset” ). onReady ( () => {
source = $w ( “#button1” ). link ;
let name ;
let url ;
if ( source . includes ( ‘ugd’ )) {
name = source . split ( “/” )[ 5 ];
url = source . split ( “/” )[ 4 ];
} else {
name = source . split ( “/” )[ 4 ];
url = source . split ( “/” )[ 3 ];
}
console . log ( ‘url’ , url );

  $w ( "#html1" ). src = `https: //docs.wixstatic.com/ugd/${url}?`; 

});  

});

export function downloadButton_click ( event, $w ) {
let name ;
let url ;
if ( source . includes ( ‘ugd’ )) {
name = source . split ( “/” )[ 5 ];
url = source . split ( “/” )[ 4 ];
} else {
name = source . split ( “/” )[ 4 ];
url = source . split ( “/” )[ 3 ];
}
wixLocation . to ( https: //docs.wixstatic.com/ugd/${url}?dn=${name}.pdf);

}

Hi there krgupta101 !
Have you already solved your problem? Before I have a problem like you have and now it’s already working. I’m not an IT nor expert in coding, I just made many trials and test.
I hope this could help you! :grin:

import wixData from 'wix-data';
let src;
let url;
$w.onReady(function(){
 $w("#dynamicDataset").onReady( () => {
  src = $w("#button1").link;
  url = src.split("/")[4];
  $w('#html1').src = `https://docs.wixstatic.com/ugd/${url}`;
  } );
} );

Hi. Thanks for your response. The problem got solved as soon as I took the premium plan of Wix. Maybe, there were bandwidth issues.

@aeroengineerz7 Code from Nayeli’s tutorial was below and wasn’t working, it was returning Forbidden error.

 url = src.split("/")[3];

Working code is as below:

 url = src.split("/")[4];

@aeroengineerz7 Hello Juan, could you please help me with the code to link different PDF files in one database? I am a little bit confused… thanks.

“this” was not applicable anymore as Wix not allows to display their links in an embedded page. So, it can work with link that allow to display in embedded page only.

Hello, I have the same pronblem, did you get any solution
Many thanks

Hello, I have the same pronblem, did you get any solution
Many thanks

You may use this app to display PDF dynamically: PDF: View with 3D Flip Effects | Wix App Market | Wix.com

How to use the widget’s API: Working on Velo with PDF: View with 3D Flip Effects app | Certified Code Help Center

1 Like