Question

我使用下面的代码下载具有给定名称的图像。但这似乎并没有下载带有图像扩展的图像。

这是HTML

<a id="btnDownload" href="www.mywebsite.com/images/myimage.jpg" onClick="downloadImage(www.mywebsite.com/images/myimage.jpg);" >download</a>

和代码

function downloadImage(sUrl){    
    window.URL = window.URL || window.webkitURL;
    var xhr = new XMLHttpRequest();
    xhr.open('GET', sUrl, true);
    xhr.responseType = 'blob';
    xhr.onload = function(e) {
        var res = xhr.response;
        var blob = new Blob([res], {type:'image'});
        url = window.URL.createObjectURL(blob);
        var a = document.createElement("a");
        a.href = url;
        a.download = "My image name";
        document.body.appendChild(a);
        a.click();
    };
    xhr.send();
}

我想要的是我希望下载的图像带有＆＃34;我的图像名称＆＃34;。＆＃34;扩展名＆＃34;。这里的图像确实有像jpeg，png，gif这样的替代扩展。但是这段代码总是在没有扩展名的情这里有任何变化吗？

Answer 1

要获得示例中的扩展程序，您可以执行以下操作：

a.download = "My image Name." + window.URL.split('.').pop();

然而，我会使用不同的数据属性：

<html>
    <!--
        You can put the href and the name you want to see in different data attributes.
        Also one can add IE support.
    -->

    <head>
        <script>
            //e:=<a [data-name] [data-href]>
            function downloadMe(e){
                var tF = e.getAttribute('data-name');
                var tURL = e.getAttribute('data-href')

                var tR = new XMLHttpRequest();
                tR.open('GET', tURL, true);
                tR.responseType = 'blob';

                tR.onload = function(e){
                    var tB = this.response;

                    if(window.top.navigator.msSaveOrOpenBlob){
                        //Store Blob in IE
                        window.top.navigator.msSaveOrOpenBlob(tB, tF)
                    }
                    else{
                        //Store Blob in others
                        var tA = document.body.appendChild(document.createElement('a'));
                        tA.href = URL.createObjectURL(tB);
                        tA.download = tF;
                        tA.style.display = 'none';
                        tA.click();
                        tA.parentNode.removeChild(tA)
                    }
                };

                tR.send();

                return false
            }
        </script>
    </head>

    <body>
        <a href = '#' data-href = 'A.png' data-name = 'My Name.png' onclick = 'return downloadMe(this)'>download</a>
    </body>
</html>

图片无法下载自己的扩展程序

1 个答案: