使用原生AJAX处理文件下载与IE浏览器图片显示问题

引言

在 Web 开发中，通过 AJAX 发起 POST 或 GET 请求以实现文件下载是一种常见需求。然而，开发者不仅需要关注文件下载的过程，还应掌握如何判断下载是否成功，以便及时做出相应的用户反馈。此外，由于不同浏览器对文件路径的解析存在差异，尤其是 IE 浏览器和一些移动设备上的浏览器，可能会出现图片加载失败的问题。本文将介绍如何解决这些问题。

问题背景

通常情况下，通过 HTML 的 img 标签即可轻松显示图片。例如，当图片 URL 如下所示时，在 Chrome、Firefox 和 Safari 等现代浏览器中均能正常显示：
然而，在 IE 浏览器中，同样的图片却无法正确加载。即使对于常见的 .png 或 .jpg 文件格式，也可能遇到类似的问题。那么，如何才能确保这些图片在所有浏览器中都能顺利显示呢？

解决方案思考

既然直接通过 URL 在 IE 中无法显示某些图片，我们是否可以通过 AJAX 直接获取图片数据，再将其展示在页面上或进行下载呢？这种方法不仅能够解决图片显示问题，还能灵活地处理各种类型的文件下载。

实现方法

下面是使用原生 AJAX 获取文件数据的具体实现：

/** * @description 通过 AJAX 请求获取文件 * @param {String} url - 请求接口 * @param {Object} data - 发送的数据 */ function getImageUrl(url, data) { return new Promise((resolve) => { let xhr = new XMLHttpRequest(); let formData = new FormData(); // 使用 FormData 封装数据 if (data) { Object.keys(data).forEach(key => { formData.append(key, data[key]); }); } xhr.open('GET', url, true); xhr.respOnseType= 'blob'; // 设置响应类型为 blob xhr.Onload= function() { if (xhr.status === 200) { let fileUrl = URL.createObjectURL(xhr.response); let fileName = decodeURIComponent(xhr.getResponseHeader('Content-Disposition').split('filename=')[1].replace(/"/g, '')); // 解析文件名 resolve({ fileName, fileUrl, fileBlob: xhr.response }); } }; xhr.send(formData); }); }

上述函数通过 AJAX 请求获取文件数据，并创建一个可访问的 URL，方便后续操作。例如，若需在页面中显示图片或下载文件，可以这样调用：

const handleDownload = (url, data) => { getImageUrl(url, data).then(({ fileName, fileUrl, fileBlob }) => { // 显示图片或下载文件 if (navigator.msSaveBlob) { // 兼容 IE navigator.msSaveOrOpenBlob(fileBlob, fileName); } else { let link = document.createElement('a'); link.href = fileUrl; link.download = fileName; link.click(); } }).catch(error => console.error('Error:', error)); }; 

此代码片段展示了如何通过 POST 方法发送数据，并根据实际情况选择合适的请求方式（GET 或 POST）以及数据格式（如 JSON）。通过这种方式，我们可以有效地解决跨浏览器的图片显示问题，并实现文件的灵活下载。