Angular13升级后Navigator不存在msSaveOrOpenBlob属性求替代方案

升级Angular 13同步更新TypeScript版本后，TS内置的Web API类型定义已移除早已废弃的IE/旧版Edge专有API msSaveOrOpenBlob 的类型声明，因此会抛出类型不存在的报错。

方案1：全浏览器兼容的标准实现（推荐） #

完全替换原有逻辑，兼容所有现代浏览器及旧版IE/Edge，无需依赖废弃API：

const downloadBlob = (blob: Blob, filename: string) => {
  // 兼容旧版IE/Edge专有API
  if ('msSaveOrOpenBlob' in window.navigator) {
    (window.navigator as any).msSaveOrOpenBlob(blob, filename);
    return;
  }
  // 现代浏览器标准下载逻辑
  const objectUrl = URL.createObjectURL(blob);
  const downloadLink = document.createElement('a');
  downloadLink.href = objectUrl;
  downloadLink.download = filename;
  downloadLink.click();
  URL.revokeObjectURL(objectUrl);
}

// 调用方式和原逻辑一致
downloadBlob(blob, filename);

方案2：仅解决类型报错（保留原有逻辑） #

如果项目确实需要保留原有msSaveOrOpenBlob调用逻辑，可通过两种方式处理TS类型校验问题：

• 临时类型断言：调用时对navigator做临时类型断言绕开检查

  if ((window.navigator as any).msSaveOrOpenBlob) {
    (window.navigator as any).msSaveOrOpenBlob(blob, filename);
  }
  

• 全局扩展类型声明：在项目全局类型定义文件中补充msSaveOrOpenBlob的类型定义

  // 可放在 src/global.d.ts 文件中，文件不存在可自行创建
  interface Navigator {
    msSaveOrOpenBlob?: (blob: Blob, filename: string) => void;
  }
  

添加后TypeScript会自动识别该属性，不再抛出类型不存在的错误。

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