在 react 中通过 blob 生成 pdf 时，默认无法直接设置下载文件名或控制新窗口标题；本文介绍使用 `` 标签配合 `download` 属性和 `target="_blank"` 的标准方案，实现自定义文件名、新标签页打开 pdf 的完整流程。
在现代浏览器中，window.open() 打开 Blob URL 时，无法通过 JavaScript 修改新窗口的 URL 路径或文件名，且 download 属性在 window.open() 场景下完全无效（仅对 <a> 标签生效）。因此，原代码中 window.open() + location.href 的方式本质上无法满足“指定文件名”的需求——浏览器会忽略 Blob URL 的文件名信息，仅显示随机字符串（如 blob:https://...）。
正确做法是：利用 <a> 元素的 download 属性触发受控下载，并通过 target="_blank" 实现新标签页打开效果。虽然 download 属性在跨源 Blob 下可能被忽略（导致仍为下载而非预览），但对同源 Blob（如本例中由前端构造的 PDF）而言，主流浏览器（Chrome、Edge、Firefox 103+）均支持在新标签页中既预览 PDF 又显示自定义文件名（地址栏仍显示 blob URL，但页面标题/下载提示中体现 fileName）。
以下是优化后的完整实现：
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
downloadDocument = (fileContent, fileName = 'document.pdf') => {
try {
const pdfContent = this.base64ToArrayBuffer(fileContent);
const pdfBlob = new Blob([pdfContent], { type: 'application/pdf' });
const url = URL.createObjectURL(pdfBlob);
const link = document.createElement('a');
link.href = url;
link.download = fileName; // ✅ 关键：指定文件名（仅对同源 Blob 生效）
link.target = '_blank'; // ✅ 新标签页打开
link.rel = 'noopener noreferrer'; // ✅ 安全最佳实践
// 触发点击（需插入 DOM 才能生效，但可不挂载）
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
// 清理内存
URL.revokeObjectURL(url);
} catch (error) {
console.error('PDF 生成失败:', error);
alert('无法生成 PDF，请检查文件内容');
}
};
base64ToArrayBuffer = (base64) => {
const binaryString = atob(base64);
const len = binaryString.length;
const bytes = new Uint8Array(len);
for (let i = 0; i < len; i++) {
bytes[i] = binaryString.charCodeAt(i);
}
return bytes;
};⚠️ 重要注意事项：
- download 属性仅在同源上下文生效：若 PDF 内容来自跨域 API，浏览器将忽略该属性并强制下载（无法预览），此时建议后端返回带 Content-Disposition: inline; filename="xxx.pdf" 的响应头；
- Safari 对 download + _blank 支持有限（可能仍下载而非预览），建议检测用户代理并提供备用方案（如降级为 window.open(url) 并提示用户右键另存）；
- 务必调用 URL.revokeObjectURL() 避免内存泄漏；
- fileName 应过滤非法字符（如 /, \, ?, * 等），推荐使用 encodeURIComponent(fileName).replace(/[%]/g, '_') 做基础净化。
综上，该方案以标准 Web API 为基础，无需额外依赖，兼顾兼容性与可维护性，是 React 应用中处理 Blob PDF 文件名定制的推荐实践。
