Best IT Recipes

Force download pdf link using javascript / ajax / jquery

Suppose we have a link in pdf format http://manuals.info.apple.com/en/iphone_user_guide.pdf "(for example, so that you know that the file is not on my server, I only have a link) .. Now I have to provide a button on my site that will upload the file.

I tried various things like window.open, href etc., but it opens the link in another window. I know, because now all browsers have an adobe plugin that opens it in another window, but still I don’t provide the user with the option to download, rather than open it, using client-side scripts.

plz help .. thanks

+21
javascript
Jun 19 '10 at 21:09
source share
6 answers

Use the HTML5 Download Attribute

<a href="iphone_user_guide.pdf" download="iPhone User Guide.PDF">click me</a>

Warning: at the time of writing, this does not work in IE / Safari, see: caniuse.com/#search=download

Change: If you are looking for a real JavaScript solution, please see Lajarre's answer

+24
Sep 24 '13 at 13:57
source share

Here is a Javascript solution (for people like me who were looking for an answer to the header):

 function SaveToDisk(fileURL, fileName) { // for non-IE if (!window.ActiveXObject) { var save = document.createElement('a'); save.href = fileURL; save.target = '_blank'; save.download = fileName || 'unknown'; var evt = new MouseEvent('click', { 'view': window, 'bubbles': true, 'cancelable': false }); save.dispatchEvent(evt); (window.URL || window.webkitURL).revokeObjectURL(save.href); } // for IE < 11 else if ( !! window.ActiveXObject && document.execCommand) { var _window = window.open(fileURL, '_blank'); _window.document.close(); _window.document.execCommand('SaveAs', true, fileName || fileURL) _window.close(); } }

source: http://muaz-khan.blogspot.fr/2012/10/save-files-on-disk-using-javascript-or.html

Unfortunately, IE11 works for me, which does not accept the new MouseEvent. In this case, I use the following:

 //... try { var evt = new MouseEvent(...); } catch (e) { window.open(fileURL, fileName); } //...
+33
Mar 25 '15 at 20:43
source share

JavaScript is very difficult, if not impossible (?). I would suggest using some kind of language with code like PHP, C # or Java. If you used PHP, you could do something like this on the page your button is sent to:

 <?php header('Content-type: application/pdf'); header('Content-disposition: attachment; filename=filename.pdf'); readfile("http://manuals.info.apple.com/en/iphone_user_guide.pdf"); ?>

This also works for JS (from http://www.phpbuilder.com/board/showthread.php?t=10149735 ):

 <body> <script> function downloadme(x){ myTempWindow = window.open(x,'','left=10000,screenX=10000'); myTempWindow.document.execCommand('SaveAs','null','download.pdf'); myTempWindow.close(); } </script> <a href=javascript:downloadme('http://manuals.info.apple.com/en/iphone_user_guide.pdf');>Download this pdf</a> </body>
+6
Jun 19 '10 at 21:16
source share

If htaccess is an option, this will result in downloading all PDF files instead of opening in a browser.

 <FilesMatch "\.(?i:pdf)$"> ForceType application/octet-stream Header set Content-Disposition attachment </FilesMatch>
+2
Jul 28 '15 at 17:58
source share

Here is a great example of downloading a file using javaScript.

Usage: download_file(fileURL, fileName);

+2
May 22 '18 at 7:32
source share

In javascript, use the preventDefault () method of the args parameter of the event.

 <a href="no-script.html">Download now!</a> $('a').click(function(e) { e.preventDefault(); // stop the browser from following window.location.href = 'downloads/file.pdf'; });
0
Jun 08 '15 at 16:48
source share


More articles:


All Articles