添加download属性后外部图片链接仍打开而非下载的解决办法

你说得没错，浏览器的同源策略会限制download属性对跨域资源的生效，直接给外部图片链接加这个属性只会打开图片，没法触发下载。下面给你两种可行的实现方案：

一、PHP代理方案（不受跨域限制，推荐） #

核心思路是通过PHP脚本先把外部图片拉到服务器，再以附件形式输出给浏览器，以此绕开同源限制。

1. 新建一个PHP脚本（比如命名为download_proxy.php）：

<?php
// 获取传入的图片地址
$img_url = $_GET['url'] ?? '';
if (empty($img_url)) {
    die('请传入有效的图片URL');
}

// 读取图片内容
$img_content = file_get_contents($img_url);
if (!$img_content) {
    die('无法获取目标图片资源');
}

// 提取图片扩展名，也可以直接指定为jpg
$ext = pathinfo(parse_url($img_url, PHP_URL_PATH), PATHINFO_EXTENSION) ?: 'jpg';
$save_name = 'downloaded_img.' . $ext;

// 设置响应头，强制浏览器下载
header('Content-Type: image/' . $ext);
header('Content-Disposition: attachment; filename="' . $save_name . '"');
header('Content-Length: ' . strlen($img_content));

// 输出图片内容
echo $img_content;
exit;
?>

2. 前端链接改成指向这个PHP脚本：

<a href="download_proxy.php?url=https://i.imgur.com/IskAzqA.jpg">Download</a>

如果需要自定义下载文件名，直接在PHP脚本里修改$save_name的值就行。

二、前端jQuery/JS方案（受跨域限制） #

如果目标图片的服务器允许跨域请求（返回了Access-Control-Allow-Origin响应头），可以用JS把图片转成Blob对象，再创建临时链接触发下载：

<a href="javascript:void(0)" id="downloadBtn">Download</a>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$('#downloadBtn').click(function() {
    const targetUrl = 'https://i.imgur.com/IskAzqA.jpg';
    const saveFileName = 'image.jpg';

    fetch(targetUrl)
        .then(res => {
            if (!res.ok) throw new Error('图片加载失败');
            return res.blob();
        })
        .then(blob => {
            // 创建临时URL和a标签
            const tempUrl = URL.createObjectURL(blob);
            const tempLink = document.createElement('a');
            tempLink.href = tempUrl;
            tempLink.download = saveFileName;
            document.body.appendChild(tempLink);
            tempLink.click();
            // 清理临时资源
            setTimeout(() => {
                URL.revokeObjectURL(tempUrl);
                document.body.removeChild(tempLink);
            }, 100);
        })
        .catch(err => {
            alert(err.message);
        });
});
</script>

注意：如果目标图片服务器没开跨域权限，这个方法会直接报错，这时只能用PHP代理方案。

内容的提问来源于stack exchange，提问作者Nicky Jacobo