Oct 18, 2022
Dynamic PDF file in for loop | Vue3
Fundamental Conference 2022 Website
If you are looking to either open or download a dynamic PDF file in Vue3, you have reached the right post. Similar to the dynamic img src article where I show how to get specific images and display them in a list of items, I will show you how to get and show a PDF file in a list of items.
For reference, I will be using the Fundamental Conference 2022 website. If you didn’t get a chance to attend the conference, we have attached all the recordings and presentation materials on our Agenda page.
Requirement
The requirement for this part of the project is to open the slides in a different tab. However, I will also show the trick to help download the pdf file. Different item in the list has different slides.
Note: I’ve seen different solutions using different libraries. Although, for this type of requirement I don’t believe there is a need to overload the project with more libraries.
Solution
For this type of project, there weren’t a lot of data so we stored the JSON file locally rather than using a database. The screenshot above is a snippet of how the data was stored in the JSON file. The idea is to loop through the presentationLinks and get the slides' file names. The slides of the presentations are converted into pdf files in order to be accessible by every user.
Another way is to store the names of the files with the path name and use them directly but that would mean a bit of repetition for each slide name (Check the DRY article). Also, you will see later in this post why it is not a good idea to use the path name.
In the code snipped above, I have looped through the presentations links in the <ul> and then in the <li> I check whether the links.slides exist and if so I get the link of the file through <a :href>. As you can see there is no path
<a :href=require(`../assets/pdf/${links.slides}`)>
This is because the slides are all saved in the public folder. The public folder is the folder where we have to store static assets, like CSS files and images, and media files that don’t change over time. Any static assets placed in the public folder will simply be copied and not go through webpack. If you try to save the pdf files in the src folder where all the components are saved, VUE will complain and ask to include a webpack in order to read the pdf file. If your project is requiring to read and writing on it, then it will be a good idea to use webpack and probably some libraries in order to do that. In our case, our pdf won’t change over time.
Open the pdf file in a new tab
If you are looking to simply open the pdf file in a new tab, you just need to add the target=”_blank” rel=”noreferrer” and it will help open in a new tab.
<a :href=”links.slides” target=”_blank” rel=”noreferrer”>
Download the pdf file
If you are looking to download the pdf file you can simply add the download attribute in the <a> tag. This will help you download the file with the same name as the pdf file is saved within the public folder.
<a :href=”links.slides” download>
Although, if you are looking to download the pdf file with a new name you can simply add the name of the file (static or dynamic)
<a :href=”links.slides” download="New name"> → static
<a :href=”links.slides” :download="links.title"> → dynamic
If you are at the beginning of the VUE language, I hope you find this article helpful. Have fun and happy coding!
