如何实现PDF下载时不打开新标签页也不跳转当前页面？

问题失效原因 #

你之前的方案触发页面跳转/预览，基本是两个核心原因导致：

1. 服务端返回PDF的响应头未配置Content-Disposition: attachment，浏览器默认会走预览逻辑而非直接下载
2. PDF地址和当前站点跨域，download属性会失效，浏览器自动触发跳转预览

解决方案 #

方案1：可调整后端配置（最稳妥） #

优先让后端接口返回PDF时新增两个响应头：

• Content-Disposition: attachment; filename=自定义文件名.pdf，指定该资源为待下载文件
• Access-Control-Expose-Headers: Content-Disposition，跨域场景下新增，允许前端读取文件名配置
  调整后你之前写的动态a标签逻辑即可直接生效，不会触发跳转。

方案2：仅前端兼容（无法改后端时用） #

通过接口先把PDF拉成二进制Blob流，再生成临时同域链接触发下载，完全不会触发页面跳转或新标签页打开，示例代码如下：

const DownloadAndNext = async () => {
  try {
    // 拉取PDF二进制流
    const res = await fetch(pdfURL, {
      method: 'GET',
      credentials: 'include', // 接口需要带cookie时加该参数
      headers: {
        // 接口需要鉴权的话在这里加token等请求头
        // Authorization: 'Bearer 你的鉴权token'
      }
    });
    // 转成Blob对象
    const blob = await res.blob();
    // 生成临时同域链接
    const blobUrl = window.URL.createObjectURL(blob);
    // 触发下载
    const link = document.createElement('a');
    link.href = blobUrl;
    link.download = `${props.visitType}.pdf`; // 自定义下载文件名
    document.body.appendChild(link);
    link.click();
    // 清理临时资源避免内存泄漏
    document.body.removeChild(link);
    window.URL.revokeObjectURL(blobUrl);

    // 在这里写下载完成后的后续逻辑
  } catch (err) {
    console.error('PDF下载失败：', err);
  }
};

注意：如果PDF地址跨域，需要后端配置CORS规则允许你的站点发起请求，否则fetch会报错。

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