理解原生download属性的局限性
在html中，<a> 标签的 download 属性通常用于指示浏览器下载链接指向的资源，而不是导航到该资源。当链接指向的资源与当前页面同源时，这个属性通常工作良好。然而，当尝试下载来自不同域（跨域）的https资源时，尤其是某些服务器配置或浏览器安全策略限制下，简单的 download 属性可能无法按预期工作，浏览器可能会选择直接打开资源而不是下载。为了克服这一限制，我们可以借助javascript实现一个更强大的强制下载机制。
使用JavaScript实现强制下载
核心思想是利用 XMLHttpRequest (XHR) 对象异步获取外部资源，将其作为二进制数据（Blob）处理，然后动态创建一个隐藏的 <a> 标签，并利用 URL.createObjectURL() 方法为Blob数据生成一个本地URL，最后通过模拟点击该隐藏链接来触发下载。
1. HTML结构准备
首先，我们需要一个触发下载的链接。为了将下载链接和文件名传递给JavaScript函数，我们使用 data-href 属性来存储实际的下载URL，download 属性存储建议的文件名，并使用 onclick 事件调用我们的JavaScript函数。
<a class="text-1 text-uppercase" href="#" data-href='https://i.imgur.com/U2KQsBD.jpeg' download="image.jpeg" onclick='downloadForce(this)'> 下载图片 </a>
- href="#": 这是一个占位符，防止浏览器默认导航行为。
- data-href: 存储实际的外部资源URL。
- download: 存储希望下载时显示的文件名。
- onclick='downloadForce(this)': 当点击链接时，调用 downloadForce 函数，并将当前链接元素作为参数传递。
2. JavaScript下载逻辑
接下来，定义 downloadForce 函数，它将处理资源的获取和下载逻辑。
<script>
function downloadForce(linkElement) {
// 1. 获取链接元素上的数据
var url = linkElement.getAttribute("data-href");
var fileName = linkElement.getAttribute("download");
// 2. 更新链接文本以提供用户反馈
linkElement.innerText = "下载中...";
// 3. 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
// 设置响应类型为blob，以便处理二进制数据
xhr.responseType = "blob";
// 4. 定义请求加载完成后的处理逻辑
xhr.onload = function() {
if (xhr.status === 200) { // 确保请求成功
// 获取Blob对象
var blob = this.response;
// 创建一个URL对象，用于生成Blob的临时URL
var urlCreator = window.URL || window.webkitURL;
var imageUrl = urlCreator.createObjectURL(blob);
// 5. 创建一个临时的<a>标签来触发下载
var tempLink = document.createElement('a');
tempLink.href = imageUrl;
tempLink.download = fileName; // 设置下载文件名
// 6. 模拟点击下载
document.body.appendChild(tempLink); // 必须添加到DOM中才能模拟点击
tempLink.click();
document.body.removeChild(tempLink); // 下载触发后移除临时链接
// 7. 释放Blob URL，防止内存泄漏
urlCreator.revokeObjectURL(imageUrl);
} else {
console.error("下载失败，状态码: " + xhr.status);
alert("文件下载失败，请稍后再试。");
}
// 8. 恢复链接文本
linkElement.innerText = "下载图片";
};
// 9. 定义请求错误处理
xhr.onerror = function() {
console.error("网络或请求错误发生。");
alert("文件下载失败，请检查网络连接。");
linkElement.innerText = "下载图片"; // 恢复链接文本
};
// 10. 发送请求
xhr.send();
}
</script>完整示例代码
将上述HTML和JavaScript代码结合，即可实现一个功能完整的外部HTTPS资源强制下载按钮。
立即学习“Java免费学习笔记（深入）”；
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript强制下载外部HTTPS资源</title>
<style>
body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f4f4f4; }
.text-1 { font-size: 16px; color: #fff; background-color: #007bff; padding: 10px 20px; text-decoration: none; border-radius: 5px; transition: background-color 0.3s ease; }
.text-1:hover { background-color: #0056b3; }
.text-uppercase { text-transform: uppercase; }
</style>
</head>
<body>
<a class="text-1 text-uppercase" href="#"
data-href='https://i.imgur.com/U2KQsBD.jpeg'
download="image.jpeg"
onclick='downloadForce(this)'>
下载图片
</a>
<script>
function downloadForce(linkElement){
var url = linkElement.getAttribute("data-href");
var fileName = linkElement.getAttribute("download");
// 提供用户反馈
var originalText = linkElement.innerText;
linkElement.innerText = "下载中...";
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.responseType = "blob"; // 关键：将响应视为二进制大对象
xhr.onload = function(){
if (xhr.status === 200) {
var blob = this.response;
var urlCreator = window.URL || window.webkitURL;
var blobUrl = urlCreator.createObjectURL(blob); // 创建Blob URL
var tempLink = document.createElement('a');
tempLink.href = blobUrl;
tempLink.download = fileName; // 设置下载文件名
// 模拟点击下载
document.body.appendChild(tempLink);
tempLink.click();
document.body.removeChild(tempLink);
// 释放Blob URL
urlCreator.revokeObjectURL(blobUrl);
} else {
console.error("下载失败，状态码: " + xhr.status);
alert("文件下载失败，请稍后再试。");
}
linkElement.innerText = originalText; // 恢复按钮文本
};
xhr.onerror = function() {
console.error("网络或请求错误发生。");
alert("文件下载失败，请检查网络连接。");
linkElement.innerText = originalText; // 恢复按钮文本
};
xhr.send();
}
</script>
</body>
</html>注意事项与最佳实践
- 跨域请求（CORS）: 尽管XHR用于获取资源，但如果目标服务器没有正确配置CORS（Cross-Origin Resource Sharing）头部，浏览器可能会阻止JavaScript获取跨域资源。例如，服务器需要设置 Access-Control-Allow-Origin: * 或允许你的域名。对于图片、PDF等常见静态资源，许多CDN和图床通常会默认配置CORS。
- 大文件下载: 对于非常大的文件，此方法会将整个文件先加载到客户端内存中（作为Blob），这可能会消耗大量内存并影响性能。对于超大文件，可能需要考虑流式下载或服务器端代理下载。
- 用户体验: 在下载过程中提供明确的用户反馈（例如将按钮文本改为“下载中...”）至关重要，以避免用户重复点击或误解。
- 错误处理: 完善 xhr.onerror 和 xhr.onload 中的错误处理逻辑，向用户提供有用的提示。
- 内存管理: 使用 URL.revokeObjectURL() 释放通过 createObjectURL() 创建的URL。这有助于浏览器回收内存，尤其是在频繁下载或处理大量Blob时。
- 安全性: 确保你只从可信的源下载文件。虽然此方法绕过了某些浏览器的下载限制，但并不能规避潜在的安全风险。
总结
通过JavaScript和 XMLHttpRequest 结合 Blob 对象，我们可以有效地实现对外部HTTPS资源的强制下载功能，尤其适用于原生 download 属性失效的场景。这种方法提供了一种灵活且强大的解决方案，能够增强Web应用处理文件下载的能力，并提供更好的用户体验。正确理解其工作原理和注意事项，将有助于开发者构建更健壮的下载功能。
