首页 > 解决方案 > Javascript 代码可以很好地下载图像但不能下载 PDF 文件

问题描述

以下代码可以正常下载远程图像,但在更改它以下载远程 PDF 文件时不起作用,这是我正在使用的代码:

<a href="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf" data-remote>Remote PDF</a>

 <script defer type="text/javascript">
    const a = document.querySelector('a[data-remote]')
    a.addEventListener('click', async (e) => {
      e.preventDefault()
      const file = await fetch(e.target.href);
      const blob = await file.blob();
      const blobUrl = URL.createObjectURL(blob);
      const downloadLink = document.createElement("a");
      downloadLink.href = blobUrl;
      downloadLink.download = 'file.pdf';

      downloadLink.click();
    })
  </script>

标签: javascripthtmlpdfdownload

解决方案


您可以将download属性添加到a标记并删除脚本以下载 pdf。

<a href="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf" download >Remote PDF</a>

或者如果你想用js下载,可以考虑mode:'no-cors'在fetch的时候加上


推荐阅读