ie浏览器怎么用js写图片下载

使用JavaScript在IE浏览器中实现图片下载的方法：

1、利用Blob对象创建图片文件、使用a标签创建下载链接、处理跨域问题、兼容性问题、用户体验细节。通过Blob对象创建图片文件是关键步骤。

在IE浏览器中使用JavaScript实现图片下载可以通过创建一个Blob对象来实现。Blob对象代表一个不可变、原始数据的类文件对象。可以使用Blob对象来保存图像数据，并通过a标签生成下载链接。

一、创建Blob对象

首先，需要将图片数据转换为Blob对象。可以使用XMLHttpRequest来获取图像数据，然后将其转换为Blob对象。

function getImageBlob(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.responseType = 'arraybuffer';
    xhr.onload = function() {
        if (this.status == 200) {
            var blob = new Blob([this.response], {type: 'image/png'});
            callback(blob);
        }
    };
    xhr.send();
}

二、生成下载链接

在获取到Blob对象后，可以创建一个a标签，并设置其href属性为Blob URL，然后模拟点击该链接以触发下载。

function downloadImage(blob, filename) {
    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);
}

三、处理跨域问题

如果图片资源存在跨域问题，需要确保服务器设置了正确的CORS头信息。可以在服务器端添加以下头信息：

Access-Control-Allow-Origin: * Access-Control-Allow-Methods: GET

四、兼容性问题

IE浏览器对Blob对象和a标签的支持较差。需要做一些额外的处理。

function downloadImageForIE(url, filename) {
    if (window.navigator.msSaveOrOpenBlob) {
        getImageBlob(url, function(blob) {
            window.navigator.msSaveOrOpenBlob(blob, filename);
        });
    } else {
        getImageBlob(url, function(blob) {
            downloadImage(blob, filename);
        });
    }
}

五、用户体验细节

为了提升用户体验，可以在下载过程中显示加载动画，并在下载完成后给出提示。

function showLoading() {
    var loading = document.createElement('div');
    loading.id = 'loading';
    loading.innerText = 'Downloading...';
    document.body.appendChild(loading);
}
function hideLoading() {
    var loading = document.getElementById('loading');
    if (loading) {
        document.body.removeChild(loading);
    }
}
function downloadImageWithLoading(url, filename) {
    showLoading();
    downloadImageForIE(url, filename);
    hideLoading();
}

实际调用

可以通过以下代码调用下载函数：

var imageUrl = 'https://example.com/image.png';
var filename = 'downloaded_image.png';
downloadImageWithLoading(imageUrl, filename);

结论

通过以上步骤，可以在IE浏览器中使用JavaScript实现图片下载。核心步骤包括利用Blob对象创建图片文件、使用a标签创建下载链接、处理跨域问题、兼容性问题和用户体验细节。这种方法不仅可以解决IE浏览器的兼容性问题，还可以提升用户体验。