How to download file without back-end

Asked

Viewed 4,343 times

4

I want to force the download of a file and I’m trying these two ways.

downloading on the same page: 

  var docLocation = window.location.href + 'docs/apresentacao.pdf';
  var iframe = $('<iframe src="' + docLocation + '" class="hidden"></iframe>');

  $('body').append(iframe);

*so the browser tries to interpret the file and returns the message:

Resource Interpreted as Document but transferred with MIME type application/pdf

I saw somewhere saying to convert the MIME type to application/octet-stream with a back-end language and this would force the download.

downloading in new window:

  window.open(docLocation, '_blank');

The problem with this method is that it opens the file in a new window (pop-up), and since browsers block pop-ups by default, the user would have to allow loading of this window which would eventually cause some users not to see.

javascript jquery html front-end

3 answers

4

You can do it like this, if I understand correctly, using the attribute download:

<a href="http://www.w3schools.com/css/trolltunga.jpg" download>download</a>

In your case I’d be:

<a href="http://CAMINHO/PARA/docs/apresentacao.pdf" download>download pdf</a>

To detect if this attribute is compatible with the browser you can use modernize and create an element a to verify:

if("download" in document.createElement("a")) {
    alert('É compatível');
}

Source
Compatibilities
Other Way

  • I always found the solution of the download attribute perfect for these cases, but there is the problem of some browser support. The ideal would be to create a Servlet.

  • If it’s not compatible, you can do a function that for example, gives an Alert saying "Right click to download the file", @Matheus

  • Prior search to avoid duplicates is fundamental for the community: >>>>>>>>>> http://answall.com/a/15842/3635 e >>>>>>>>>>>> http://answall.com/a/13580/3635

  • @Guilhermenascimento sorry, I really did not notice, I confess that I do not have the habit yet. I will be more attentive to this

1


If you want to leave it separate in a function:

function download(uri, nome) {
  var link = document.createElement("a");
  link.download = nome;
  link.href = uri;
  link.click();
}

  • I found the solution interesting, but the browser compatibility is low. Only works with modern browsers, especially in the case of Safari for iOS.

  • I think your code could be improved, because it depends on the name being passed by parameter and in case it doesn’t, the file name would look like 'Undefined.ext'

  • Prior search to avoid duplicates is fundamental for the community: >>>>>>>>>> http://answall.com/a/15842/3635 e >>>>>>>>>>>> http://answall.com/a/13580/3635

0

You can use the following HTML5 TAG:

<a href="your_link" download> file_name </a>

However, it does not work in all browsers. It follows the same documentation from W3schools to be able to identify compatible browsers.

  • Prior search to avoid duplicates is fundamental for the community: >>>>>>>>>> http://answall.com/a/15842/3635 e >>>>>>>>>>>> http://answall.com/a/13580/3635

Browser other questions tagged javascript jquery html front-end

You are not signed in. Login or sign up in order to post.