Creating a direct download div link for pdf file

Joined
Mar 19, 2023
Messages
3
Reaction score
0
HI there,

I am trying to create a div box with image and when clicked it downloads a pdf file. I can successfully do this by using window.open(filename) but this will open a new window and display the pdf AND show the URL of the ebook at the top which I dont want. I simply want the file to download. Im testing this on Chrome.

This is what I have so far:

$(document).on('click', '#dl_pdf', function(){
window.open("/ebooks/my_book.pdf");
});

Thank you!
 
Joined
Jul 3, 2022
Messages
93
Reaction score
23
HTML:
<div>
<a href="/ebooks/my_book.pdf" download><img src="https://icons.iconarchive.com/icons/emoopo/darktheme-folder/512/Folder-Text-PDF-icon.png" width="32" /></a>
</div>
 
Joined
Mar 19, 2023
Messages
3
Reaction score
0
HTML:
<div>
<a href="/ebooks/my_book.pdf" download><img src="https://icons.iconarchive.com/icons/emoopo/darktheme-folder/512/Folder-Text-PDF-icon.png" width="32" /></a>
</div>
Thank you! Is there a way to make the link not visible when you hover over it?
 
Joined
Jul 3, 2022
Messages
93
Reaction score
23
I would try using css for that purpose:

CSS:
div:has( > [href^="/ebooks/my"] ):hover{
opacity: 0;
}
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,813
Messages
2,569,696
Members
45,483
Latest member
TedDvb6626

Latest Threads

Top