如何在單擊時自動下載 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>