正文

如何用JavaScript让IE浏览器自动下载文件

/0 浏览量
0401

当你在网页上想要让用户下载一个文件时，通常会使用HTML的<a>标签，并设置其href属性为文件的URL，然后通过JavaScript来触发下载。然而，在IE浏览器中，这种方法可能不会按照预期工作，因为IE对<a>标签的download属性支持有限。以下是如何在IE浏览器中实现自动下载文件的方法。

1. 使用window.open方法

你可以通过window.open方法来打开一个新的浏览器窗口，并将文件内容作为URL传递给这个窗口。在IE中，这种方法可以触发文件的下载。

示例代码：

function downloadFile(fileName, content) {
    var blob = new Blob([content], { type: 'application/octet-stream' });
    var url = window.URL.createObjectURL(blob);
    var a = document.createElement('a');
    a.style.display = 'none';
    a.href = url;
    a.download = fileName;
    document.body.appendChild(a);
    a.click();
    window.URL.revokeObjectURL(url);
    document.body.removeChild(a);
}

在这个例子中，fileName是下载文件的名称，content是要下载的内容。这段代码首先创建了一个Blob对象，然后使用URL.createObjectURL方法生成了一个临时的URL。接着创建了一个不可见的<a>标签，设置其href属性为Blob对象的URL，并设置download属性为文件名。通过调用a.click()来触发下载，最后清理创建的资源。

2. 使用ActiveXObject

对于旧版本的IE浏览器，可以使用ActiveXObject来创建一个临时的文件，并触发下载。

示例代码：

function downloadFileIE(fileName, content) {
    var blob = new Blob([content], { type: 'application/octet-stream' });
    var activex = new ActiveXObject('Microsoft.XMLHTTP');
    activex.Open("POST", window.location.href, false);
    activex.setRequestHeader("Content-Type", "application/octet-stream");
    activex.Send(blob);

    var saveBlob = function() {
        var saveLink = document.createElement('a');
        saveLink.href = activex.responseBody;
        saveLink.download = fileName;
        document.body.appendChild(saveLink);
        saveLink.click();
        document.body.removeChild(saveLink);
    };

    activex.onreadystatechange = function() {
        if (activex.readyState === 4) {
            saveBlob();
        }
    };
}

在这个例子中，我们首先创建了一个Blob对象，然后使用ActiveXObject来发送一个POST请求，请求体是Blob对象。当服务器响应后，我们通过ActiveXObject的responseBody属性获取二进制数据，并创建一个临时的<a>标签来触发下载。

总结

以上两种方法都可以在IE浏览器中实现自动下载文件。第一种方法适用于较新的IE浏览器，而第二种方法适用于旧版本的IE浏览器。你可以根据实际情况选择合适的方法来实现你的需求。

-- 展开阅读全文 --