在网页中为了实现附件下载功能通常会使用 a 标签的 download 属性,但是对于跨域的图片资源,浏览器会直接打开这个图片,而不是下载。
<a download href="https://images.pexels.com/photos/15494499/pexels-photo-15494499.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1">图片下载</a>
方案1
将图片地址页面同源处理,可以在nginx中配置代理转发到指定的图片地址
location /image/ {
proxy_pass https://images.pexels.com/
}
方案2
在 JavaScript 使用 ajax 获取图片内容,然后动态创建文件地址,通过模拟 a 标签的点击事件完成下载
<a href="#" onclick="download()" title="点击下载">图片下载</a>
<script>
function download() {
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
let link = document.createElement("a");
let url = window.URL.createObjectURL(xhr.response);
link.href = url;
link.download = '1';
link.click();
window.URL.revokeObjectURL(url);
}
}
// 需要指定响应类型为 blob
xhr.responseType = "blob";
xhr.open("get", "https://images.pexels.com/photos/15494499/pexels-photo-15494499.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
xhr.send();
}
</script>