IE11中window.open打开DOTx文件弹窗：如何在当前页显示下载选项

嘿，这个IE11的兼容性问题确实挺让人头疼的，我来帮你搞定它！

首先得明确：IE11对window.open处理Office类文档（比如DOTx）的逻辑和Firefox不一样，它会强制新开标签页来触发文件的打开/保存对话框，而我们需要的是直接在当前上下文弹出那个带open、save、saveAs选项的窗口。

核心解决方案：使用IE11专属的msSaveOrOpenBlob API #

IE11提供了专门的API来处理文件的保存/打开操作，window.navigator.msSaveOrOpenBlob可以直接触发系统级的文件操作对话框，完全不会新开标签页，完美符合你的需求。下面是具体实现步骤：

1. 通过AJAX获取DOTx文件的二进制数据
   我们需要先把文件以二进制形式拉取到前端，这样才能转为Blob对象供IE11处理。
2. 将二进制数据转为Blob对象
3. 调用msSaveOrOpenBlob弹出对话框

兼容多浏览器的代码示例 #

function openDotxFile(filePath, fileName) {
  // 创建AJAX请求获取文件二进制数据
  const xhr = new XMLHttpRequest();
  xhr.open('GET', filePath, true);
  xhr.responseType = 'blob'; // 指定响应类型为Blob

  xhr.onload = function() {
    if (xhr.status === 200) {
      const blob = xhr.response;
      
      // 判断是否是IE11（支持msSaveOrOpenBlob）
      if (window.navigator && window.navigator.msSaveOrOpenBlob) {
        // IE11直接调用专属API，弹出对话框
        window.navigator.msSaveOrOpenBlob(blob, fileName);
      } else {
        // 其他浏览器（比如Firefox）用a标签模拟
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = fileName;
        document.body.appendChild(a);
        a.click();
        // 清理URL对象，避免内存泄漏
        setTimeout(() => {
          URL.revokeObjectURL(url);
          document.body.removeChild(a);
        }, 100);
      }
    }
  };

  xhr.send();
}

// 调用示例：假设你的DOTx路径是'/dotx/template.dotx'，文件名是'template.dotx'
// 在链接的点击事件里调用这个函数即可
document.querySelector('#yourLinkId').addEventListener('click', function(e) {
  e.preventDefault(); // 阻止默认的链接跳转
  openDotxFile('/dotx/template.dotx', 'template.dotx');
});

为什么之前的方法不行？ #

• 用window.open(..., "_parent")或window.open(..., "_self")：IE11会把这类文件的打开操作视为新的导航，所以强制新开标签页，无法覆盖当前页面。
• 指定窗口大小的window.open：虽然能弹出对话框，但IE11还是会创建那个小窗口作为文件处理的载体，导致额外的空白弹窗，不符合需求。

而msSaveOrOpenBlob是IE专门为文件操作设计的API，直接和系统交互，跳过了浏览器的标签页导航逻辑，所以能完美实现你要的效果。

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