【问题标题】:Javascript code works fine to download images but not to download a PDF fileJavascript 代码可以很好地下载图像但不能下载 PDF 文件
【发布时间】:2021-12-07 05:38:04
【问题描述】:

以下代码可以正常下载远程图像,但在更改它以下载远程 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>

【问题讨论】:

    标签: javascript html pdf download


    【解决方案1】:

    您可以将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'

    【讨论】:

    • 下载属性在我正在使用的 php 文件中不起作用,我不知道如何实现 mode:'no-cors' :/
    • 嗨,我认为问题在于存储 pdf 的 cors 策略,即 www.w3.org 。我认为您的代码正在运行,只是 pdf 源策略不允许您下载它。您可以尝试使用免费的 cors 代理,例如 cors-anywhere.herokuapp.com 来测试您的代码,希望对您有所帮助
    • 天啊!!!我在这个问题上花了很多时间,最后你是对的,问题出在源策略上,非常感谢:)
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2021-10-22
    • 2012-08-29
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多