☰

クリック時にブラウザに画像ファイルのダウンロードを強制する 質問する

tag-icon • tag-icon javascript jquery html
クリック時にブラウザに画像ファイルのダウンロードを強制する 質問する

Excel シートをクリックしたときと同じように、ブラウザで画像ファイルをダウンロードする必要があります。

クライアント側プログラミングのみを使用してこれを行う方法はありますか?

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script type="text/javascript" src="Scripts/jquery-1.10.2.js">
        $(document).ready(function () {
            $("*").click(function () {
                $("p").hide();
            });
        });
        </script>
    </head>

    <script type="text/javascript">
        document.onclick = function (e) {
            e = e || window.event;
            var element = e.target || e.srcElement;
            if (element.innerHTML == "Image") {
                //someFunction(element.href);
                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, adress) {
            if (confirm('you wanna save this image?')) {
                window.win = open(adress);
                //response.redirect("~/testpage.html");
                setTimeout('win.document.execCommand("SaveAs")', 100);
                setTimeout('win.close()', 500);
            }
        }
    </script>

    <body>
        <form id="form1" runat="server">
            <div>
                <p>
                    <a href="http://localhost:55298/SaveImage/demo/Sample2.xlsx" target="_blank">Excel</a><br />
                    <a href="http://localhost:55298/SaveImage/demo/abc.jpg" id="abc">Image</a>
                </p>
            </div>
        </form>
    </body>
</html>

Excel シートをダウンロードする場合、どのように動作するのでしょうか (どのブラウザが実行するか)?

ベストアンサー1

HTML5 を使用すると、リンクに属性「download」を追加できます。

<a href="/path/to/image.png" download>

準拠ブラウザでは、同じファイル名 (この例では image.png) の画像をダウンロードするように求められます。

この属性に値を指定すると、それが新しいファイル名になります。

<a href="/path/to/image.png" download="AwesomeImage.png">

アップデート：2018年春現在、これは不可能となっている。クロスhrefオリジン<a href="https://i.imgur.com/IskAzqA.jpg" download>したがって、imgur.com 以外のドメインで作成する場合は、意図したとおりに機能しません。Chrome のサポート終了と削除のお知らせ

おすすめ記事