html 图片下载浏览器默认会打开新页面预览图片解决方案

最新推荐文章于 2024-09-30 14:33:07 发布
最新推荐文章于 2024-09-30 14:33:07 发布
阅读量6.4k 收藏 2
点赞数 3
CC 4.0 BY-SA版权
文章标签： t
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/hou6386083/article/details/82851224
本文探讨了使用a标签下载图片时遇到的问题及解决方案，包括前端使用download属性、利用SaveAs指令和后端返回图片流的不同方法，重点推荐了后端返回图片流时添加特定请求头的方案，以实现良好的兼容性和用户体验。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

      我们使用a标签下载图片的时候，浏览器默认会打开新页面预览图片，无法调用浏览器下载。

      解决方案1：前端在a标签加入download指定图片下载，但是有兼容性，并且限制也比较多

      解决方案2：使用浏览器自带指令 SaveAs  来下载图片，但是这个指令兼容IE

 解决方案3：后端返回图片流时，请求头需要加上 Content-Disposition:attachment; filename="c7348bd3be79dbd74dc8006e78289bbe.jpg"      Content-Transfer-Encoding:binary（推荐这种方案，兼容性好）

 

hou6386083
关注
vue2 - 实现移动端H5网页调用手机相册选取图片或打开摄像头相机拍照上传，如何在h5网站浏览器中打开本机相册或相机选择相片，H5调用本地相册/相机上传图片详细教程（附图片压缩功能及上传服务器示例）
高级前端工程师
10-31 1万+
vue2手机H5网页，调起安卓苹果ios手机相册和相机，H5实现调用手机摄像头相册实现图片压缩预览删除，vue项目调用摄像头和相册，H5调用手机摄像头，实时拍照上传，VUE2 H5页面如何唤起手机摄像头拍照上传，H5调起手机端的摄像头，html5调用手机摄像头，实现H5调起手机相机和相册，vue H5拍照上传，手机网站浏览器移动端调取相机或相册，实现拍照上传功能，解决苹果ios手机无法打开相册相机问题，无法唤起摄像头怎么办，调取本机系统的相册，vue h5网页调用相机拍照和相册，实现多张图片上传功能，图片压
关于a标签下载文件变打开的解决方案
热门推荐
weixin_45022563的博客
03-12 1万+
处理部分 文件下载变 文件打开 的情况
移动端页面，点击img的图片，会变成预览模式
ruanhongbiao的专栏
06-28 7446
在公司H5项目发现中发现一个兼容性问题，就是在部分Android机自带的浏览器中点击img图片会新打开一个标签页预览图片。 有四种方式去解决这个问题，当然第一种是最简单的，加一条样式就好了。 1.img{ pointer-events: none; } 2.在img元素上添加 onclick="return false" <img src="a.png" onclick="retu...
关于WebView加载H5页面下载文件和下载完毕后自动打开文件
weixin_42371001的博客
07-22 2863
前段时间有个项目需要在H5页面里下载文档文件，由于项目需求这里采用Android系统自带DownloadManager来进行后台自动下载管理，我们只需要稍微设置几个参数就进行文件下载了，并且下载进行时和下载完成后会有通知显示，话不多说直接上代码： 由于是WebView中的操作，这里需要监听WebView的下载监听，每当WebView中有下载操作都会回调这个方法，代码如下： 上面代码中只有要下载...
a标签实现文件、图片下载和打开新窗口
甜甜圆圆圈圈的博客
05-22 3742
a标签实现文件、图片下载 a标签实现文件或图片下载只需要设置 download="" 属性即可，该属性的值可以为空，如果设置值，则该值就将是文件下载的默认名字。 <a herf="文件或图片路径" download="值可以不填，如果填上就是文件的默认名字" >文件下载</a> 注意：a标签实现文件下载需要在根页面，如果嵌套在iframe内是无效的！ a标签实现打开新窗口 a标签实现打开新窗口只需设置 target="view_window" 属性即可 <a herf="需要
前端解决Chrome浏览器下载url图片会自动打开的问题
m0_50864962的博客
06-09 2711
解决谷歌浏览器下载url图片会自动打开的问题 话不多说直接上代码 // 点击按钮触发的函数 downGoodsImg() downGoodsImg (imgsrc) { // imgsrc要下载的图片地址 let that = this; let image = new Image(); image.src = imgsrc + '?v=' + Math.random(); // 处理缓存 image.crossOrigin = '*
IE浏览器下载图片直接打开的问题
Jimmy‘s blog
07-03 4696
使用IE浏览器下载图片直接打开的解决方法 两个部分的内容： ng alain中的下载文件模块的组件的引用 webpack打包遇到的一个问题 ng alain 链接如下：[fileSaver](https://ng-alain.com/components/down-file) 完美解决ie浏览器下载图片**直接打开**的问题 webpack打包遇到的一个问题 Unex...
【web】使用a 标签下载文件
michael的博客
11-14 4036
标签下载只能下载同源的文件，如果是跨域的文件，这里包括图片、音视频等媒体文件，都是预览，也无法下载。就上面的这个示例，我们点击下载，发现是跳转到了百度的首页，并没有真的下载文件。它的作用是指定下载的文件名，如果不指定，那么下载的文件名就会根据请求内容的。标签来实现文件下载，这种方式是最简单的，也是我们比较常用的方式。效果和上面的一样，都是跳转到百度的首页，没有下载文件。的最后一部分作为文件名。，那么就会使用请求的。
多文件上传与图片预览HTML5源码解决方案
- `images`文件夹中可能包含用于测试的图片样本，或者用作图片上传预览时显示的默认图片。 通过上述知识点，开发者可以更好地理解资源包中的代码如何实现功能，并能够根据这些信息进行必要的修改和扩展以适应自己...
html5实现多图片预览上传及点击可拖拽控件
09-27
在给出的示例中，使用了一个名为`zyUpload`的插件，它提供了一套完善的图片上传和预览的解决方案。通过配置这个插件，我们可以指定上传URL、设置控件尺寸、允许多文件上传、启用拖放功能以及设定各种回调函数来处理...
IE9下PDF图片无法正常打开无法显示正常的解决方法
09-25
描述中提到的“点击照片，下载保存照片”现象，意味着浏览器默认的行为是将PDF图片当作一个文件下载，而不是直接在浏览器窗口内预览。 解决此问题的步骤如下： 1. 安装Adobe Reader XI：Adobe Reader是Adobe公司...
全面兼容浏览器的jquery图片上传预览插件
不过，由于浏览器更新换代，即使是开源解决方案也可能无法全面兼容最新版本的浏览器，因此需要开发者进行相应的维护和更新。 #### 6. 提供的文件与脚本解析 在本次分享的资源中，包含了两个关键的文件： - **...
h5 a标签下载变成打开图片预览bug修复
weixin_43075758的博客
04-26 1007
本人记录工作中遇到的问题 原来是： <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标签下载服务器图片时出现页面跳转问题
qq_41596400的博客
06-22 1738
解决使用a标签下载服务器图片时出现页面跳转问题
a标签超链接跳转到新页面
2301_76426908的博客
02-19 2250
即点击链接时 不在原有页面跳转 ，而是重新打开一个页面实现跳转。很多在写官网的时候领导都会让跳转到一个新页面，以上只是其中方法之一，比较简单。
a标签下载图片文件时，不让他打开而是直接下载的正确方式
tutouman的博客
08-12 3489
其实很简单，只需要在url最后加上“response-content-type=application/octet-stream”即可！至于为什么加这个参数能下载下来，据说是因为使用这个contentType的话访问页面的时候浏览器就会开启下载框对其内容进行下载。使用a标签的download属性进行下载操作时，如果下载的是图片视频类的，则只能下载同源文件，非同源的文件浏览器会自动打开浏览而非下载，那么非同源的该如何操作才能下载呢？
html5属性详解,HTML5中的download属性详解
weixin_29164081的博客
06-04 872
一、download属性是个什么？如果我们想实现点击上面的下载按钮下载一张图片，你会如何实现？我们可能会想到一个最简单的方法，就是直接按钮a标签链接一张图片，类似下面这样：下载但是，想法虽好，实际效果却不是我们想要的，因为浏览器可以直接浏览图片，因此，我们点击“下载”链接，并是不下载图片，而是在新窗口直接浏览图片。于是，基本上，目前的实现都是放弃HTML策略，而是使用，例如php这样的后端语言，通...
使用 ＜a＞ 标签让图片直接下载而不是在新标签页中打开
最新发布
梁三石FE
09-30 1151
至于为什么加这个参数能下载下来，是因为如果你的图片请求返回的响应的。如果你想要下载,不想要预览，就加上上述添加的参数，它指的是任意类型的。浏览器会自动打开浏览而非下载，那么非同源的该如何操作才能下载呢？属性进行下载操作时，如果下载的是图片视频类的，则只能下载。等浏览器可以识别打开的文件，就不会去执行下载事件。链接，没有进行下载，而是在当前页面打开了图片。，浏览器无法识别打开流数据，就会去下载。相关的文章，还可以关注我的公众号。属性，想要实现下载图片时，点击。
解决a标签下载网络图片直接打开的问题，通过浏览器下载网络文件
qq_36850714的博客
12-12 7541
因为公司用的分布式文件系统上传文件后返回的是 http文件路径，当文件是图片是，用a标签下载会直接打开而不是下载，所以找了下怎么通过浏览器下载远程服务器上的图片。网上大部分都是后台代码，现在把前端后台一起整合一下。 @RequestMapping(value = "/core/downloadNet") public void downloadNet(HttpServletResponse r...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值