下载带有 AJAX 和 HTML 按钮的 PDF 文件（无 jquery）

Question

I want to download a PDF file when I press an HTML button. I want the click event to be in a JS file.

I need something that do the same thig as the code below but in a JS file:

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

I tried to follow this but it doesn't create my button:

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

Just made it work, here is my working code

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();

Answer 2

If you already have the URL, and you just want the file to be downloaded, use an invisible link, and click it for the user:

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);
}

Note the adding to the document, which is required for the link to count as a real link.

Answer 3

I would agree with mike, you don't need any ajax to download it if you want to add the timestamp for when you downloaded it, just change the download attribute dynamical

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

or better yet add it in the backend using content-disposition attachment header