理解原生download属性的局限性
在html中， 标签的 download 属性通常用于指示浏览器下载链接指向的资源，而不是导航到该资源。当链接指向的资源与当前页面同源时，这个属性通常工作良好。然而，当尝试下载来自不同域（跨域）的https资源时，尤其是某些服务器配置或浏览器安全策略限制下，简单的 download 属性可能无法按预期工作，浏览器可能会选择直接打开资源而不是下载。为了克服这一限制，我们可以借助javascript实现一个更强大的强制下载机制。
使用JavaScript实现强制下载
核心思想是利用 XMLHttpRequest (XHR) 对象异步获取外部资源，将其作为二进制数据（Blob）处理，然后动态创建一个隐藏的 标签，并利用 URL.createObjectURL() 方法为Blob数据生成一个本地URL，最后通过模拟点击该隐藏链接来触发下载。
1. HTML结构准备
首先，我们需要一个触发下载的链接。为了将下载链接和文件名传递给JavaScript函数，我们使用 data-href 属性来存储实际的下载URL，download 属性存储建议的文件名，并使用 onclick 事件调用我们的JavaScript函数。
下载图片
- href="#": 这是一个占位符，防止浏览器默认导航行为。
- data-href: 存储实际的外部资源URL。
- download: 存储希望下载时显示的文件名。
- onclick='downloadForce(this)': 当点击链接时，调用 downloadForce 函数，并将当前链接元素作为参数传递。
2. JavaScript下载逻辑
接下来，定义 downloadForce 函数，它将处理资源的获取和下载逻辑。
完整示例代码
将上述HTML和JavaScript代码结合，即可实现一个功能完整的外部HTTPS资源强制下载按钮。
立即学习“Java免费学习笔记（深入）”；
JavaScript强制下载外部HTTPS资源
下载图片
注意事项与最佳实践
- 跨域请求（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应用处理文件下载的能力，并提供更好的用户体验。正确理解其工作原理和注意事项，将有助于开发者构建更健壮的下载功能。
