5154

在Web开发中，通过 <a> 标签的 href 属性实现文件下载是一种极为常见的做法，开发者期望用户点击链接后，文件能直接保存到本地，当涉及到老旧的 Internet Explorer (IE) 浏览器时，开发者常常会遇到下载报错、无反应或在浏览器中直接打开文件而非下载的情况，本文将深入剖析此问题的核心原因,并提供行之有效的解决方案。

问题根源分析

IE 浏览器在处理 href 下载时的行为与现代浏览器（如 Chrome, Firefox, Edge）存在显著差异,这主要源于以下几个关键因素。

download 属性的兼容性问题

现代HTML5标准引入了 <a> 标签的 download 属性，它的作用是告知浏览器该链接的目标是下载资源，而不是导航到它,开发者可以通过此属性指定下载文件时使用的默认文件名。

<!-- 现代浏览器中会下载并命名为 "my-report.pdf" -->
<a href="/files/report.pdf" download="my-report.pdf">下载报告</a>

IE 浏览器（包括最后一个版本 IE11）均不支持 download 属性，在 IE 中，即使设置了 download 属性，浏览器也会忽略它，其行为将完全取决于文件的 MIME 类型和服务器配置,这就导致了下载行为的不确定性。

MIME 类型与浏览器默认行为

浏览器如何处理一个链接，很大程度上取决于服务器返回的 Content-Type 响应头。

• 可预览类型：如果服务器返回的 Content-Type 是 application/pdf、image/jpeg 或 text/plain 等，IE 和其他浏览器一样，可能会尝试在浏览器窗口或内置的插件中直接打开这个文件,而不是触发下载。
• 未知或强制下载类型：Content-Type 是 application/octet-stream（二进制流）或其他浏览器无法识别的类型,浏览器通常会弹出下载对话框。

由于 IE 缺乏像 download 属性这样的前端强制下载手段，它对 MIME 类型的依赖性更强，更容易出现“直接打开”而非“下载”的“问题”。

跨域资源共享 (CORS) 限制

当下载的文件与当前页面不在同一个域下时，就会涉及跨域问题，如果文件服务器没有正确配置 CORS 响应头（如 Access-Control-Allow-Origin），IE 出于安全考虑，可能会阻止通过 JavaScript 创建的下载链接的访问,导致下载失败。

核心解决方案

针对以上问题，我们可以从服务器端和客户端两个层面入手，以确保在 IE 浏览器中也能实现稳定可靠的文件下载。

服务器端设置响应头（推荐方案）

这是最健壮、最兼容的解决方案，它不依赖任何浏览器特性，而是通过 HTTP 协议标准来指导浏览器行为，我们可以在服务器返回文件时，添加 Content-Disposition 响应头。

Content-Disposition 响应头可以指示响应内容应以何种方式展示，当设置为 attachment 时，它会强制浏览器将文件作为附件下载,并可以指定默认文件名。

响应头设置示例：

无论在何种浏览器中，包括 IE，只要收到这个响应头，都会优先触发文件下载对话框，此方案是处理下载问题的“银弹”。

针对 IE 的客户端 JavaScript 兼容方案

如果无法修改服务器端配置，我们可以在前端通过 JavaScript 为 IE 提供特殊处理，核心思路是使用 IE 特有的 API window.navigator.msSaveOrOpenBlob。

此方法是微软为 IE10+ 引入的，专门用于保存或打开 Blob 对象（文件对象）。

实现逻辑如下：

1. 使用 fetch 或 XMLHttpRequest 获取文件数据。
2. 将响应数据转换为 Blob 对象。
3. 检测是否为 IE 浏览器。
4. 如果是 IE，调用 window.navigator.msSaveOrOpenBlob(blob, fileName)。
5. 如果是现代浏览器，创建一个带有 download 属性的 <a> 标签并模拟点击。

function downloadFile(url, fileName) {
  fetch(url)
    .then(response => response.blob())
    .then(blob => {
      // 处理 IE 浏览器
      if (window.navigator && window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveOrOpenBlob(blob, fileName);
      } else {
        // 处理现代浏览器
        const link = document.createElement('a');
        link.href = URL.createObjectURL(blob);
        link.download = fileName;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        URL.revokeObjectURL(link.href); // 释放内存
      }
    });
}

IE href 下载问题的根源在于其对现代 Web 标准（如 download 属性）的支持缺失，以及其对服务器 MIME 类型的强依赖，最可靠的解决之道是在服务器端配置 Content-Disposition: attachment 响应头，从根本上统一所有浏览器的下载行为，若仅能进行前端操作，则需借助 window.navigator.msSaveOrOpenBlob 这一 IE 特有 API 进行兼容性处理,从而为用户提供一致的下载体验。

相关问答 FAQs

问1：为什么同一个下载链接，在 Chrome 浏览器中可以正常下载文件，但在 IE 中却直接在浏览器里打开了？ 答： 这最可能是因为您使用了 HTML5 的 download 属性来强制下载，Chrome 等现代浏览器支持该属性，会忽略文件的 MIME 类型并直接下载，而 IE 浏览器不支持 download 属性，它的行为完全取决于服务器返回的 Content-Type。Content-Type 是 application/pdf 这类可预览类型，IE 就会默认在内部打开它，解决方法是让后端在响应头中加入 Content-Disposition: attachment。

问2：如果我没有权限修改服务器配置，有没有纯前端的办法来兼容 IE 的下载？ 答： 有的，您可以通过 JavaScript 为 IE 编写兼容代码，使用 fetch 或 XMLHttpRequest 请求文件资源并将其转换为 Blob 对象，通过判断 window.navigator.msSaveOrOpenBlob 方法是否存在来识别 IE 浏览器，如果存在，就调用此方法并传入 Blob 对象和文件名来触发下载，对于其他现代浏览器，则继续使用创建带有 download 属性的 <a> 标签并模拟点击的方式,这样可以实现一套代码兼容不同浏览器的下载功能。