前端a标签下载图片文件

一般 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);
}

前端a标签下载图片文件相关推荐

前端下载图片、pdf、excel、world文件；前端下载图片和pdf文件；前端a标签下载图片和pdf文件；下载文件名称不生效原因。
参考文章1 参考文章2 以下的下载是,拿到了后端给的下载图片的接口地址url > 方法1:将文本或者JS字符串通过 Blob 转换成二进制下载优点:可以下载,也可以保存名称. //文件流参数和 ...
通过Web Services上传和下载图片文件
通过Web Services上传和下载图片文件随着Internet技术的发展和跨平台需求的日益增加,Web Services的应用越来越广,我们不但需要通过Web Services传递字符串信息,而 ...
vue项目中使用a标签下载视频文件
vue项目中使用a标签下载视频文件前提条件: 1.地址为http 2.文件格式为MP4(仅代表这次项目中使用的情况) 示例代码: <el-button size="mini" ...
a标签下载图片及js执行下载图片
原因: 我发现href的值是网络地址就是添加了download属性还是会直接打开图片而不是直接下载,只有写成相对地址添加了download属性才会执行下载,但是存在兼容性问题如下: <a hr ...
a标签下载静态文件失败-未发现文件
- VUE a标签下载文件下载文件提示失败未发现文件目录静态文件bbb.txt 放在public下面data文件夹里面 ![在这里插入图片描述](https://img-blog.csdnim ...
使用a标签下载**.txt文件，而不是直接打开
今天有个使用a标签下载一个 .txt 文件,但是使用了不少方法,在点击下载的时候总是会直接打开被下载的文件,但是下载其他格式的文件就不会:也在网上找了不少资料一.尝试href + download方 ...
前端批量打包下载图片
1.批量下载图片(jquery) <!DOCTYPE html> <html><head><meta charset="utf-8" / ...
Python 下载图片(文件)的方法
import requests import os #创建目录文件夹 os.makedirs('./image/', exist_ok=True) # 构造请求头 headers={'User-Age ...
pandas parquet文件读取pyarrow、feather文件保存与读取；requests 或wget下载图片文件
**pandas读取文件填写绝对路径,相对路径可能出错读不了安装 fastparquet库,需要安装python-snappy ,一直安装错误,所以使用了pyarrow pip install py ...
JavaScript前端批量下载图片文件打包下载
参考:https://blog.csdn.net/qdm13209211861/article/details/126668206 参考代码在获取base64的时候有图片失真的问题.下面的代码已经修复 ...

前端a标签下载图片文件

前端a标签下载图片文件相关推荐

最新文章

热门文章