Fatal编程技术网
  • javascript/
  • Javascript 在单击时强制浏览器下载图像文件

Javascript 在单击时强制浏览器下载图像文件

javascript jquery html

Javascript 在单击时强制浏览器下载图像文件,javascript,jquery,html,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"> $(docume

我需要浏览器下载图像文件，就像在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>


$（文档）.ready（函数（）{
$（“*”）。单击（函数（）{
$（“p”）.hide（）；
});
});
document.onclick=函数（e）{
e=e | | window.event；
var元素=e.target | | e.src元素；
if（element.innerHTML==“Image”）{
//someFunction（element.href）；
var name=element.nameProp；
var address=element.href；
saveImageAs1（element.nameProp，element.href）；
返回false；//防止默认操作并停止事件传播
}
其他的
返回true；
};
函数saveImageAs1（名称、地址）{
如果（确认（'是否要保存此图像？'））{
window.win=打开（地址）；
//重定向（“~/testpage.html”）；
setTimeout（'win.document.execCommand（“SaveAs”）”，100）；
setTimeout（'win.close（）'，500）；
}
}
下载Excel工作表时，它应该如何工作（浏览器会做什么）？

使用HTML5，您可以将属性“下载”添加到链接中

您不需要编写js来实现这一点，只需使用：


<a href="path_to/image.jpg" alt="something">Download image</a>






浏览器本身会自动下载图像

如果由于某种原因无法工作，请添加“下载”属性。
使用此属性，可以设置可下载文件的名称：


<a href="path_to/image.jpg" download="myImage">Download image</a>



我在Chrome和Firefox中添加了一个指向to文档的链接，从而实现了这一点


var link = document.createElement('a');
link.href = 'images.jpg';
link.download = 'Download.jpg';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);




函数prehref（linkElement）{
var myDiv=document.getElementById（'Div_contain_image'）；
var myImage=myDiv.children[0]；
linkElement.href=myImage.src；
}

我发现



不适合我。我不知道为什么

我发现您可以在链接末尾包含一个
？download=true
参数来强制下载。我想我注意到谷歌硬盘正在使用这种技术

在链接中，在href末尾包含
？download=true


var pom = document.createElement('a');
pom.setAttribute('href', 'data:application/octet-stream,' + encodeURIComponent(text));
pom.setAttribute('download', filename);
pom.style.display = 'none';
document.body.appendChild(pom);
pom.click();
document.body.removeChild(pom);     


您还可以使用此技术同时设置文件名


在您的链接中，在href末尾包含
？download=true&filename=My_Image_File.jpeg
。
这是解决您问题的一般方法。但是有一个非常重要的部分，文件扩展名应该与您的编码匹配。当然，downlowadImage函数的内容参数应该是图像的base64编码字符串


var pom = document.createElement('a');
pom.setAttribute('href', 'data:application/octet-stream,' + encodeURIComponent(text));
pom.setAttribute('download', filename);
pom.style.display = 'none';
document.body.appendChild(pom);
pom.click();
document.body.removeChild(pom);     




const clearUrl=url=>url.replace（/^data:image\/\w+；base64，/，“”）；
const downloadImage=（名称、内容、类型）=>{
var link=document.createElement（'a'）；
link.style='位置：固定；左-10000px；'；
link.href=`data:application/octet stream；base64，${encodeURIComponent（content）}`；
link.download=/\.\w+/.test（name）？name:`${name}.${type}`；
document.body.appendChild（链接）；
link.click（）；
document.body.removeChild（link）；
}
['png'，'jpg'，'gif'].forEach（类型=>{
var download=document.querySelector（`${type}`）；
download.addEventListener（'click'，function（））{
var img=document.querySelector（'#img'）；
downloadImage（'myImage'，clearUrl（img.src），类型）；
});
});

gif图像：
下载PNG
下载JPG
下载GIF
尝试以下操作：


<a class="button" href="http://www.glamquotes.com/wp-content/uploads/2011/11/smile.jpg" download="smile.jpg">Download image</a>



2018年春季更新


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






var image=newimage（）；
image.crossOrigin=“匿名”；
image.src=”https://is3-ssl.mzstatic.com/image/thumb/Music62/v4/4b/f6/a2/4bf6a267-5a59-be4f-6947-d803849c6a7d/source/200x200bb.jpg";
//获取文件名-如果图像url不包含文件扩展名，则可能需要修改此文件名，否则可以手动设置文件名
var fileName=image.src.split（/（\\\\\\/）/g.pop（）；
image.onload=函数（）{
var canvas=document.createElement（'canvas'）；
canvas.width=this.naturalWidth；//如果需要特殊/缩放尺寸，请选择“width”
canvas.height=this.naturalHeight；//如果需要特殊/缩放尺寸，请选择“height”
canvas.getContext（'2d'）.drawImage（this，0，0）；
var-blob；
//…获取为数据URI
if（image.src.indexOf（“.jpg”）>-1）{
blob=canvas.toDataURL（“image/jpeg”）；
}else if（image.src.indexOf（“.png”）>-1）{
blob=canvas.toDataURL（“image/png”）；
}else if（image.src.indexOf（“.gif”）>-1）{
blob=canvas.toDataURL（“image/gif”）；
}否则{
blob=canvas.toDataURL（“image/png”）；
}
$（“body”）.html（“单击图像下载。
”；
};


Leeroy&Richard Parnaby King：

更新：自2018年春季起，这不再适用于交叉来源
hrefs。因此，如果您想在imgur.com以外的域上创建
不会按预期工作


您可以使用锚定标记直接下载此文件，无需太多代码。
复制代码段并粘贴到您的文本编辑器中，然后重试



使用Promise和async/await的更现代方法：


toDataURL(url) {
    return fetch(url).then((response) => {
            return response.blob();
        }).then(blob => {
            return URL.createObjectURL(blob);
        });
}


然后


在此处查找文档：
如何使用.click（）函数和标记

（压缩版）




下载
在2020年，我用来制作图像的本地副本，浏览器会将其作为文件下载。你可以用这个来测试




download
属性。确保文件下载的最佳方法是在服务器端设置内容配置，大多数客户端解决方案都不那么可靠。可能重复：？有一个类似的问题已经解决了

toDataURL(url) {
    return fetch(url).then((response) => {
            return response.blob();
        }).then(blob => {
            return URL.createObjectURL(blob);
        });
}



async download() {
        const a = document.createElement("a");
        a.href = await toDataURL("https://cdn1.iconfinder.com/data/icons/ninja-things-1/1772/ninja-simple-512.png");
        a.download = "myImage.png";
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
}



(function(global) {
  const next = () => document.querySelector('.search-pagination__button-text').click();
  const uuid = () => Math.random().toString(36).substring(7);
  const toBlob = (src) => new Promise((res) => {
    const img = document.createElement('img');
    const c = document.createElement("canvas");
    const ctx = c.getContext("2d");
    img.onload = ({target}) => {
      c.width = target.naturalWidth;
      c.height = target.naturalHeight;
      ctx.drawImage(target, 0, 0);
      c.toBlob((b) => res(b), "image/jpeg", 0.75);
    };
    img.crossOrigin = "";
    img.src = src;
  });
  const save = (blob, name = 'image.png') => {
    const a = document.createElement("a");
    a.href = URL.createObjectURL(blob);
    a.target = '_blank';
    a.download = name;
    a.click();
  };
  global.download = () => document.querySelectorAll('.search-content__gallery-results figure > img[src]').forEach(async ({src}) => save(await toBlob(src), `${uuid()}.png`));
  global.next = () => next();
})(window);