使用 AJAX 和 HTML 按钮下载 PDF 文件（无 jquery）

Question

我想在按下 HTML 按钮时下载 PDF 文件。我希望点击事件在一个 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>

或者最好使用 content-disposition 附件标头将其添加到后端

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