window.open下载txt文件时直接在浏览器打开了的问题解决

最新推荐文章于 2024-02-18 08:41:04 发布
最新推荐文章于 2024-02-18 08:41:04 发布
阅读量1k 收藏 9
点赞数 6
分类专栏： vue 文章标签： 前端 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WiseGirls/article/details/135213690
版权
文章讲述了如何通过在文件链接后添加特定的URL参数`response-content-type:application/octet-stream`，使用户在点击时不会直接在浏览器中打开文件，而是下载文件的技术方法，适用于IT开发和内容管理中文件下载的优化。
摘要由CSDN通过智能技术生成

只需要在txt文件的链接后加上一串，如下：
window.open(fileUrl + '?response-content-type=application/octet-stream');
这样在点击下载的时候，就不会在浏览器直接打开文件，而是下载了

小小白号
关注
专栏目录
浏览器下载图片 前端下载图片/音频/视频/PDF等所有浏览器可以解析的文件格式；解决通过window.open打开链接后是新标签页面而不是下载文件；
lys20000913的博客
04-07 2690
前端实现下载图片文件/mp3/mp4/音视频/pdf等。简洁高效通用方法。
【vue】window.open默认打开txt文件，改为下载文件
Write less，do more
06-14 2038
window.open默认打开txt文件，改为下载文件
window.open.txt
10-25
关于window.open的一些特性，一些你经常不注意的，值的一看啊
vue window.open如何下载.txt文件
m0_58893670的博客
03-21 1081
下载按钮是通过请求后台接口，后台接口会返回一个resultS3Url地址，前端可以直接打开这个url进行下载的，表格类型的文件下载没有问题，但是浏览器默认TXT文件是直接打开的，所以我们要对TXT文件进行一些处理，利用a标签进行下载。
window.open参数详解.txt
08-14
window.open参数详解.txt
通过window.open使用url下载文件和download属性
孜然卷的博客
09-15 6370
JavaScript通过window.open（url）下载文件修改文件名
window.open下载文件
weixin_62042254的博客
12-09 4570
window.open(`/api/oceanengine/oceanAdModelReq/download?${tokenHeader}=${getToken()}&ctNumber=${row.ctNumber}&downloadStatus=${'Y'}`)
解决js中window.open弹出的是上次的缓存页面问题
10-26
然而，有时候我们可能会遇到一个问题：当使用 `window.open()` 打开一个新的URL时，浏览器显示的并不是最新版本的页面，而是之前访问过的缓存版本。这可能对用户体验造成困扰，尤其是当页面内容需要实时更新时。本文...
window.open()详解及浏览器兼容性问题示例探讨
12-11
`window.open()`是JavaScript中用于打开新浏览器窗口的函数，其基本语法为： ```javascript window.open(pageURL, name, parameters); ``` 1. `pageURL`：指定要打开的页面URL，即子窗口的路径。 2. `name`：定义...
react-new-window:using使用`window.open`在React中弹出新窗口
05-07
支持完整的window.open api 。 为React 16构建（使用ReactDOM.createPortal ）。 阻止弹出窗口的处理程序（通过onBlock prop）。 根据父窗口或屏幕使弹出窗口居中。 安装 npm i react-new-window --save 用法 ...
window.open() 被拦截的问题解决
oscar999的专栏
04-29 1万+
某些浏览器（比如Chrome）出于安全和体验的考虑，会禁止直接在JS中使用 window.open(url) 打开新的窗口。但是如果使用 `window.open(url,'_self') ` 改变当前窗口是允许的。 禁止直接打开的原因就是非用户操作产生的新弹出窗口，会被认为这可能是一个广告，所以禁止了这种行为。
windows.open 在vue前端实现文件下载（自定义下载文件名）
qq740874037的博客
07-06 8721
windows.open 在vue前端实现文件下载（自定义下载文件名）
window.open打开txt文件
神zhi殇的博客
09-28 5530
需求： 后端接口返回txt文件的url后，通过window.open(url)方法，直接是在浏览器中显示txt内容的（且内容为乱码），但是我们需要的是下载功能（除了txt的，其他格式的都是下载，eg：word，excel，ppt等）。 参考： https://blog.csdn.net/lgysjfs/article/details/88641892 解决思路： 1、先判断返回的地址中时候有 .txt 字符 2、判断是什么浏览器，判断使用哪种的 get 的请求 3、拿到地址后，创建 a 标签，设置 a 标签
下载文件
zsy1209的博客
10-08 925
下载文件
前端下载文件或者图片方式，window.open或a标签形式
最新发布
ZXH0122的博客
02-18 2061
Blob对象表示一个不可变、原始数据的类文件对象。
前端下载文件或者图片方式，window.open或者a标签形式
柑橘乌云_
11-27 8672
上面的方案这么多，其实最终还是落到a标签上，所以不管是通过浏览器的内置行为进行下载，还是通过ajax进行下载，文件下载的最终还是浏览器的行为。我项目中遇到的需求如下：首先window.open(URL)的这种方式和a标签方式一样对于pdf和图片都会打开文件，而并非直接下载，那么当然如果自动打开pdf或者图片，鼠标右击图片或者pdf右上角也会有下载入口。但是如果说需求是点击按钮直接下载文件，那么需要采取获取文件流然后拿到文件流通过a标签下载这种当时，当然获取文件流可以前端去做也可以后端做。
js 通过window.open(url)下载文件，修改文件名
ke_sin的博客
12-22 8772
通过window.open(url)下载文件，修改文件名
window.open()实现文件的下载
热门推荐
jattxgt的博客
08-17 4万+
代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <button onclick="xz()">下载模板</button> &lt...
window.open() 下载文件问题分析
fxinn的博客
03-18 1万+
首先这种模式适用于后端返回文件流的模式。 window.open() 打开新的链接，这个链接访问到文件地址之后，就开始下载。其实同理 用a链接下载也是可以的，a链接添加 download 属性，然后herf链接是要下载的文件 原文参考：https://blog.csdn.net/weixin_46074961/article/details/105677732 https://blog.csdn.net/qq_38555490/article/details/99697993 ...
window.open下载文件兼容
09-04
要实现window.open下载文件的兼容性，可以通过以下方式进行处理。 首先，需要确保所下载文件的格式是常见且被广泛支持的。例如，常见的文件类型如文本文件（.txt）、压缩文件（.zip）、PDF文件（.pdf）、Word文档（.docx）等，这些格式都是大多数浏览器默认支持的。 其次，需要添加合适的响应头信息，使浏览器能够正确地解析下载文件。在服务器端的响应头中，设置Content-Disposition为attachment，然后指定文件的名称和扩展名。这样浏览器就能够正确地识别文件的类型，并将其当作下载文件处理。 另外，为了确保兼容性，还可以提供多种下载方式。除了使用window.open打开新窗口下载文件外，还可以使用其他方法，例如使用iframe、a标签的download属性或者通过XMLHttpRequest来实现文件下载。根据不同的浏览器和环境，选择适合的下载方式可以提高兼容性。 最后，要注意不同浏览器对弹窗拦截的处理。一些浏览器会自动屏蔽弹窗，包括使用window.open下载文件时打开的新窗口。为了避免被拦截，可以在下载触发之前先通过用户操作，例如点击按钮等，来触发文件下载操作。这样用户的主动操作可以降低被浏览器拦截的概率。 综上所述，实现window.open下载文件的兼容性，需要选择常见且广泛支持的文件格式、设置合适的响应头信息、提供多种下载方式以及注意浏览器的弹窗拦截规则，这样可以增强兼容性并确保文件能够正确下载。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值