クライアント側プログラミングを使用してブラウザに画像を強制的にダウンロードするにはどうすればよいですか?

クライアント側プログラミングを使用した画像のブラウザダウンロードの強制

背景

クリック時Excel シートまたはその他のダウンロード可能なファイルの場合、通常、ブラウザーはダウンロード プロセスをシームレスに開始します。ただし、この動作を特にイメージ ファイルに対して複製する必要があります。

イメージ ダウンロードの実装

クライアント側プログラミングのみを使用して、次のようにイメージのダウンロードを実現できます。 :

document.onclick = function (e) {
    e = e || window.event;
    var element = e.target || e.srcElement;
    if (element.innerHTML == "Image") {
        var name = element.nameProp;
        var address = element.href;
        saveImageAs1(element.nameProp, element.href);
        return false; // Prevent default action and stop event propagation
    }
    else
        return true;
};

function saveImageAs1(name, address) {
    if (confirm('you wanna save this image?')) {
        window.win = open(address);
        setTimeout('win.document.execCommand("SaveAs")', 100);
        setTimeout('win.close()', 500);
    }
}

このコードは、画像要素のクリック イベントをインターセプトし、ユーザーに、 [名前を付けて保存] ダイアログ ボックス。

Excel ダウンロードの場合

Excel のダウンロードの場合、ブラウザはダウンロード プロセスを内部で処理します。 MIME タイプに基づいてファイル タイプを識別し、追加のプログラミングを行わずに適切なダウンロード動作をトリガーします。

HTML5 'download' 属性

ただし、新しいブラウザは の「download」属性要素。画像のダウンロードを開始するためのより便利な方法を提供します。

<a href="http://localhost:55298/SaveImage/demo/abc.jpg" download>Image</a>

この属性は、指定されたファイル名または指定されていない場合は元のファイル名で画像をダウンロードするようにブラウザに要求します。この方法を使用したクロスオリジン ダウンロードは、セキュリティ上の懸念により 2018 年以降サポートされなくなったことに注意してください。

以上がクライアント側プログラミングを使用してブラウザに画像を強制的にダウンロードするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。