[huylam1Participant]

Hi,

I am trying to have my button download a pdf file directly and not open a new tab. Currently, when I click on the button, it opens up the pdf on a new tab. I don’t want this to happen. I just want the file to download when I click on the button. Also, I am still using visual composer. Please help.

[Prasant RaiModerator]

Hello There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thanks.

[huylam1Participant]

This reply has been marked as private.

[ZeshanMember]

Hi there,

Thanks for the URL!

Your browser is the one who handles the behaviour of opening a PDF file into a new window. However, you can try using this JavaScript code under Custom > JavaScript in the Customizer:

jQuery(document).ready(function($) {
  $('.x-btn[href*=".pdf"]').attr('download', '');
});

It will download the file instead but will only work on the modern browsers excluding IE and Safari as per this: http://caniuse.com/#feat=download

Thank you!

[huylam1Participant]

Hi there,

I inserted the Javascript into the customizer but it still doesn’t download the pdf even in chrome. Please help. Thank you.

[ZeshanMember]

Hi there,

Thanks for writing back!

I’ve checked your site and it seems you are using a caching plugin. I’d recommend that you clear your caching plugin, and disable it during development. This can cause Customizer changes to not take place on the front end. It will eventually show up when the cache regenerates, but it’s not ideal if you’re looking to see your changes immediately. Caching plugins are best to turn on only when you’ve finished building the site.

After clearing the cache, the code should work in your site. 🙂

Thank you!

[huylam1Participant]

Hi there,

I’ve cleared my caching plugin and also disabled it, but it’s still not downloading the pdf on Chrome. Please help.

[FriechModerator]

Hi There,

Assign an ID to your button:

Then add this under Custom > Global JavaScript in the Customizer.

jQuery( document ).ready(function($) {
	$( "#forcedownload" ).attr( "download", "" );
});

Keep in mind that not all the browsers support the download attribute, so the best way to force download is to zip your file.

Hope it helps, Cheers!

[huylam1Participant]

Hi there,

I’ve added the new javascript to the customizer and also the forcedownload ID to the button, but it still doesn’t download the pdf on Chrome. Please help.

[ChristopherModerator]

Hi there,

Instead of using button element, add a text element and insert following code in text tab :

<a id="forcedownload" class="x-btn my-btn; transparent; x-btn-rounded x-btn-regular" href="http://www.sportsvillage.ca/wp-content/uploads/2016/04/2016-Summer-Audlt-League-Registration-Form-Interactive.pdf" target="_blank" data-options="thumbnail: ''" download="http://www.sportsvillage.ca/wp-content/uploads/2016/04/2016-Summer-Audlt-League-Registration-Form-Interactive.pdf">REGISTER</a>

Hope it helps.

[Author]

Posts