前端通过PDF路径转Blob下载后无法打开，求解决方案

你当前代码的核心错误是把PDF文件的URL字符串当成了文件二进制内容来创建Blob。下载后的文件本质是一段文本（就是你传入的URL），而非真正的PDF文件，所以打开时会提示加载失败。

方案一：直接使用原URL创建下载链接（推荐，更简洁） #

如果你的前端和PDF文件所在域名同域，或者后端配置了正确的CORS和Content-Disposition响应头，直接用后端返回的URL即可：

const link = document.createElement("a");
link.href = invoicePath; // 直接使用后端返回的PDF地址
link.setAttribute("download", `invoice_${id}.pdf`);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);

方案二：通过Fetch获取二进制内容后生成Blob（跨域场景适用） #

如果存在跨域问题，或者后端未配置合适的响应头，先通过Fetch请求获取PDF的二进制数据，再生成Blob：

async function downloadInvoice() {
  try {
    // 发起请求获取PDF二进制内容
    const response = await fetch(invoicePath);
    if (!response.ok) throw new Error('文件请求失败');
    const blob = await response.blob();
    
    // 创建下载链接
    const url = window.URL.createObjectURL(blob);
    const link = document.createElement("a");
    link.href = url;
    link.setAttribute("download", `invoice_${id}.pdf`);
    
    document.body.appendChild(link);
    link.click();
    
    // 清理资源
    document.body.removeChild(link);
    window.URL.revokeObjectURL(url); // 释放URL对象，避免内存泄漏
  } catch (err) {
    console.error('下载出错:', err);
    // 可添加用户友好提示，比如 alert('发票下载失败，请稍后重试')
  }
}

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