Скачать PDF-файл с AJAX и кнопкой HTML (без jquery)

Question

Я хочу скачать файл PDF, когда нажимаю кнопку HTML. Я хочу, чтобы событие click было в файле JS.

Мне нужно что-то такое же, что и код ниже, но в файле JS:

    <a href="url" download>
        <button>Download</button>
    </a>

Я пытался следовать этомуно это не создает мою кнопку:

var req = new XMLHttpRequest();
req.open("GET", "url", true);
req.responseType = "blob";

req.onreadystatechange = function () {
  if (req.readyState === 4 && req.status === 200) {

    // test for IE

    if (typeof window.navigator.msSaveBlob === 'function') {
      window.navigator.msSaveBlob(req.response, "PdfName-" + new Date().getTime() + ".pdf");
    } else {
      var blob = req.response;
      var link = document.createElement('a');
      link.href = window.URL.createObjectURL(blob);
      link.download = "PdfName-" + new Date().getTime() + ".pdf";

      // append the link to the document body

      document.body.appendChild(link);

      link.click();
    }
  }
};
req.send();

Answer 1

Если у вас уже есть URL-адрес, и вы просто хотите, чтобы файл был загружен, используйте невидимую ссылку и щелкните ее для пользователя:

function triggerDownload(url, filename) {
  const a = document.createElement('a');
  a.href = url;
  a.download = filename;
  a.style.display = `none`;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
}

Обратите внимание на добавление в документ, которыйтребуется, чтобы ссылка считалась реальной.

Answer 2

Я бы согласился с Майком, вам не нужен ajax для его загрузки, если вы хотите добавить временную метку для загрузки, просто измените атрибут загрузки динамически

<a href="url" onclick="this.download = `PdfName-${+new Date}.pdf`">Download</a>

или еще лучшедобавьте его в бэкэнд, используя заголовок вложения для размещения содержимого

Answer 3

Только что заставил это работать, вот мой рабочий код

const blob = new Blob([response], { type: 'application/pdf' });
const link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = "filename.pdf";
link.click();