用户点击下载多媒体文件(图片/视频等)，最简单的方式：
<a href=‘url‘ download="filename.ext">下载</a>
如果url指向同源资源，是正常的。
如果url指向第三方资源，download会失效，表现和不使用download时一致——浏览器能打开的文件，浏览器会直接打开，不能打开的文件，会直接下载。浏览器打开的文件，可以手动下载。
解决方案一：将文件打包为.zip/.rar等浏览器不能打开的文件下载。
解决方案二：通过后端转发，后端请求第三方资源，返回给前端，前端使用file-saver等工具保存文件。
如果url指向的第三方资源配置了CORS，download依然无效，但可以通过xhr请求获取文件，然后下载到本地。
/** * 用FileSave保存文件 * @param url */export function downloadUrlFile(url) { ?const xhr = new XMLHttpRequest(); ?xhr.open(‘GET‘, url, true); ?xhr.responseType = ‘blob‘; ?xhr.setRequestHeader(‘Authorization‘, ‘Basic a2VybWl0Omtlcm1pdA==‘); ?xhr.onload = () => { ???if (xhr.status === 200) { ?????// 获取图片blob数据并保存 ?????saveAs(xhr.response, ‘abc.jpg‘); ???} ?}; ??xhr.send();} /** * URL方式保存文件到本地 * @param name 文件名 * @param data 文件的数据 */function save(name, data) {var urlObject = window.URL || window.webkitURL || window;var export_blob = new Blob([data]);var save_link = document.createElementNS(‘http://www.w3.org/1999/xhtml‘, ‘a‘)save_link.href = urlObject.createObjectURL(export_blob);save_link.download = name;_fakeClick(save_link);}浏览器已经限制死跨域下载多媒体文件的各种方式。
使用h5 <a>标签 href='url' download 下载踩过的坑
原文地址：https://www.cnblogs.com/yuerdong/p/9768054.html