当前位置: 首页 > news >正文

【前端】js下载文件(mp4视频图片pdf等) 而不是新窗口直接打开

【前端】js下载 文件(mp4视频图片pdf等) 而不是新窗口直接打开

不打开新窗口进行下载

function download(res) {
var elemIF = document.createElement("iframe");
elemIF.src = res;
elemIF.style.display = "none";
document.body.appendChild(elemIF);
}


window.open(url, '_blank');


a标签
const ele = document.createElement('a'); //新建一个a标签
ele.setAttribute('href', url);
ele.click();


blob
fetch(url).then((res) =>
res.blob().then((blob) => {
var a = document.createElement('a');
var url = window.URL.createObjectURL(blob);
a.href = url;
a.download = name; // 下载名称
a.click();
window.URL.revokeObjectURL(url);
})
);

点击下载 而不是新窗口 打开

<!DOCTYPE html> <html> <head> <title>视频下载</title> <script src="https:0.min.js"></script> </head> <body> <h1>视频下载</h1> <button onclick="downloadVideo()">下载视频</button> <script> function downloadVideo() { var videoUrl = "https://xxx.com//out/aaa.mp4"; // 替换为你要下载的视频的URL var fileName = "video.mp4"; // 下载的文件名 // 创建一个隐藏的a标签 var a = document.createElement('a'); a.style.display = 'none'; document.body.appendChild(a); // 使用XMLHttpRequest下载视频 var xhr = new XMLHttpRequest(); xhr.open('GET', videoUrl, true); xhr.responseType = 'blob'; xhr.onload = function() { if (xhr.status === 200) { // 将视频Blob对象创建一个临时URL var videoBlob = xhr.response; var url = window.URL.createObjectURL(videoBlob); // 设置a标签的属性,并触发点击事件进行下载 a.href = url; a.download = fileName; a.click(); // 释放URL对象 window.URL.revokeObjectURL(url); } }; xhr.send(); } </script> </body> </html>
http://www.zskr.cn/news/1474261.html

相关文章:

  • 终极教程:30分钟完成iPad mini全系列越狱的完整指南
  • 028、Zephyr RTOS设备树实战:I2C配置
  • 高频开关电源变压器设计:从原理到实践,突破调参瓶颈
  • 基于Git Hook的代码质量防线:Commit前自动格式化+静态扫描
  • 终极指南:如何在macOS上轻松制作Windows启动盘?WinDiskWriter让你零门槛搞定!
  • 2026甄选:江西电大中专报名与成人高考函授报考正规品牌机构解析 - 品牌企业推荐师(官方)
  • uesave:5分钟掌握虚幻引擎游戏存档编辑,解锁无限游戏可能
  • 3分钟搞定!Mac用户的Windows启动盘制作终极指南:WinDiskWriter完全教程
  • 如何快速上手Flashtool:索尼Xperia设备刷机终极指南
  • 从《西游记》看技术团队管理:唐僧为何是领导?
  • 半导体成本解析与代理商谈判实战:从PN结到芯片价格的工程师指南
  • 深圳家庭教育指导师报名机构哪家好?正规授权机构推荐:中山优才教育 - 当下教育培训干货
  • Himalaya源码解析:深入理解Lexer与Parser模块的工作原理
  • 瑞祥商联卡没用完怎么办?实用回收处理方法参考 - 圆圆收
  • next-images插件生态扩展:与其他Next.js插件集成方案
  • 深度解析AI自瞄系统:基于YOLOv8/YOLOv10的FPS游戏智能瞄准解决方案
  • 从傅里叶到拉普拉斯:一个‘衰减因子’如何让信号分析起死回生?保姆级理解指南
  • Visual Studio Code Git Graph:可视化Git工作流的革命性工具
  • 终极指南:如何用SMPL-X快速构建逼真的3D人体模型
  • google-translate-api:构建无限制免费翻译服务的Node.js技术实现方案
  • 如何快速创建Windows远程应用:RemoteApp Tool完整操作指南
  • 日本发布《数据空间利用及安全指南》2.0版
  • 2026延安黄金回收白银回收铂金回收 5 家高性价比门店实地测评盘点 - 中安检金银铂钻回收
  • UnitySimpleFileBrowser核心功能解析:拖拽交互与窗口 resize 实现原理
  • 终极指南:如何使用Flashtool轻松刷写Xperia设备固件
  • DSP串口GPS数据解析实战:从NMEA协议到液晶显示
  • 新手入门:通过快马生成的示例代码学习系统电池分析开发基础
  • 免费跨平台音乐播放器终极指南:告别会员费的全新音乐体验
  • 如何优雅地管理你的B站内容收藏:BiliTools跨平台解决方案
  • 如何永久免费使用IDM下载管理器:开源脚本终极指南