ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

javascript – 强制浏览器在点击时下载图像文件

2019-09-15 12:45:28  阅读:103  来源: 互联网

标签:html javascript jquery


我需要浏览器下载图像文件,就像点击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工作表(浏览器做什么),它应该如何工作?

解决方法:

使用HTML5,您可以将属性“download”添加到链接中.

< a href =“/ path / to / image.png”下载>

然后,兼容的浏览器将提示下载具有相同文件名的图像(在此示例中为image.png).

如果为此属性指定值,那么它将成为新文件名:

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

更新:从2018年春季开始,对于跨源hrefs不再可能.因此,如果您想创建< a href =“https://i.imgur.com/IskAzqA.jpg”下载>在imgur.com以外的域名上,它将无法按预期工作. Chrome deprecations and removals announcement

标签:html,javascript,jquery
来源: https://codeday.me/bug/20190915/1804786.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有