如何在移动端浏览器直接打开PDF文件而不触发下载？

可用解决方案 #

• 方案1：使用内嵌元素替代直接打开Blob地址
  移动端Chrome对直接访问blob://协议的PDF资源默认会触发下载行为，改用<embed>或<iframe>元素内嵌渲染PDF可调用浏览器内置的PDF预览能力，避免触发下载。示例代码如下：

let file = new Blob([response], { type: 'application/pdf' });
const fileURL = URL.createObjectURL(file);
// 动态创建embed元素插入当前页面，也可以插入到自定义的预览弹窗中
const pdfEmbed = document.createElement('embed');
pdfEmbed.type = 'application/pdf';
pdfEmbed.src = fileURL;
pdfEmbed.style.width = '100vw';
pdfEmbed.style.height = '100vh';
document.body.appendChild(pdfEmbed);

• 方案2：新窗口内嵌渲染
  如果需要在新窗口打开，不要直接把Blob地址传给window.open，而是先打开空白窗口，在空白窗口中写入内嵌PDF的代码：

let file = new Blob([response], { type: 'application/pdf' });
const fileURL = URL.createObjectURL(file);
const previewWin = window.open('');
previewWin.document.write(`
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>PDF预览</title>
  <style>
    * { margin: 0; padding: 0; }
    embed { width: 100%; height: 100vh; }
  </style>
</head>
<body>
  <embed src="${fileURL}" type="application/pdf">
</body>
</html>
`);
previewWin.document.close();

• 注意事项
  • 必须确保Blob的MIME类型准确设置为application/pdf，类型错误会导致预览失效
  • 新窗口预览逻辑需要放在用户交互事件（如点击、触摸事件）的同步回调中执行，避免被浏览器的弹窗拦截机制拦截
  • 若用户手动在移动端Chrome设置里开启了PDF默认下载，该用户侧配置无法通过前端代码覆盖，属于正常边界情况

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