Chromium Edge中navigator.msSaveBlob的替代方案是什么？

navigator.msSaveBlob是旧版EdgeHTML内核Edge的私有API，Chromium Edge基于Chromium内核，已经移除了这个非标准API，改用Web标准方案实现Blob下载需求，以下是两种常用替代方案：

方案一：使用URL.createObjectURL()配合a标签（通用兼容） #

这是目前最广泛兼容的方案，支持所有现代浏览器（包括Chromium Edge、Chrome、Firefox等），核心逻辑是为Blob创建临时URL，通过模拟a标签点击触发下载：

function saveBlob(blob, filename) {
  // 为Blob创建临时URL
  const blobUrl = URL.createObjectURL(blob);
  // 创建隐藏的a标签
  const downloadLink = document.createElement('a');
  downloadLink.href = blobUrl;
  // 指定下载文件名
  downloadLink.download = filename;
  // 将a标签添加到页面（部分浏览器需要此步骤才能触发点击）
  document.body.appendChild(downloadLink);
  // 触发点击下载
  downloadLink.click();
  // 移除a标签并释放临时URL资源
  document.body.removeChild(downloadLink);
  URL.revokeObjectURL(blobUrl);
}

方案二：使用File System Access API（原生体验） #

如果需要更贴近系统原生的保存体验（允许用户选择保存路径），可以使用Chromium Edge 86及以上版本支持的showSaveFilePicker()API，该API属于File System Access标准，需要在安全上下文（HTTPS或localhost）中使用，且必须由用户交互触发（如按钮点击）：

async function saveBlobWithFilePicker(blob, defaultFilename) {
  try {
    // 调用文件选择器，让用户选择保存位置和文件名
    const fileHandle = await window.showSaveFilePicker({
      suggestedName: defaultFilename,
      // 可指定允许的文件类型，根据实际需求调整
      types: [
        {
          description: '文本文件',
          accept: { 'text/plain': ['.txt'] }
        }
      ]
    });
    // 创建可写入流并写入Blob内容
    const writableStream = await fileHandle.createWritable();
    await writableStream.write(blob);
    await writableStream.close();
  } catch (error) {
    console.error('文件保存失败:', error);
  }
}

兼容旧版Edge的写法 #

如果需要同时兼容旧版EdgeHTML Edge和Chromium Edge，可以添加API判断逻辑：

function downloadBlob(blob, filename) {
  if (navigator.msSaveBlob) {
    // 旧版EdgeHTML Edge专属逻辑
    navigator.msSaveBlob(blob, filename);
  } else {
    // 现代浏览器通用逻辑
    const blobUrl = URL.createObjectURL(blob);
    const downloadLink = document.createElement('a');
    downloadLink.href = blobUrl;
    downloadLink.download = filename;
    document.body.appendChild(downloadLink);
    downloadLink.click();
    document.body.removeChild(downloadLink);
    URL.revokeObjectURL(blobUrl);
  }
}

内容的提问来源于stack exchange，提问作者Ikim SS