前端a标签下载图片文件

一般 a 标签下载文件的方式都是加download属性。但是对于图片下载来说，加了download的属性有时起作用，有时不起作用。1.如果不是远程图片，可以下载，参考https://www.w3school.com.cn/tiy/t.asp?f=html_a_download；　如果是远程图片，点击下载只是打开图片而已，如下代码。<a href="http://img.pconline.co

love_panpan

7806人浏览 · 2021-03-25 16:53:02

love_panpan · 2021-03-25 16:53:02 发布

一般 a 标签下载文件的方式都是加download属性。但是对于图片下载来说，加了download的属性有时起作用，有时不起作用。
1.如果不是远程图片，可以下载，参考https://www.w3school.com.cn/tiy/t.asp?f=html_a_download；
　如果是远程图片，点击下载只是打开图片而已，如下代码。

<a href="http://img.pconline.com.cn/images/upload/upc/tx/wallpaper/1308/01/c0/24007771_1375339039075.jpg" download>下载</a>

2.如果真想下载远程图片还需要加点别的东西，即"response-content-type=application/octet-stream", 加在图片url的后边即可，如下：

<a href="http://img.pconline.com.cn/images/upload/upc/tx/wallpaper/1308/01/c0/24007771_1375339039075.jpg?response-content-type=application/octet-stream" download>下载</a>

这样远程图片就可以下载下来了，至于为什么加这个参数能下载下来，据说是因为使用这个contentType的话访问页面的时候浏览器就会开启下载框对其内容进行下载

3.前端动态创建a标签进行文件下载

let url = data.url+'?response-content-type=application/octet-stream';// data.url路径地址
downloadFile(url)
function downloadFile(url) {
    //下载文件
    console.log(url)
    let a = document.createElement("a");
    a.setAttribute("href", url);
    a.setAttribute("download",'download');
    a.setAttribute("target", "_blank");
    let clickEvent = document.createEvent("MouseEvents");
    clickEvent.initEvent("click", true, true);
    a.dispatchEvent(clickEvent);
}