如何在单击时自动下载 PDF 而不是使用 js 在新选项卡中打开它？

Question

我有一个输入 URL，我想直接下载 pdf 文件而不在新选项卡或同一选项卡上查看它，到目前为止我已经尝试过以下操作但没有任何帮助。 第一次尝试这个

http.success(function (data) {
  var link = document.createElement('a');
  link.href = data.results[0].value.url;
  link.download = data.results[0].value.url.substr(data.results[0].value.url.lastIndexOf('/') + 1);
  link.click();
  document.body.appendChild(link);
  setTimeout(function () {
  document.body.removeChild(link);
     }, 100);
}.bind(this));

此脚本不下载文件。 它在同一选项卡中打开文件。 已经尝试了这些先前回答的问题中的所有答案。 但对我没有任何帮助。 如何使用 javascript 从 url 下载 pdf？ 如何使用js自动下载PDF？ 不用浏览器打开下载pdf

然后我尝试使用这个Blob 。 将 blob 添加到我的脚本中，然后重试。

http.success(function (data) {
  var blob=new Blob([data.results[0].value.url],{ type: "application/pdf" });
  var link = document.createElement('a');
  link.href = window.URL.createObjectURL(blob);
  link.download = data.results[0].value.url.substr(data.results[0].value.url.lastIndexOf('/') + 1);
  link.click();
  document.body.appendChild(link);
  setTimeout(function () {
  document.body.removeChild(link);
     }, 100);
}.bind(this));

但是这次它下载了文件。 但是无法打开它。 下载的文件已损坏。 已经尝试过这些问题的答案。 但对我没有任何作用。 PDF 在使用 URL.createObjectURL 重建后损坏 在 JavaScript 中下载 PDF blob 从缓冲区返回损坏的 pdf Blob 时出现问题

如果有任何其他方法可以直接下载 pdf 文件，请告诉我。 提前致谢。

Answer 1

data.results[0].value.url 中存储了什么？

它只是指向PDF的链接吗？ 如果是这种情况，您需要先获取 pdf 文档。

尝试这个

http.success(function (data) {
  fetch(data.results[0].value.url)
    .then((response) => response.arrayBuffer())
    .then((pdfFile) => {
      const blob = new Blob([pdfFile], { type: "application/pdf" });

      const anchor = document.createElement("a");

      anchor.href = window.URL.createObjectURL(blob);
      anchor.download = "SOME FILENAME.PDF";
      // some browser needs the anchor to be in the doc
      document.body.append(anchor);
      anchor.click();
      anchor.remove();
      // in case the Blob uses a lot of memory
      window.addEventListener(
        "focus",
        () => {
          URL.revokeObjectURL(anchor.href);
        },
        {
          once: true,
        }
      )
    });
})

Answer 2

首先，我建议尝试最简单的例子。

const pdfLink = data.results[0].value.url

const download = (url) => {
    const link = document.createElement('a');

    link.setAttribute('download', 'fileName.pdf');
    link.setAttribute('href', url);
    link.click();
}

downloadBlob = (blob) => download(URL.createObjectURL(blob))

fetch(pdfLink)
  .then(response => response.blob())
  .then(downloadBlob)

Answer 3

我用 MUI + JS 给你分享一段代码

<IconButton variant="contained"
                      sx={{
                        fontSize: '1rem',
                        fontWeight: 'normal',
                        color:'silver',
                      }}
                      component='label'
                      size={'small'}
                      onClick={() => {
                        const url = 'https:.....'
                        fetch(url)
                          .then((res) => { return res.blob(); })
                          .then((data) => {
                            const a = document.createElement("a")
                            a.href = window.URL.createObjectURL(data)
                            a.download = formValues[id]
                            a.click()
                          });
                      }}>
    <VisibilityIcon />
</IconButton>