解决下载图片总是预览问题

最新推荐文章于 2024-03-30 22:55:00 发布
最新推荐文章于 2024-03-30 22:55:00 发布
阅读量422 收藏
点赞数
文章标签： 前端 vue.js react.js javascript react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_57033986/article/details/126405734
版权

1.在图片后面拼上?response-content-type=application/octet-stream即可

const link = document.createElement('a')

      link.download = ''
      link.href = 'https://qa-static.xunhou.cn/62fddf2920241f1f1b683301.jpg?response-content-type=application/octet-stream'
      link.click()

<a download="" href="https://qa-static.xunhou.cn/62fddf2920241f1f1b683301.jpg?response-content-type=application/octet-stream">下载图片</a>
雨住一_abc
关注
解决：打开阿里云图片显示下载，而不是直接预览的问题
是日已过，命亦随减的博客
05-29 1万+
修改：OssClient.php文件中的 DEFAULT_CONTENT_TYPE的值为image/jpg。
十九、文件下载及图片预览
qq_25843323的博客
01-31 398
十九、文件下载及图片预览
针对谷歌浏览器中，点击图片超链接实现下载而不是预览，解决办法
1073960086的博客
12-07 1万+
针对某些浏览器,比如谷歌浏览器，在超链接a标签中给出图片url，点击a标签不是期望的下载而是预览，采用以下办法可以解决。  //图片url imgDownload: function (url, filename) { var browserIsIe = this.browserIsIe(); if (browserIsIe)...
点击下载图片变成预览的解决方案（记录）
nameliushuai的博客
03-15 1701
先获取图片路径，对图片进行二进制流转换 下面是实现代码 // 点击下载附件 downLoad(fileLinkUrl, f_name) { //fileLinkUrl图片路径 //f_name：图片名称（可以自己随便取） const url = fileLinkUrl; console.log(url); var xmlhttp; xmlhttp = new XMLHttpRequest(); //用于在后台与服务器交换数据
浏览器下载图片、ppt文件等变成浏览问题
huangjinkuo的博客
08-22 290
浏览器下载图片、ppt文件等变成浏览问题
这个文件下载问题难住了我至少三位同事
weixin_41385912的博客
05-25 1289
大家好，我是坤哥今天给大家分享两个比较有用的浏览器行为与预期不一致的现象，这两个问题其实并不是什么难题，但在工作中发现不少人被难住了，在我的印象中至少有三位同事在群里问这样的问题，上周又有...
uniapp解决文件及图片下载预览
10-24
在uniapp开发中，处理文件和图片的下载与预览是一项常见的需求。uniapp是一个基于Vue.js的多端开发框架，能够便捷地构建H5、小程序、App等应用。本篇将详细介绍如何在uniapp中实现文件和图片的下载与预览功能。 一...
vue+vant使用图片预览功能ImagePreview的问题解决
10-15
在Vue.js框架下，结合Vant UI库进行开发时，我们可能会遇到使用`ImagePreview`组件进行图片预览时遇到的一些问题。`ImagePreview`是Vant提供的一种轻量级的图片预览解决方案，它能够方便地展示一组图片，并且支持...
解决 viewer.js 动态更新图片导致无法预览的问题
10-17
总结来说，解决 Viewer.js 动态更新图片导致无法预览的问题，主要在于理解 Viewer.js 只能初始化一次的特性，并在添加新图片后通过 `viewer.update()` 来更新实例。通过这样的方法，我们可以在不刷新页面的情况下，...
Android编程中调用Camera时预览画面有旋转问题的解决方法
09-03
然而，单纯调用这个方法并不总是能解决问题，因为Android的前后摄像头的旋转逻辑有所不同。 对于后置摄像头（back-facing），它的旋转方向与设备的物理方向一致。因此，计算预览旋转角度时，我们需要减去屏幕的当前...
图片链接或pdf链接通过浏览器打开时，有时可以直接预览，有时却是下载，为什么？
My_Soul_的博客
11-17 1万+
content-disposition 是 MIME 协议的扩展 ，其作用就是用来处理一些文件的显示问题， content-disposition的值为inline时，表示它可以显示在网页内，或作为网页，此时浏览器会自动进行预览， content-disposition的值为attachment时，表示它应该下载，大多数浏览器呈现“另存为”对话框
html 图片下载浏览器默认会打开新页面预览图片解决方案
qq_37708668的博客
09-29 5597
我们使用a标签下载图片的时候，浏览器默认会打开新窗口预览该图片，无法调用浏览器下载。 解决方案1：前端在a标签加入download指定图片下载，但是有兼容性，并且限制也比较多 解决方案2：使用浏览器自带指令 SaveAs 来下载图片，但是这个指令兼容IE 解决方案3：后端返回图片流时，请求头需要加上 Content-Disposition:attachment; filename=“c7348b...
a标签加download属性，可直接下载图片的两种方式（而不是预览）
TooManyDdficulty的博客
09-07 6089
写项目碰到过两次需求是要点击直接下载图片的，一个是vue项目，一个是在react的项目，两种方法，仅此记录以便查看。 众所周知，a标签加download属性可以实现大部分文件的点击直接下载（如zip），但是部分文件（如jpg，pdf等浏览器可以直接识别的文件）会直接打开，而不是下载。 以下提供两种实践过并且有效的方法，仅供参考。 一、加文件名后缀 ?response-content-type=application/octet-stream <a :href="{{result.imageUrl}
关于前端如何下载后端接口返回content-type为application/octet-stream的文件
weixin_39228870的博客
10-24 3066
后端接口定义为直接返回一个文件，如果带认证信息可以直接通过浏览器url下载，但是接口需要传headers认证信息，url上又不支持传相关信息。
文件下载 response响应ContentType与a标签download属性
菜鸟记录
01-18 7140
⏹文件下载 response响应ContentType与a标签download属性
a标签下载图片文件时，不让他打开而是直接下载的正确方式
tutouman的博客
08-12 2923
其实很简单，只需要在url最后加上“response-content-type=application/octet-stream”即可！至于为什么加这个参数能下载下来，据说是因为使用这个contentType的话访问页面的时候浏览器就会开启下载框对其内容进行下载。使用a标签的download属性进行下载操作时，如果下载的是图片视频类的，则只能下载同源文件，非同源的文件浏览器会自动打开浏览而非下载，那么非同源的该如何操作才能下载呢？
Response使用 application/octet-stream 响应到前端
热门推荐
风雪夜归人的博客
11-28 2万+
response.setContentType("application/octet-stream; charset=UTF-8"); response.setHeader("Content-disposition", "attachment; filename=" + URLEncoder.encode(fileName));
vue3+ts 如何下载上传华为云的数据
qq_45287575的博客
12-05 394
下载 content-type=application/octet-stream 类型数据
response的contentType 几种类型
最新发布
2301_82241859的博客
03-30 1518
学习技术是一条慢长而艰苦的道路，不能靠一时激情，也不是熬几天几夜就能学好的，必须养成平时努力学习的习惯。所以：贵在坚持！最后再分享的一些BATJ等大厂20、21年的面试题，把这些技术点整理成了视频和PDF（实际上比预期多花了不少精力），包含知识脉络 + 诸多细节，由于篇幅有限，上面只是以图片的形式给大家展示一部分。Mybatis面试专题MySQL面试专题并发编程面试专题《一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码》点击传送门即可获取！
跨浏览器图片上传预览解决方案
这篇内容提供了一个解决浏览器上传图片预览兼容问题的方案，特别关注了Firefox3以及Internet Explorer6、7和8这四个版本的浏览器。 首先，我们需要理解这个预览机制的工作原理。在HTML中，通常使用`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值