使用 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) {&nbsp; const a = document.createElement('a');&nbsp; a.href = url;&nbsp; a.download = filename;&nbsp; a.style.display = `none`;&nbsp; document.body.appendChild(a);&nbsp; a.click();&nbsp; document.body.removeChild(a);}请注意添加到文档中，这是链接算作真正链接所必需的。

Answer 2

我同意迈克，如果您想添加下载时的时间戳，则不需要任何 ajax 来下载它，只需更改下载属性动态<a&nbsp;href="url"&nbsp;onclick="this.download&nbsp;=&nbsp;`PdfName-${+new&nbsp;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();