How to Embed a PDF on a Dynamic Page - Tutorial

Ask the community
,
1

Hello Everyone : )

Learn how to embed a PDF when using a database collection of uploaded documents. It is fast & easy.

Link to Tutorial site: https://codequeen.wixsite.com/embed-pdf
Link to Video: Wix Dynamic Page - How to embed a PDF using Wix Code (PDF Database) - YouTube

3 Likes
2

WOW! So cool! Exactly what I needed for a long time!

3

:clap::clap::clap::clap::clap:

4

Awesome Tutorial Nayeli! :slight_smile:

4000×3000 1.32 MB

1 Like
5

Well thank you Doron :slight_smile:

I LOVE YOUR MOUSE PAD!!!

I will trade you an autographed mouse pad for that cute Wix duck in the background!
; )
Lol

6

Hallo Nayeli ,
HTML input Address , Code ?
which linke ,Code?
Tanks

7

Hi Code Queen,

Thanks so much for this tutorial (and for all your others) - they’re so so helpful!

Please can you offer any assistance below? I’ve copied your code and believe I have installed correctly but I cannot get the PDF to show in the HTML iFrame…

Thanks in advanced,
C

Test Site: https://uk2good.wixsite.com/website-2/class/example-event-1

Screenshot:

2880×1800 378 KB

Code:

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

$w.onReady( function () {

$w("#dynamicDataset").onReady( () => {   
    src = $w("#linkSource").link;

let name = src.split(“/”)[4];
let url = src.split(“/”)[3];

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

});

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

8

Queen… need your help with something.

9

Hi @code-queen ,

Thanks for the explanation. I have one post at https://www.wix.com/corvid/forum/community-discussion/can-i-link-read-more-of-repeaters-created-on-data-collection-to-wix-pdf-viewer-so-that-user-can-read-view-pdf-over-website-page-itself-1

This is what I wanted to achieve using Wix but through comments I got to know that its not possible using Wix.
Then I got your post on this forum and watched your youtube video. It was very nice explanation.

If you could please let me know what is “#linksource” here , which link I need to put here.

import wixData from 'wix-data';

import wixLocation from 'wix-location';

let src;



$w.onReady(function () {



    $w("#dynamicDataset").onReady( () => {  

        src = $w("#linkSource").link;

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

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

 

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

    }); 

});



export function downloadButton_click(event, $w) {

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

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

    wixLocation.to(`https://docs.wixstatic.com/ugd/${url}?dn=${name}.pdf`);

}

Thanks in advance @Code Queen Nayeli

Regards,

10

If you want something like that then you will still need to do what J.D. stated in the reply to you from your original post about creating a seperate page/lightbox for your pdf files, which will need to be a dynamic page for this tutorial and not lots of static pages for all the pdf files seperately.
https://www.wix.com/corvid/forum/community-discussion/can-i-link-read-more-of-repeaters-created-on-data-collection-to-wix-pdf-viewer-so-that-user-can-read-view-pdf-over-website-page-itself

Then you can simply use Nayeli’s code on this page that you have the pdf viewer on and have the download button on the page as Nayeli has in her tutorial.

However, note that Nayeli has two buttons on top of each other, the download button and the link source button for which you are wondering about with the link source.

If you have watched the youtube video, then you will know that from 4mins onwards Nayeli describes that part in detail about the button being connected to the dataset field that contains your pdf files.

1299×707 252 KB