JavaScript：如何稳定设置加载Blob文件流的新标签页标题？

核心思路是生成一个自定义的临时HTML页面，在页面中嵌入Blob内容并设置好目标标题，再通过用户触发的点击操作打开这个HTML页面。这种方式既不会触发浏览器的弹窗拦截，又能完全自定义新标签页的标题。

具体实现步骤 #

• 构建包含自定义标题和Blob内容嵌入的HTML字符串
• 将HTML字符串转换为Blob对象
• 生成该HTML Blob的URL
• 通过创建<a>标签触发点击打开新标签页
• 及时清理生成的URL避免内存泄漏

代码示例（以PDF文件为例） #

// 自定义标题
const newTabTitle = `${gDocName} - ${gDocSubPath}`;
// 原Blob文件（你的目标Blob对象）
const fileBlob = blob;

// 构建HTML内容：设置标题，嵌入Blob文件
const htmlContent = `
<!DOCTYPE html>
<html>
<head>
    <title>${newTabTitle}</title>
    <style>
        body, html { margin: 0; padding: 0; height: 100%; }
        iframe { width: 100%; height: 100%; border: none; }
    </style>
</head>
<body>
    <iframe src="${URL.createObjectURL(fileBlob)}"></iframe>
</body>
</html>
`;

// 将HTML转为Blob对象
const htmlBlob = new Blob([htmlContent], { type: 'text/html' });
const htmlUrl = URL.createObjectURL(htmlBlob);

// 创建a标签触发打开新标签页
const link = document.createElement('a');
link.href = htmlUrl;
link.target = '_blank';
link.rel = 'noopener noreferrer';
link.click();

// 延迟清理URL，确保页面已加载完成
setTimeout(() => {
    URL.revokeObjectURL(htmlUrl);
    URL.revokeObjectURL(fileBlob);
}, 1000);
link.remove();

关键说明 #

• 此方案通过用户触发的<a>标签点击打开页面，完全符合浏览器安全规则，不会被拦截。
• 新标签页加载的是自定义HTML页面，标题直接写在<title>标签中，稳定生效。
• 针对不同类型的Blob（如图片、文本），可调整HTML中的嵌入方式：图片用<img>标签，文本直接写入页面即可。
• 必须调用URL.revokeObjectURL清理生成的URL，避免内存占用过高。

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