使用Window.open(url)做文件下载请求地址

最新推荐文章于 2024-04-21 11:48:20 发布
最新推荐文章于 2024-04-21 11:48:20 发布
阅读量3.6w 收藏 2
点赞数 1
文章标签： url 前端 excel pdf ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huqingpeng321/article/details/52856687
版权

项目中有用到poi下载excel和使用Itext下载pdf的需求，由于在前端有个下载操作过程中需要添加蒙层处理，前端使用submit提交下载地址请求，后台返回ResponseEntity(byte[])，在浏览器弹出下载框并点击下载后，由于我们无法判断是什么时候能下载完毕，开始时使用一个同步的ajax做页面刷新来消除蒙层，但是不知道问什么这个会打断浏览器的下载操作？？？（也一直没明白）？？？


。。然后思来想去，突然发现可以使用window.open来打开一个新窗口并发送下载链接到后台去，


-----完美解决这个问题

dream_maker2333
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
window.open以post方式将内容提交到新窗口
01-21
第一种方式 最近在做web项目，碰到需要跨页面传递参数的功能，就是那种需要把当前页面的内容带到新开的子窗体中，以前的做法是传一个id过去，然后在新窗口中去读数据库的内容。虽然不怎么麻烦，但是如果内容么有在数据库里保存，仅仅是处以拟稿状态时，就不能实现了，用户还常常认为是个bug。考虑采用get的方式传递，把需要的内容都序列化然后，通过url去传，显得很臃肿，而且get的传递内容长度有限制。于是就想到用post的方式传递，问题在于open方法不能设置请求方式，一般网页的post都是通过form来实现的。如果仅仅模拟form的提交方式，那么open方法里那种可设置窗体属性的参数又不能用。最后想办法
通过window.open使用url下载文件和download属性
孜然卷的博客
09-15 5684
JavaScript通过window.open（url）下载文件修改文件名
解决window.open()打开图片链接直接下载，而不是新窗口预览的问题
weixin_43688854的博客
03-15 556
window.open打开一个jpeg格式的链接，预期是在新窗口预览，但是直接下载了。我的最终解决方法参照 这个链接 用html包裹图片链接可以解决。
Windows140个操作技巧
杨义贤心灵驿站
03-28 1330
1. 重装Windows XP不需再激活 　　如果你需要重装Windows XP，通常必须重新激活。事实上只要在第一次激活时，备份好Windows/System32目录中的Wpa.dbl文件，就不用再进行激活的工作了。在重装Windows XP后，只需要复制该文件到上面的目录即可。2. 如何知道自己的Windows XP是否已激活 　　打开开始→运行，在弹出的对话框中输入：oobe/mso
JavaScript实现跨标签页通信
TeroZhang的博客
11-02 1471
💡 在 Web 开发中，有时我们需要实现不同页面之间的数据传递和事件触发，比如一个页面打开了另一个页面，然后在新的页面中操作后需要更新原来的页面的内容。这种场景在电商、支付、社交等领域都很常见，那么如何用js来实现不同页面之间的交互呢？下面提供几种常见的方法供大家学习参考！
下载文件
zsy1209的博客
10-08 739
下载文件
前端下载功能实现
weixin_43552533的博客
06-23 1288
近期封装obs上传、下载工具包时，调用obs下载接口时无法下载到本地，直接用window.open(url)时，有的文件只能预览不能下载，无奈只能另寻他路了。文件只预览不下载，可能因同源问题使浏览器无法打开文件下载框，导致文件不能下载。emmmm，百度上这么说的，具体原因本人也未寻到，有缘人见此可为小弟解答12~~~...
js 通过window.open(url)下载文件，修改文件名
ke_sin的博客
12-22 8315
通过window.open(url)下载文件，修改文件名
windows.open 在vue前端实现文件下载（自定义下载文件名）
qq740874037的博客
07-06 8203
windows.open 在vue前端实现文件下载（自定义下载文件名）
下载文件使用window.open
longwufengxiao的博客
11-19 1415
无论下载什么压缩包还是文档，使用window.open都可以解决。 这是我自己封装的api，接口所需要的参数 request.url是我自己前端跨域的，一般后端跨域，自己弄有点麻烦。 页面直接调用接口就行了。 不需要花里胡哨的。直接通过浏览器下载。 ...
前端导出或下载无感，不新开窗口
heerey525
12-25 3756
原因： 在导出或者下载的功能里常见的就是window.open(’下载的url地址’)，但是这样会导出是会新打开一个浏览器窗口，进行下载，在一些场景下是交互不友好的（如web页内嵌入C++的桌面应用） 优化： 利用iframe代替window.open()方法，通过将下载的url地址变更iframe的src属性来进行下载，当然要将iframe隐藏起来，这样就避免了window.open()方式下载的新开窗口的出现，代码如下： <template> <!-- 用改变iframe的src下载
window.open的例子和使用方法以及参数说明
09-25
windows.open这个是JavaScript函数，但是在应用起来的时候总会遇到比较多的麻烦，因为参数非常多，用法也非常的多
Ajax请求响应中用window.open打开新窗口被拦截的解决方法
12-10
ajax 异步请求成功后需要新开窗口打开 url，使用的是 window.open() 方法，但是会被浏览器给拦截了，需要用户点下。 二、问题分析 　浏览器之所以拦截新开窗口是因为该操作并不是用户主动触发的，所以它认为这是不...
window.open()实现post传递参数
01-19
在打开的子系统页面中还有个ztree插件实现的树状菜单需要参数系统ID才能初始化，直接使用window.open(url,”_blank”)，会使得url长度过长，同时还暴露一些参数。故想改用post方式提交，隐藏提交过程中参数的传递。...
Storage 工具如何封装(前缀、加密、过期时间等)及localStorage的基础介绍
qq_43641110的博客
04-18 1133
​​​​​​​。
JEECG表格选中状态怎么去掉
weixin_39031037的博客
04-19 504
官网代码（在取消选中状态的时候不生效）
webman 事务回滚失效问题记录
最新发布
juan9872的博客
04-21 543
webman是一款基于workerman开发的高性能HTTP服务框架。webman用于替代传统的php-fpm架构，提供超高性能可扩展的HTTP服务。你可以用webman开发网站，也可以开发HTTP接口或者微服务。除此之外，webman还支持自定义进程，可以做workerman能做的任何事情，例如websocket服务、物联网、游戏、TCP服务、UDP服务、unix socket服务等等。
【1524】java投票管理系统Myeclipse开发mysql数据库web结构java编程计算机网页项目
qq_251836457的博客
04-18 951
2、开发环境为TOMCAT7.0,Myeclipse8.5开发，数据库为Mysql5.0，使用java语言开发。(5)投票选项管理：对投票选项信息进行添加、删除、修改和查看。(6)投票记录管理：对投票记录信息进行添加、删除、修改和查看。(1)管理员管理：对管理员信息进行添加、删除、修改和查看。(2)用户管理：对用户信息进行添加、删除、修改和查看。(3)公告管理：对公告信息进行添加、删除、修改和查看。(4)投票管理：对投票信息进行添加、删除、修改和查看。4）投票浏览查看、查看投票、投票记录。
C# HL7消息体
xiaohua616的博客
04-18 421
HL7消息解析
window.open下载文件增加进度条
10-18
要实现下载文件时增加进度条，可以使用XMLHttpRequest对象来实现。具体步骤如下： 1. 创建XMLHttpRequest对象 2. 使用open方法打开请求，设置请求方式为GET，请求地址为文件的URL 3. 使用responseType属性设置响应类型为blob，以便获取文件的二进制数据 4. 使用onprogress事件监听下载进度，更新进度条 5. 使用send方法发送请求 6. 在onload事件中获取响应数据，创建URL对象生成下载链接，使用a标签的click方法触发下载 以下是示例代码： ```javascript function downloadFile(url) { const xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.responseType = 'blob'; xhr.onprogress = function(event) { if (event.lengthComputable) { const percentComplete = event.loaded / event.total * 100; // 更新进度条 } }; xhr.onload = function(event) { const blob = xhr.response; const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'file'; a.click(); URL.revokeObjectURL(url); }; xhr.send(); } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值