如何禁用iOS Safari中iframe内容的自动下载？

问题场景 #

我实现了一个带打印和下载功能的PDF模态框：

• 下载功能使用application/octet-stream类型的Blob，运行正常
• 打印功能使用application/pdf类型的Blob
• 但在iOS Safari中打开模态框时，会自动弹出下载提示并完成下载，该问题在桌面设备及Chrome浏览器中不存在
• 移除iframe的src属性后，自动下载提示不再出现

相关代码 #

Blob创建代码 #

const downloadBlob = new Blob([int8Array], { type: 'data:application/octet-stream;' });
const printBlob = new Blob([int8Array], { type: 'application/pdf;' });
const downloadFileURL = URL.createObjectURL(downloadBlob);
const printFileURL = URL.createObjectURL(printBlob);

iframe渲染代码 #

{fileType === 'application/pdf' ? (
  <>
    <div id="wrapperDiv" ref={wrapperRef}></div>
    <iframe id="documentObject" src={`${fileSrc}#view=fitH`} title={fileName} style={{ display: 'none' }}>
      This browser does not support this document type. Please download the document to view it:
    </iframe>
  </>
)}

打印按钮代码 #

const element: Window = window.frames;
element[0].focus();
element[0].print();

问题原因 #

iOS Safari对隐藏iframe加载PDF的处理逻辑与其他浏览器不同：当display:none的iframe加载application/pdf类型资源时，浏览器会判定该资源未被用户主动请求展示，从而触发下载行为，而非静默渲染。

解决方案 #

方案1：延迟设置iframe的src属性 #

不在模态框初始化时设置iframe的src，而是等到用户点击打印按钮时再赋值并触发打印，避免页面加载时自动触发下载：

// 初始化时iframe留空src
<iframe id="documentObject" src="" title={fileName} style={{ display: 'none' }}>
  This browser does not support this document type. Please download the document to view it:
</iframe>

// 修改打印按钮点击逻辑
const handlePrint = () => {
  const iframe = document.getElementById('documentObject');
  if (!iframe) return;
  // 赋值打印用的Blob URL
  iframe.src = printFileURL;
  // 监听加载完成后触发打印
  iframe.onload = () => {
    const printFrame = window.frames[0];
    printFrame.focus();
    printFrame.print();
    // 打印完成后清空src，避免后续意外触发下载
    iframe.src = '';
  };
};

方案2：调整iframe的隐藏方式 #

将display:none改为视觉隐藏但仍保持"可见状态"的样式，让iOS Safari认为资源是用于展示而非下载：

<iframe 
  id="documentObject" 
  src={`${fileSrc}#view=fitH`} 
  title={fileName} 
  style={{ 
    position: 'absolute',
    top: '-9999px',
    left: '-9999px',
    width: '1px',
    height: '1px'
  }}
>
  This browser does not support this document type. Please download the document to view it:
</iframe>

这种方式既不会影响页面布局，又能让浏览器正常渲染PDF，避免自动触发下载。

方案3：统一Blob类型，通过属性区分下载/打印 #

不需要创建两个不同类型的Blob，仅使用application/pdf类型，下载时通过a标签的download属性强制触发下载：

// 只创建一个PDF类型的Blob
const pdfBlob = new Blob([int8Array], { type: 'application/pdf' });
const pdfFileURL = URL.createObjectURL(pdfBlob);

// 下载按钮逻辑
const handleDownload = () => {
  const a = document.createElement('a');
  a.href = pdfFileURL;
  a.download = fileName; // 指定下载文件名
  a.click();
};

// 打印逻辑保持不变
const handlePrint = () => {
  const element: Window = window.frames;
  element[0].focus();
  element[0].print();
};

这种方式消除了不同Blob类型带来的浏览器行为差异，同时保证下载和打印功能正常运行。

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