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

最新推荐文章于 2024-04-07 17:25:31 发布
最新推荐文章于 2024-04-07 17:25:31 发布
阅读量902 收藏 1
点赞数
分类专栏： java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43075758/article/details/116148880
版权 
本人记录工作中遇到的问题
原来是：
<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=application/octet-stream" download class="layui-btn layui-btn layui-btn-xs layui-btn-radius">下载</a>
最终OK
不写bug的程序媛
关注
专栏目录
干货阿里巴巴 开源软件列表
科技D人生
06-01 9250
阿里的开源项目很多，这也跟@淘宝正明的开源态度密不可分。有很多重量级的项目，例如LVS、Tengine，或者很有实践价值的中间件，今天小编为大家汇总了阿里开源的项目，快来看看吧！ 服务框架 Dubbo Dubbo 是阿里巴巴公司开源的一个高性能优秀的服务框架，使得应用可通过高性能的 RPC 实现服务的输出和输入功能，可以和 Spring框架无缝集成。 JDBC连接
关于a标签下载文件变打开的解决方案
weixin_45022563的博客
03-12 9382
处理部分 文件下载变 文件打开 的情况
a标签下载图片变预览
qq_34442584的博客
01-30 1654
a标签下载变预览a标签下载图片变预览判断文件或图片下载 a标签下载图片变预览 let image = new Image(); // 解决跨域 Canvas 污染问题 image.setAttribute("crossOrigin", "anonymous"); image.onload = function() { let canvas = document.createElement("canvas");
解决a标签下载网络图片直接打开的问题，通过浏览器下载网络文件
qq_36850714的博客
12-12 7420
因为公司用的分布式文件系统上传文件后返回的是 http文件路径，当文件是图片是，用a标签下载会直接打开而不是下载，所以找了下怎么通过浏览器下载远程服务器上的图片。网上大部分都是后台代码，现在把前端后台一起整合一下。 @RequestMapping(value = "/core/downloadNet") public void downloadNet(HttpServletResponse r...
a标签下载文件，浏览器变打开预览的解决方案
DAKADI
05-24 3210
前景： 处理接口返回的文件链接需要下载，例如http://xxxxx/xxx.jpeg，使用a标签进行下载时（加了download），浏览器对这些类型的文件可以解析，还会打开这个文件在浏览器上进行预览。 解决办法： 1.对a标签里的url进行拼接：让浏览器默认以处理字节流方式去下载。 :href="`${url}?response-content-type=application/octet-stream`" 同事提供的一个不一样思路的解决办法，感觉很是受用～ 但是需要好好验证一下，以免有影响文件的问题。
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...
H5微信小游戏源码-奇葩连连看游戏源码.zip
11-11
7. **测试与调试**：使用模拟器和真机进行多方位测试，确保游戏在不同环境下能正常工作，并修复可能出现的bug。 通过分析这个源码包，开发者可以学习到微信小游戏的开发流程，H5游戏的实现方法，以及如何利用现有...
易企秀13.1完整版源码 含12.9-13.1升级补丁 更新预览场景页面跳转到易企秀bug等.zip
06-08
"更新预览场景页面跳转到易企秀bug等"指出一个特定的问题，即在预览场景页面时存在一个bug，导致页面跳转到易企秀的主站。这可能是一个安全问题或者用户体验上的瑕疵，修复这个bug对于保持平台的稳定性和用户满意度...
[可道云文件管理kodbox 1.15] 企业网盘+云端文档管理+批量上传下载文件夹+移动端H5优化
博客模板下载
02-10 1278
介绍 可道云文件管理kodbox像Windows操作一样的企业网盘，云端文档管理，在企业网盘内也能像在电脑上操作一般熟悉而流畅，熟悉框选、拖拽、快捷键，从来没这么简单方便 源码更新日志： 可道云文件管理kodbox 1.15 更新：2020-12-31 功能新增及优化 文件管理 文件夹显示子内容个数；(支持:kod存储，物理路径存储) 文档属性与信息面板统一；文件属性拥有更全的功能及信息，包括权限设置，历史记录，操作日志，扩展数据等； 文档属性:数据请求优化；md5获取优化；本地文件加入最近访问时间；快捷操
PHPCMS V9.6.6 修改版
07-24
11. 修复已知BUG 12. 修复已知安全漏洞 13. 增加安装时自定义后台管理登录地址 14. 去掉PHPSSO模块、去掉Video及视频库相关、去掉Upgrade在线升级 15. 去除了已被废弃的视频模块和视频模型 16. 修复安装时DNS解析...
在HTML5中，＜a＞标签设置了download属性，图片仍然会在浏览器中直接打开而不是触发下载
最新发布
K___End的博客
04-07 1139
而对于纯前端解决方案，如果遇到浏览器总是尝试打开图片而不是下载，可能需要结合其他技术手段，比如借助Blob对象和URL.createObjectURL()方法配合JavaScript动态创建下载链接，以绕过浏览器的默认行为。：服务器发送的MIME类型也会影响浏览器的行为，如果服务器明确指定了图片MIME类型，浏览器可能会按照该类型解析并显示图片。：如果图片资源位于不同的域，并且服务器没有设置允许跨域下载（CORS头部），浏览器出于安全考虑可能不会允许直接下载。属性，浏览器也可能优先选择显示而非下载。
a标签下载图片文件时，不让他打开而是直接下载的正确方式
tutouman的博客
08-12 2777
其实很简单，只需要在url最后加上“response-content-type=application/octet-stream”即可！至于为什么加这个参数能下载下来，据说是因为使用这个contentType的话访问页面的时候浏览器就会开启下载框对其内容进行下载。使用a标签的download属性进行下载操作时，如果下载的是图片视频类的，则只能下载同源文件，非同源的文件浏览器会自动打开浏览而非下载，那么非同源的该如何操作才能下载呢？
json文件下载--防止chrome直接打开方案
xiaowei的博客
06-12 1万+
一、HTML中的a标签实现点击下载 通常在咱们写项目的时候会遇到上传下载什么的，在上传完文件后会把文件的路径保存到数据库里以便下载，如果想不通过后台直接下载的话，可以把文件路径给a标签的属性href； &amp;lt;a href=&quot;/user/test/xxxx.txt&quot;&amp;gt;点击下载&amp;lt;/a&amp;gt; 这样当用户打开浏览器点击链接的时候就会直接下载文件。 但是有个情况，比如txt,p...
vue中如何用a标签打开本地图片
haishangfeie的博客
11-16 7154
vue中如何用a标签打开本地图片vue中如何用a标签打开本地图片扯点废话最后 vue中如何用a标签打开本地图片 不知道各位有没有遇到希望在vue中点击一下a标签就打开本地图片这种情况。话说，会看到这篇博客的话应该是遇到了才对吧。 可以这样写： &amp;lt;a :href=&quot;require('../../img/test.jpg')&quot; target=&quot;_blank&quot;&amp;gt;te...
a 标签实现文件下载(解决打开的问题)
热门推荐
づ開始懂了的博客
01-10 7万+
实现： a标签实现文件下载，是使用的相对路径下载。 js代码 a class="btn btn-success btn-sm" href="../docs/doc/" title="下载" mce_href="#">i class="fa fa-arrow-circle-down">i>a> 这样用户在点击这个链接的时候，就会直接下载这个文件，但是这里有个问题， 像txt，jpg
a标签下载图片,配置资源文件（图片、视频等）文件链接在浏览器中直接下载...
weixin_34007879的博客
10-18 1573
前言 前端使用a标签下载图片文件时因为浏览器机制问题导致会直接打开图片链接进行预览。为了方便，不需要后台进行处理传输文件流返回。所以进行nginx配置，让链接图片在浏览器中直接下载 nginx配置信息 server { listen 8086; server_name 192.168.1.66; ...
列表上的a标签点击查看图片
qq_39822451的博客
01-09 3418
&lt;%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%&gt; &lt;%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%&gt; &lt;%@ taglib prefix=&
a标签download属性下载还是打开了文件~（下载地址跨域了）
river、的博客
09-17 1万+
解决办法~canvas //下载图片到本地 export function downloadIamge(imgsrc, name) { //下载图片地址和图片名 var image = new Image(); // 解决跨域 Canvas 污染问题 image.setAttribute('crossOrigin', 'anonymous'); image...
JavaScript学习笔记（三）：a标签图片下载本地，而非直接打开
weixin_44104809的博客
03-19 2762
JS依据图片链接下载图片1、错误写法2、解决办法 前言 ：在使用a标签下载图片，很多浏览器会默认直接打开网页，而不是下载本地，今天我们就来解决这个问题吧 1、错误写法 虽然加上了download属性，但是依旧无法实现图片下载，这是因为很多浏览器能够识别图片，会自动打开 <a href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVy...
h5 a标签下载文件并重命名
05-18
同时，可以通过设置 a 标签的 download 属性来指定下载文件的名称。 以下是示例代码： ```html <a id="download-link" href="#">下载文件</a> // 文件内容 var fileContent = "Hello, World!"; // 创建 Blob ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值