iOS 17.4下网页内嵌PDF无法显示问题求助

问题确认 #

iOS 17.4（撰写本文时的最新版本）下，所有浏览器均存在网页内嵌PDF无法显示的问题——这里明确指的是与其他HTML内容同页展示的内嵌PDF，而非在新标签页单独打开的PDF。

具体表现为：页面中的<object>元素存在且尺寸设置正确，但内容完全空白；无论是使用浏览器原生PDF渲染能力，还是PDF.js这类第三方查看器，问题都会出现。需要注意的是，Navigator.pdfViewerEnabled返回true，说明浏览器本身具备原生PDF显示能力。

相关代码片段：

const blob = new Blob(arrayBuffer, { type : "application/pdf" });
const documentUrl = URL.createObjectURL(blob);

const resource = document.createElement("object");
resource.type = "application/pdf";
resource.data = documentUrl;

// 或使用PDF.js的场景：
// const resource = document.createElement("iframe");
// resource.src = "/pdf.js/web/viewer.html?file=" + documentUrl;
// resource.title = "(…)"; // 无障碍适配

resourceWrapper.appendChild(resource);

该问题仅出现在iOS 17.4，其他操作系统或浏览器引擎下均正常。

可能原因 #

这是iOS 17.4的WebKit引擎引入的兼容性Bug，核心原因是该版本调整了内嵌资源的安全策略，导致通过URL.createObjectURL()生成的Blob PDF URL无法在<object>或<iframe>这类内嵌容器中正常加载。

临时解决方案 #

针对该问题，可尝试以下几种临时修复方案：

• 替换Blob URL为服务器HTTP/HTTPS URL：将PDF文件上传至服务器，使用完整的网络地址替代本地Blob URL，这是最稳定的解决方案。
• 转换为Base64内嵌：如果必须使用本地生成的PDF，可将Blob转换为Base64编码后直接赋值给object的data属性（注意大文件可能影响页面性能）：

  const base64Pdf = btoa(String.fromCharCode(...new Uint8Array(arrayBuffer)));
  resource.data = `data:application/pdf;base64,${base64Pdf}`;
  

• 优化PDF.js的URL传递：使用PDF.js时，对Blob URL进行encodeURIComponent编码，确保参数传递正确：

  resource.src = `/pdf.js/web/viewer.html?file=${encodeURIComponent(documentUrl)}`;
  

目前苹果开发者社区已有大量类似反馈，该Bug预计会在后续iOS版本中得到修复。

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