图片下载（包含了download打开图片无法下载的方法）

最新推荐文章于 2024-07-31 15:45:12 发布

碎碎。

最新推荐文章于 2024-07-31 15:45:12 发布

阅读量6.9k

点赞数

分类专栏：项目中遇到的问题文章标签： html实现图片下载 js实现图片下载

本文链接：https://blog.csdn.net/weixin_43410419/article/details/85065523

版权

本文介绍了如何利用HTML的a标签download属性实现图片下载，以及在遇到不兼容或无法直接下载情况时，通过将链接转换为blob地址并使用JS进行图片下载的方法。但这种方法仅支持'http'或'https'开头的图片链接。

摘要由CSDN通过智能技术生成

利用a标签的download属性实现图片下载

代码

 <img src="../download/img/test.jpg" alt="">
 <a href="../download/img/test.jpg " download=""> 下载 </a>

说明：
a标签的href：指向需要下载的图片的路径
download ：添加上之后，默认下载图片，而不是浏览图片，他的属性值为下载图的名称，可选

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

碎碎。

关注关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
4
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

a标签无法下载.txt.png.jpg.pdf等文件解决方案

11-02

2810

对于直接打开文件的情况，这里附上我自己的解决办法，可以实现让浏览器不打开文件，直接下载。

＜a＞＜/a＞标签，download属性不下载，而是打开.doc、.txt、.mp3、img，解决方法

你好！刘斩仙

06-06

5779

情况：公司特别钟爱，导出，下载，批量下载，打印，批量打印，今天遇到下载mp3文件时，只是在线打开，并不下载。因为同源的文件，浏览器默认是打开预览，不同源的才下载。利用get请求转成文件流就可以了。解决方法： downRow(index,data){ let that = this let oReq = new XMLHttpRequest(); ...

4 条评论您还未登录，请先登录后发表或查看评论

图片下载的几种方法和不能下载的原因

wangxinyang0118的博客

04-17

3356

有一个常见的需求，就是下载图片。以以往的经验，使用了a标签的方式进行了下载。如下普通a标签用法 <a href="baidu.png" download="aa">下载</a> 或 <button @click="downloadPic">下载</button> 事件用法 donloadPic () { let url = 'http://a.b.com/test.png' let a = document.createElement('a')

一文搞懂前端blob图片下载

最新发布

onetortoise的博客

07-31

475

后端给前端传输文件时有三种方式：1. blob流2. 图片地址(传到阿里云或者华为云oss存储，会生成一个图片地址)3. base64。

利用Content-disposition实现无刷新下载图片文件

weixin_30650039的博客

04-11

372

今天在使用 tinypng.com 这个在线压缩图片的网站时，对其处理完图片后，可以无刷新下载图片感到好奇，于是了解了一下相关实现。无刷新下载可以利用MIME type或者设置Content-disposition来实现。无刷新下载文件无刷新下载 rar 之类的文件很好实现：通过 meta 标签:<meta http-equiv="refresh" content="...

vue下载图片a标签只能跳转打开无法下载问题

weixin_42340514的博客

04-21

2405

情景1：如果存在CORS问题，先将图片转成base64 ：（亲测有效） downloadIamge(imgsrc, name) {//下载图片地址和自定义图片名称 let image = new Image(); // 解决跨域 Canvas 污染问题 image.setAttribute("crossOrigin", "anonymous"); image.onload = function() { let canvas = document.createElement("canvas"); can.

a标签下载功能无效，解决办法

Strong_Foo的博客

04-07

3691

a标签下载功能html5中的a标签下载功能细节 html5中的a标签下载功能细节今天在实现后台管理端功能时，遇到了需要下载图片或文件的功能，前端页面使用的是html5，在使用html5时需要注意以下几点： html5标识，在页面顶部必须添加，声明页面是html5的。 a标签下载功能，在a标签中添加“download”属性，“href”的值为需要下载的图片地址，下面是关键点，图片服务器地址一...

使用a标签无法下载某些文件的解决方法

BHSZZY的博客

03-07

4045

没想到，这样写，网上找了个exe的url、下载了下是没有问题的，3.网上还说，如果后端返回的header里加上这样的东西的话，前端请求时也就可以是下载文件、而不是打开新页面了。

JS端基于download.js实现图片、视频时直接下载而不是打开预览

11-21

在项目中，一个常见的需求是创建一个附件列表，其中包括下载和删除功能。通常，我们利用浏览器的默认行为通过`window.open(url)`或`window.location.href=url`来触发下载。然而，这种方式对于某些文件类型（如图片、...

javaweb页面附件、图片下载及打开(实现方法)

08-30

JavaWeb 页面附件、图片下载及打开（实现方法） ...本文总结了 JavaWeb 页面附件、图片下载及打开的实现方法，包括使用流来读取文件和使用 `download` 属性来直接下载文件。希望本文能为大家提供有价值的参考。

python下载图片实现方法(超简单)

09-21

本文将介绍一种超简单的Python下载图片的方法，适用于批量下载或处理无法直接右键保存的图片。首先，我们需要理解基本的网页抓取概念。在Python中，我们可以使用`urllib`库来获取网页内容。下面是一个简单的例子，...

Python实现批量下载图片的方法

09-21

### Python实现批量下载图片的方法在本篇文章中，我们将详细探讨如何使用Python来批量下载图片。这种方法涉及到Python中几个核心库的应用，包括`urllib`、`urllib2`（适用于Python 2.x版本）以及正则表达式库`re`...

a标签download属性下载还是打开了文件~（下载地址跨域了）

热门推荐

river、的博客

09-17

1万+

解决办法~canvas //下载图片到本地 export function downloadIamge(imgsrc, name) { //下载图片地址和图片名 var image = new Image(); // 解决跨域 Canvas 污染问题 image.setAttribute('crossOrigin', 'anonymous'); image...

h5 a标签下载变成打开图片预览bug修复

weixin_43075758的博客

04-26

902

本人记录工作中遇到的问题原来是： <a href="'+orgurl+'" download class="layui-btn layui-btn layui-btn-xs layui-btn-radius">下载</a> 修复：在完整图片路径后面加response-content-type=application/octet-stream，orgurl是http://这样的完整图片地址 <a href="'+orgurl+'?response-content-type=.

a href标签下载文件遇到下载失败打开文件的问题

天渺(喵)工作室

01-29

2828

a href download 此方法只能用于同一个域名的文件资源下载跨域或者三方平台的特殊资源图片（比如微信公众号资源图片）总是会打开资源，而非下载！ <a href="/images/logo.png" download="下载资源名称"> 当下载资源跨域的时候参考了https://blog.csdn.net/weixin_44379204/article/details/105056713 方法1 <a @click="downloadFile(fileUrl,.

关于a标签下载文件变打开的解决方案

weixin_45022563的博客

03-12

9385

处理部分文件下载变文件打开的情况

解决某些网站，图片不能下载

91奔跑的蜗牛

11-14

7458

如下图，右键图片，没有保存图片的选项按下F12 拷贝src中的地址，输入到浏览器，这时候就可以保存图片了

a 标签 download 属性不起作用，或者下载的图片无法查看

FE-阿阳的博客

11-26

6752

a 标签 download 属性不起作用，或者下载的图片无法查看问题描述 download 是 a 标签 html5 的新属性，可以点击下载文件，初次使用，经常会出现无法点击的情况，可能有以下原因，排除下：解决方案必须设置 href 属性，download 才起作用； download 属性是文件名，href 属性，指向的是要下载的文件； href 的指向需要同源，跨域下载不下来，当然...