使用window.URL.createObjectURL新标签打开PDF时如何设置自定义文件名

window.URL.createObjectURL() 生成的是浏览器临时内存地址，默认路径为自动生成的UUID，无法直接修改地址本身来实现自定义文件名，可通过在新标签页嵌入PDF的方式实现需求，无需触发文件下载：

可用实现代码 #

// 替换为你需要的自定义文件名
const CUSTOM_PDF_NAME = "自定义文件名.pdf";
const blobUrl = window.URL.createObjectURL(newBlob);
// 打开新标签页
const pdfWindow = window.open();
// 向新标签页写入包含PDF嵌入逻辑的HTML，同时设置页面标题为自定义文件名
pdfWindow.document.write(`
<!DOCTYPE html>
<html>
<head>
  <title>${CUSTOM_PDF_NAME}</title>
  <style>
    * { margin: 0; padding: 0; }
    body, embed { width: 100%; height: 100vh; border: none; }
  </style>
</head>
<body>
  <embed type="application/pdf" src="${blobUrl}" />
</body>
</html>
`);
pdfWindow.document.close();
// 标签页关闭时释放Blob地址，避免内存泄漏
pdfWindow.addEventListener('unload', () => {
  window.URL.revokeObjectURL(blobUrl);
});

注意事项 #

• 生成Blob时需要正确设置MIME类型为application/pdf，否则浏览器可能不会直接渲染PDF而是触发下载，示例：

  const newBlob = new Blob([pdf文件流], { type: 'application/pdf' });
  

• 该方案兼容性覆盖所有主流浏览器，标签页标题会显示你设置的自定义文件名，用户点击PDF自带的下载按钮时，默认保存文件名也会沿用该自定义名称。

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