Отдача файла на скачивание

451

23 июля 2017, 08:48

Можно ли не используя серверную часть, а jQuery, не открывать изображение, а сразу отдать его на скачивание?

Answer 1

Без использования серверной части нужное вам действие можно реализовать, используя атрибут download:

<a href="http://www.mrwallpaper.com/wallpapers/new_tn2s/lamborghini-racing-car_tn2.jpg" download>Скачать изображение</a>

Подробнее про атрибут download - тут.

Поддержку браузерами можно увидеть тут.

Если нужно решение именно на js/jQuery, можно копнуть в сторону DownloadJS и ему подобных готовых решений, если сумеете найти аналоги.

Пример работы:

window.downloadFile = function(sUrl) { 
 
  //iOS devices do not support downloading. We have to inform user about this. 
  if (/(iP)/g.test(navigator.userAgent)) { 
    alert('Your device does not support files downloading. Please try again in desktop browser.'); 
    return false; 
  } 
 
  //If in Chrome or Safari - download via virtual link click 
  if (window.downloadFile.isChrome || window.downloadFile.isSafari) { 
    //Creating new link node. 
    var link = document.createElement('a'); 
    link.href = sUrl; 
 
    if (link.download !== undefined) { 
      //Set HTML5 download attribute. This will prevent file from opening if supported. 
      var fileName = sUrl.substring(sUrl.lastIndexOf('/') + 1, sUrl.length); 
      link.download = fileName; 
    } 
 
    //Dispatching click event. 
    if (document.createEvent) { 
      var e = document.createEvent('MouseEvents'); 
      e.initEvent('click', true, true); 
      link.dispatchEvent(e); 
      return true; 
    } 
  } 
 
  // Force file download (whether supported by server). 
  if (sUrl.indexOf('?') === -1) { 
    sUrl += '?download'; 
  } 
 
  window.open(sUrl, '_self'); 
  return true; 
} 
 
window.downloadFile.isChrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1; 
window.downloadFile.isSafari = navigator.userAgent.toLowerCase().indexOf('safari') > -1;

<a href="#" onclick="downloadFile('https://thumb7.shutterstock.com/display_pic_with_logo/52627/52627,1331024875,4/stock-vector-vector-illustration-of-soft-colored-abstract-background-96845341.jpg');">Скачать картинку</a>