Base64加密PDF在Edge及IE浏览器embed标签无法显示问题求助

这问题我在项目里碰过好多次了——Chrome这类现代浏览器对Base64数据URL的嵌入支持很友好，但Edge（尤其是旧版基于EdgeHTML的版本）和IE确实有不少兼容性坑。咱们一步步来解决：

先搞清楚原因 #

IE和旧版Edge对embed标签处理Base64 PDF的逻辑和Chrome不一样：一方面它们对MIME类型的校验更严格，另一方面embed标签在这些浏览器里的PDF渲染支持本身就有缺陷，经常会出现加载失败或空白的情况。

解决方案1：替换为object标签 #

优先试试把embed换成object标签，IE和旧版Edge对object的支持要稳定得多，代码修改如下：

success: function (data, textStatus, xhr) { 
  $("#url").html(""); 
  // 替换embed为object，明确指定type为application/pdf
  $("#url").append("<object data=\"" + data.encodeUrl + "\" type=\"application/pdf\" class=\"iframe\"></object>"); 
  $("#cameraLink").modal('show'); 
}

注意一定要加上type="application/pdf"，这能帮浏览器正确识别文件类型，减少解析出错的概率。

解决方案2：改用Blob URL（更可靠） #

如果object标签还是不行，那推荐用Blob URL来替代纯Base64数据URL——IE10+和所有Edge版本对Blob URL的支持都更好，而且还能避免Base64字符串过长导致的性能问题。代码示例：

success: function (data, textStatus, xhr) { 
  // 从Base64字符串中提取纯编码部分（去掉data:application/pdf;base64,前缀）
  const base64Content = data.encodeUrl.split(',')[1];
  // 把Base64转成Uint8Array
  const byteCharacters = atob(base64Content);
  const byteNumbers = Array.from(byteCharacters, char => char.charCodeAt(0));
  const byteArray = new Uint8Array(byteNumbers);
  // 创建PDF Blob对象
  const pdfBlob = new Blob([byteArray], { type: 'application/pdf' });
  // 生成Blob URL
  const blobUrl = URL.createObjectURL(pdfBlob);

  $("#url").html(""); 
  // 用iframe加载Blob URL（iframe在IE/Edge中渲染PDF更稳定）
  $("#url").append("<iframe src=\"" + blobUrl + "\" class=\"iframe\"></iframe>"); 
  $("#cameraLink").modal('show'); 

  // 重要：模态框关闭时释放Blob URL，避免内存泄漏
  $("#cameraLink").on('hidden.bs.modal', function() {
    URL.revokeObjectURL(blobUrl);
  });
}

解决方案3：IE专属降级处理 #

如果要兼容IE11及更早版本，那嵌入显示基本没戏了，只能退而求其次，让用户直接下载或打开PDF：

success: function (data, textStatus, xhr) { 
  // 检测是否是IE浏览器
  if (window.navigator && window.navigator.msSaveOrOpenBlob) {
    const base64Content = data.encodeUrl.split(',')[1];
    const byteCharacters = atob(base64Content);
    const byteNumbers = Array.from(byteCharacters, char => char.charCodeAt(0));
    const byteArray = new Uint8Array(byteNumbers);
    const pdfBlob = new Blob([byteArray], { type: 'application/pdf' });
    // 调用IE专属API，让用户选择保存或打开PDF
    window.navigator.msSaveOrOpenBlob(pdfBlob, 'document.pdf');
  } else {
    // 非IE浏览器用object或Blob URL方案
    $("#url").html(""); 
    $("#url").append("<object data=\"" + data.encodeUrl + "\" type=\"application/pdf\" class=\"iframe\"></object>"); 
    $("#cameraLink").modal('show'); 
  }
}

最后总结一下优先级 #

1. 先用object替换embed，最简单且大部分情况能解决问题；
2. 如果还是不行，上Blob URL方案，兼容性覆盖更全；
3. 针对IE，只能降级到下载/打开的方式，毕竟IE对嵌入PDF的支持实在有限。

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