Angular中使用window.open打开Blob格式PDF时如何修改新标签页标题

在Angular项目中调用window.open打开新浏览器标签页、加载服务端返回的Blob格式PDF时，默认新标签页标题会显示为Blob URL对应的十六进制串，可通过以下两种方案动态修改标题。

你当前的基础实现代码如下：

const file = new Blob([data], {type:'application/pdf'});
const fileURL = URL.createObjectURL(file);
window.open(fileURL, '_blank');

可行解决方案 #

方案1（兼容Chrome、Edge浏览器） #

延迟修改新窗口的document属性实现标题修改，延迟时长可根据实际PDF加载速度调整：

const w = window.open(fileURL, '_blank');
setTimeout(() => { 
  w.document.title = 'Document'; 
}, 500);

方案2（兼容Chrome、火狐、Edge全浏览器） #

在新打开的空白页中嵌套iframe加载PDF资源，直接自定义外层页面的标题，兼容性更稳定：

const w = window.open('', '_blank');
w.document.write(`
<html>
  <head>
    <title>Document</title>
    <style>* { margin: 0; border: none; }</style>
  </head>
  <body style="width: 100%; height: 100vh;">
    <iframe src="${fileURL}" style="width: 100%; height: 100%;"></iframe>
  </body>
</html>
`);
w.document.close();

注意：使用完Blob URL后建议调用URL.revokeObjectURL(fileURL)主动释放内存，避免内存泄漏。

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