Creating a direct download div link for pdf file

[woodenpalette]

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!

 

[Padonak]

<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>

 

[woodenpalette]

<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?

 

[Padonak]

I would try using css for that purpose:

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