在 Chrome 上下载外部 PDF 文件时 HTML5 下载属性不起作用答案

【问题标题】：HTML5 download attribute not working when download external PDF file on Chrome在 Chrome 上下载外部 PDF 文件时 HTML5 下载属性不起作用
【发布时间】：2018-09-15 00:57:39
【问题描述】：

代码很简单：

<a download href="http://www.pdf995.com/samples/pdf.pdf">Download</a>

我希望它保存 pdf 文件，但它总是在浏览器上打开文件。

它适用于其他文件类型，只是 PDF 文件有问题。

【问题讨论】：

我相信这是在浏览器端可配置的。您可以选择天气来下载或可视化 PDF
您可以添加更多上下文吗？什么浏览器/平台？你是通过JS来阻止它的吗？
这能回答你的问题吗？ PDF file not downloading with HTML5 download attribute

标签： javascript html

【解决方案1】：

见the MDN documentation:

此属性仅适用于同源 URL。

据推测，您看到它“工作”的其他文件类型是默认行为是下载文件的文件类型。

【讨论】：

我不确定，但也许你是对的。无论如何，我通过获取 blob 数据并在本地构建文件 url 以进行下载。

【解决方案2】：

如果您尝试获取的 URL 具有 Access-Control-Allow-Origin 标头，则可以使用 fetch 和 blob 解决此问题：

function forceDownload(blob, filename) {
  // Create an invisible anchor element
  const anchor = document.createElement('a');
  anchor.style.display = 'none';
  anchor.href = window.URL.createObjectURL(blob);
  anchor.setAttribute('download', filename);
  document.body.appendChild(anchor);

  // Trigger the download by simulating click
  anchor.click();

  // Clean up
  window.URL.revokeObjectURL(anchor.href);
  document.body.removeChild(anchor);
}

function downloadResource(url, filename) {
  fetch(url, {
    headers: new Headers({
      Origin: window.location.origin,
    }),
    mode: 'cors',
  })
    .then(response => response.blob())
    .then(blob => forceDownload(blob, filename))
    .catch(e => console.error(e));
}

downloadResource('https://memegen.link/xy/fetch/all_the_things.jpg?watermark=none');

这有一些限制：

blob 的文件大小限制约为 500MB
某些网站不允许跨域请求，导致出现如下错误

无法加载https://example.com/example.jpg：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此不允许访问源“https://example.com”。

参考 1：Leeroy in https://stackoverflow.com/a/49500465/1268612

参考 2：https://davidwalsh.name/javascript-download

完整解释：https://blog.logrocket.com/programmatic-file-downloads-in-the-browser-9a5186298d5c/

【讨论】：

这个解决方案对我有用。非常感谢。一个小细节：我不需要从 url 解析文件名。我设置了没有文件名值的下载属性，并且名称是自动推断的。
太好了，感谢@JoãoMelo 的反馈和改进！我已经删除了这部分代码。