Как сделать кнопку скачать?

Question

[partyzanx]

<div class='btn' onclick="window.open('/Worksheets/grammar_hsk1/Basic_singular_pronouns_3-1-0-9.pdf')">Download</div>

Есть такая кнопка, которая открывает файл в новом окне, а как можно сделать, чтобы он не открывал в новом окне, а скачивал? И чтобы это было внутри html кода, не меня div на a.

Answer 1

[Александр Таратин]

https://jsfiddle.net/khm857zj/

<div class="btn" id="dbut" data-path="http://lorempixel.com/400/200/cats/">Download</div>

function downloadFile(url){
	var link = document.createElement('a');
  link.href = url;
  link.target="_blank";
  link.download='';
  
  var event = document.createEvent("MouseEvents");
  event.initMouseEvent("click");
  link.dispatchEvent(event);
}

var but = document.getElementById('dbut')
but.addEventListener('click', function(){
	downloadFile(but.getAttribute('data-path'));
})

Comments

[partyzanx]

Спасибо, выход из положения!

Answer 2

[Олег]

А нафига так? Проще

<a href="/Worksheets/grammar_hsk1/Basic_singular_pronouns_3-1-0-9.pdf"> Открыть файл</a>
<a href="/Worksheets/grammar_hsk1/Basic_singular_pronouns_3-1-0-9.pdf" download>Скачать файл</a>

Comments

[Игорь]

HTML5, самое правильное решение!

[tecs]

спс. самое правильное решение

Answer 3

[Anton Filippov]

Что с вами не так? Вы уже задавали этот вопрос и получили ответ
Как сделать кнопку скачать?

То что у вас добавилось уточнение - можно было сделать в том же вопросе, а не спамить.

Comments

[partyzanx]

Со мной не так или с программистами, которые как бараны толкают мне свой a download?

[Александр Таратин]

partyzanx, В чем проблема сделать ссылку вместо кнопки?

[partyzanx]

Александр Таратин, под неё скрипт настроен, я не могу его перестроить. То есть, когда я делаю тег

<a class='downloadbtn' onclick="window.open('/Worksheets/grammar_hsk1/Basic_singular_pronouns_3-1-0-9.pdf')">Download</a>

то код не работает

<script>
 $(function() {
  var btn = $(".downloadbtn");
  btn.on("click", function() {
    
    $(this).addClass('downloadbtn-progress');
    setTimeout(function() {
      btn.addClass('downloadbtn-fill')
    }, 500);
    
    setTimeout(function() {
      btn.removeClass('downloadbtn-fill')
    }, 4100);
    
    setTimeout(function() {
      btn.addClass('downloadbtn-complete')
    }, 4400);
  
  });
})

[Anton Filippov]

partyzanx, лол