jQuery实现点击按钮触发PDF下载且不打开新窗口问题求助

问题原因 #

1. 点击按钮只打开PDF不下载：一是代码中添加了target="_blank"会强制打开新标签页，二是浏览器默认对Content-Disposition: inline的PDF资源会直接预览，同域下也会优先忽略a标签的download属性，跨域场景下download属性会完全失效。
2. 加响应头后预览自动下载：预览PDF时发起的资源请求返回的就是Content-Disposition: attachment类型响应头，浏览器拿到该响应就会直接触发下载，和按钮点击操作无关。

解决方案 #

方案1：后端区分预览/下载请求（推荐，性能最好） #

后端添加请求参数判断逻辑：

• 常规预览请求：返回Content-Disposition: inline，保证预览功能正常不会自动下载
• 带下载标识的请求（比如URL加action=download参数）：返回Content-Disposition: attachment;filename=xxx.pdf，触发下载
  前端修改下载逻辑如下：

$("#Download").on("click", function (e) {
      e.preventDefault();
      // 拼接下载参数，触发后端返回attachment响应头
      const downloadUrl = `${pdf_link}?action=download`;
      const link = document.createElement("a");
      link.href = downloadUrl;
      link.download = `${Name_}.pdf`;
      // 兼容部分浏览器需要将a标签先挂载到DOM
      document.body.appendChild(link);
      link.click();
      link.remove();
});

方案2：前端Blob流式处理（无需修改后端配置） #

点击按钮时才发起请求拉取PDF文件流，转成Blob对象后触发下载，不受后端响应头配置影响：

$("#Download").on("click", async function (e) {
      e.preventDefault();
      try {
        // 可在此处添加loading状态提示
        const res = await fetch(pdf_link);
        const blob = await res.blob();
        const blobUrl = window.URL.createObjectURL(blob);
        const link = document.createElement("a");
        link.href = blobUrl;
        link.download = `${Name_}.pdf`;
        document.body.appendChild(link);
        link.click();
        // 释放Blob URL避免内存泄漏
        window.URL.revokeObjectURL(blobUrl);
        link.remove();
        // 可在此处关闭loading状态
      } catch (err) {
        console.error("PDF下载失败：", err);
      }
});

注意事项 #

• 两种方案均删除了target="_blank"配置，不会弹出新标签页
• 方案2若PDF文件较大，请求流需要一定时间，建议添加加载状态提示用户

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