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

最新推荐文章于 2023-08-12 11:18:32 发布
最新推荐文章于 2023-08-12 11:18:32 发布
阅读量6.2k 收藏 2
点赞数 3
文章标签： t
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hou6386083/article/details/82851224
版权

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

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

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

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

 

hou6386083
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML+CSS项目实践七：同一个HTML页面，在不同浏览器上的显示效果不一样！解决HTML页面的浏览器兼容问题
王迪
12-29 1万+
表象问题：同一个HTML页面，在不同浏览器上的显示效果不一样。 问题分析：由于浏览器的内核不一样，每个浏览器对标签的解释都有自己的规则，因而会造成显示效果不一样，称之为浏览器不兼容。对浏览器兼容问题，一般分，HTML，Javascript兼容，CSS兼容。 其中html相关问题比较容易处理，无非是高版本浏览器用了低版本浏览器无法识别的元素，导致其不能解析，所以平时注意一点就是。   1、浏览...
关于a标签下载文件变打开的解决方案
weixin_45022563的博客
03-12 9347
处理部分 文件下载变 文件打开 的情况
a标签实现文件、图片下载和打开新窗口
甜甜圆圆圈圈的博客
05-22 3508
a标签实现文件、图片下载 a标签实现文件或图片下载只需要设置 download="" 属性即可，该属性的值可以为空，如果设置值，则该值就将是文件下载的默认名字。 <a herf="文件或图片路径" download="值可以不填，如果填上就是文件的默认名字" >文件下载</a> 注意：a标签实现文件下载需要在根页面，如果嵌套在iframe内是无效的！ a标签实现打开新窗口 a标签实现打开新窗口只需设置 target="view_window" 属性即可 <a herf="需要
前端解决Chrome浏览器下载url图片会自动打开的问题
m0_50864962的博客
06-09 2441
解决谷歌浏览器下载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 4627
使用IE浏览器下载图片直接打开的解决方法 两个部分的内容： ng alain中的下载文件模块的组件的引用 webpack打包遇到的一个问题 ng alain 链接如下：[fileSaver](https://ng-alain.com/components/down-file) 完美解决ie浏览器下载图片**直接打开**的问题 webpack打包遇到的一个问题 Unex...
【web】使用a 标签下载文件
michael的博客
11-14 2938
标签下载只能下载同源的文件，如果是跨域的文件，这里包括图片、音视频等媒体文件，都是预览，也无法下载。就上面的这个示例，我们点击下载，发现是跳转到了百度的首页，并没有真的下载文件。它的作用是指定下载的文件名，如果不指定，那么下载的文件名就会根据请求内容的。标签来实现文件下载，这种方式是最简单的，也是我们比较常用的方式。效果和上面的一样，都是跳转到百度的首页，没有下载文件。的最后一部分作为文件名。，那么就会使用请求的。
html5实现多图片预览上传及点击可拖拽控件
09-27
在给出的示例中，使用了一个名为`zyUpload`的插件，它提供了一套完善的图片上传和预览的解决方案。通过配置这个插件，我们可以指定上传URL、设置控件尺寸、允许多文件上传、启用拖放功能以及设定各种回调函数来处理...
IE9下PDF图片无法正常打开无法显示正常的解决方法
09-25
描述中提到的“点击照片，下载保存照片”现象，意味着浏览器默认的行为是将PDF图片当作一个文件下载，而不是直接在浏览器窗口内预览。 解决此问题的步骤如下： 1. 安装Adobe Reader XI：Adobe Reader是Adobe公司...
jQuery支持拖拽单张图片上传预览插件
12-31
3. **图片预览**：预览图片是通过创建一个新的`<img>`元素并设置其`src`属性为Base64编码的字符串来实现的。这可以让用户在实际上传之前看到即将上传的图片，提升用户体验。 4. **AJAX上传**：通常，预览之后我们会...
HTML5拖拽上传图片预览提交代码.zip
最新发布
10-08
总的来说，这个代码包提供了一个完整的HTML5拖拽上传图片预览提交解决方案，可以作为一个基础模板，根据项目需求进行二次开发和定制。通过学习和理解这个代码，开发者可以掌握如何利用HTML5的拖放API、jQuery和CSS3...
解决使用a标签下载服务器图片时出现页面跳转问题
qq_41596400的博客
06-22 1608
解决使用a标签下载服务器图片时出现页面跳转问题
a标签下载图片文件时，不让他打开而是直接下载的正确方式
tutouman的博客
08-12 2743
其实很简单，只需要在url最后加上“response-content-type=application/octet-stream”即可！至于为什么加这个参数能下载下来，据说是因为使用这个contentType的话访问页面的时候浏览器就会开启下载框对其内容进行下载。使用a标签的download属性进行下载操作时，如果下载的是图片视频类的，则只能下载同源文件，非同源的文件浏览器会自动打开浏览而非下载，那么非同源的该如何操作才能下载呢？
关于WebView加载H5页面下载文件和下载完毕后自动打开文件
weixin_42371001的博客
07-22 2706
前段时间有个项目需要在H5页面里下载文档文件，由于项目需求这里采用Android系统自带DownloadManager来进行后台自动下载管理，我们只需要稍微设置几个参数就进行文件下载了，并且下载进行时和下载完成后会有通知显示，话不多说直接上代码： 由于是WebView中的操作，这里需要监听WebView的下载监听，每当WebView中有下载操作都会回调这个方法，代码如下： 上面代码中只有要下载...
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标签下载网络图片直接打开的问题，通过浏览器下载网络文件
qq_36850714的博客
12-12 7409
因为公司用的分布式文件系统上传文件后返回的是 http文件路径，当文件是图片是，用a标签下载会直接打开而不是下载，所以找了下怎么通过浏览器下载远程服务器上的图片。网上大部分都是后台代码，现在把前端后台一起整合一下。 @RequestMapping(value = "/core/downloadNet") public void downloadNet(HttpServletResponse r...
a标签download属性下载还是打开了文件~（下载地址跨域了）
热门推荐
river、的博客
09-17 1万+
解决办法~canvas //下载图片到本地 export function downloadIamge(imgsrc, name) { //下载图片地址和图片名 var image = new Image(); // 解决跨域 Canvas 污染问题 image.setAttribute('crossOrigin', 'anonymous'); image...
Vue 实现a标签下载图片而不是直接打开的问题解决方案
朝花夕拾的博客
05-22 1万+
当下载文件中存在jpg、txt等浏览器可以直接预览的文件时，上面的方法就会出现问题，即使加了download仍然会在浏览器中打开下载文件 我们可以将下载地址借助Blob转换成二进制，然后，作为a标签的href属性，配合download属性，实现下载。 具体实现代码如下：Vue.directive('down', { inserted: (el, binding) => { el.style.cssText = 'cursor: pointer;color:write;' el.ad...
JavaScript学习笔记（三）：a标签图片下载本地，而非直接打开
weixin_44104809的博客
03-19 2728
JS依据图片链接下载图片1、错误写法2、解决办法 前言 ：在使用a标签下载图片，很多浏览器会默认直接打开网页，而不是下载本地，今天我们就来解决这个问题吧 1、错误写法 虽然加上了download属性，但是依旧无法实现图片下载，这是因为很多浏览器能够识别图片，会自动打开 <a href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVy...
a标签下载图片,配置资源文件（图片、视频等）文件链接在浏览器中直接下载...
weixin_34007879的博客
10-18 1573
前言 前端使用a标签下载图片文件时因为浏览器机制问题导致会直接打开图片链接进行预览。为了方便，不需要后台进行处理传输文件流返回。所以进行nginx配置，让链接图片在浏览器中直接下载 nginx配置信息 server { listen 8086; server_name 192.168.1.66; ...
浏览器图片上传解决方案：预览、旋转、批量上传的JS实现
浏览器图片选择预览、旋转、批量上传是Web开发中常见的功能，需要解决浏览器兼容性问题，特别是IE版本的兼容性问题。下面是该功能的实现知识点总结： 1. 图片预览：IE浏览器使用progid:DXImageTransform.Microsoft....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值