Angular 4中IE从Blob Storage打开图片新标签页失效，Chrome正常

看起来你遇到的是IE对Blob URL处理的兼容性问题——Chrome等现代浏览器支持直接用window.open()打开Blob链接，但IE并不支持这种方式，它有自己专属的API来处理Blob文件的打开/保存。

下面是针对你的场景的修改方案，完美兼容Chrome和IE：

步骤1：修改点击事件处理逻辑 #

我们需要先获取图片对应的Blob对象，然后根据浏览器类型选择不同的处理方式：

onImageClick($event) {
  const imgElement = $event.srcElement as HTMLImageElement;
  const blobUrl = imgElement.src;

  // 判断是否为IE浏览器
  const isIE = window.navigator.userAgent.indexOf('MSIE ') > -1 || window.navigator.userAgent.indexOf('Trident/') > -1;

  if (isIE) {
    // IE下需先获取Blob对象，再用专属API打开
    fetch(blobUrl)
      .then(response => response.blob())
      .then(blob => {
        // 可选：给Blob设置默认文件名，IE会用这个名称作为保存选项的默认值
        const fileName = 'preview-image.jpg';
        window.navigator.msSaveOrOpenBlob(blob, fileName);
      })
      .catch(error => console.error('获取Blob失败:', error));
  } else {
    // 现代浏览器直接用window.open打开Blob链接
    window.open(blobUrl, '_blank');
  }
}

步骤2：兼容IE低版本的备选方案 #

如果你的项目中IE对fetch支持不佳，可以换成XMLHttpRequest来获取Blob：

onImageClick($event) {
  const imgElement = $event.srcElement as HTMLImageElement;
  const blobUrl = imgElement.src;
  const isIE = window.navigator.userAgent.indexOf('MSIE ') > -1 || window.navigator.userAgent.indexOf('Trident/') > -1;

  if (isIE) {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', blobUrl);
    xhr.responseType = 'blob';
    xhr.onload = () => {
      const blob = xhr.response;
      window.navigator.msSaveOrOpenBlob(blob, 'preview-image.jpg');
    };
    xhr.send();
  } else {
    window.open(blobUrl, '_blank');
  }
}

优化建议 #

如果在生成Blob URL的阶段你已经持有原始的Blob对象，建议直接把这个对象存在组件属性中，这样就不用再次发起请求获取Blob，性能更优：

// 假设你生成Blob URL的代码如下
const imageBlob: Blob = ...; // 你的原始Blob对象
const blobUrl = URL.createObjectURL(imageBlob);
// 把Blob对象保存到组件属性
this.currentImageBlob = imageBlob;

之后在点击事件里直接用this.currentImageBlob，省去fetch/xhr的步骤：

if (isIE) {
  window.navigator.msSaveOrOpenBlob(this.currentImageBlob, 'preview-image.jpg');
} else {
  window.open(blobUrl, '_blank');
}

额外注意事项 #

• IE的msSaveOrOpenBlob方法会强制弹出一个对话框，让用户选择保存或打开图片，这是IE的安全机制限制，无法跳过。
• 确保你的Blob URL没有被提前释放（比如调用了URL.revokeObjectURL()），否则会导致获取Blob失败。

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