ラベル ダウンロード属性の失敗の解決策

Web ページで添付ファイルのダウンロード機能を実現するために、通常はタグの 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>