iFrame加载PDF显示空白求助（PDF-1.4版本异常）

问题根源 #

你这段代码的核心问题是AJAX请求没有指定正确的响应类型。$.ajax默认会把后端返回的二进制PDF数据当作字符串处理，而字符串编码（比如UTF-8）会破坏PDF的二进制结构——%PDF-1.3版本的PDF刚好能兼容这种错误解析，而%PDF-1.4版本包含更多无法被文本编码正确处理的字节，导致生成的Blob文件损坏，最终iFrame加载后显示空白。

另外还有一个小问题：你在设置iframe的src后立刻调用了URL.revokeObjectURL(url)，这会导致iframe还没完成PDF加载，URL就被浏览器回收了，也可能引发加载失败。

修复方案 #

1. 指定AJAX的响应类型 #

在你的settings配置里添加responseType: 'blob'，让jQuery直接把后端返回的二进制数据解析成Blob对象，避免手动创建Blob时的数据损坏。

2. 延迟回收Object URL #

把URL.revokeObjectURL(url)放到iframe的onload事件里，确保PDF加载完成后再回收URL。

修改后的代码 #

$.ajax({
  ...settings, // 保留你原有的settings配置
  responseType: 'blob' // 添加这一行
}).done(function(response){
  const url = window.URL.createObjectURL(response) // 直接用返回的Blob
  const PdfURL = document.getElementById('iframePdfURL') 
  
  // 绑定onload事件，加载完成后回收URL
  PdfURL.onload = function() {
    URL.revokeObjectURL(url);
  }
  
  PdfURL.src = url
}).fail(function(error){
  console.log(error);
})

额外说明 #

• %PDF-1.x确实是PDF的版本标识，1.4相比1.3增加了一些新特性（比如透明图层），这些特性的二进制结构对数据完整性要求更高，所以错误解析后更容易出问题。
• 如果你没法修改AJAX的responseType，也可以尝试把responseType设为arraybuffer，然后用new Blob([response], {type:'application/pdf'})创建Blob，但直接用responseType: 'blob'更简洁可靠。

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