如何使用JS实现点击直接下载PDF而非在浏览器标签页打开？

前述方案失效原因 #

• 动态a标签加download属性失效：download属性仅对同源资源生效，跨域资源会被浏览器自动忽略该属性，直接触发默认预览逻辑；若服务端返回的Content-Disposition响应头为inline也会优先触发预览。
• Blob方案文件损坏：直接将PDF的URL字符串传入Blob构造函数，生成的文件内容是URL文本而非PDF的二进制流，自然无法正常打开。

正确实现方案 #

需要先请求获取PDF的完整二进制内容，再转成Blob对象触发下载，代码示例如下：

http.success(async function (data) {
  const pdfUrl = data.results[0].value.url;
  // 提取文件名
  const saveFilename = pdfUrl.slice(pdfUrl.lastIndexOf('/') + 1);
  // 请求PDF二进制内容
  const response = await fetch(pdfUrl);
  // 转为Blob对象
  const pdfBlob = await response.blob();
  // 生成下载链接
  const downloadLink = document.createElement('a');
  downloadLink.href = window.URL.createObjectURL(pdfBlob);
  downloadLink.download = saveFilename;
  // 必须先将标签插入DOM，部分浏览器否则会触发失败
  document.body.appendChild(downloadLink);
  downloadLink.click();
  // 清理资源，避免内存泄漏
  setTimeout(() => {
    document.body.removeChild(downloadLink);
    window.URL.revokeObjectURL(downloadLink.href);
  }, 100);
}.bind(this));

注意事项 #

• 若资源跨域，需要服务端配置CORS规则允许当前域名发起请求，否则fetch会被浏览器拦截。
• 若使用XMLHttpRequest而非fetch实现请求，需要手动设置xhr.responseType = 'blob'才能拿到正确的二进制数据。
• 若可控制资源的服务端配置，最优方案是直接给PDF资源返回响应头Content-Disposition: attachment; filename="自定义文件名.pdf"，此时不需要前端做任何额外处理，点击资源链接就会直接触发下载。

内容的提问来源于stack exchange，提问作者Rajasirpi