资讯动态

a标签下载视频只跳转链接,没下载

发布时间:2026/8/21 7:34:48 来源:尧图企业网站定制
问题描述之前用fetchblob做下载这个在下载小文件时没什么问题当下载大文件如视频时就会导致要本地缓存很长时间后才下载到浏览器而且中间没有进度条用户以为没下载。所以改成a标签触发浏览器下载。问题原因视频跨域或后端没配置Content-Disposition:attachment;解决办法1.视频不要跨域与前端项目放在同个服务器。2.后端配置Content-Disposition:attachment;满足一个就行。可行性测试直接在浏览器打开视频地址如果视频配置了Content-Disposition:attachment;就会自动下载而不是播放视频。可自行用node启动一个服务或视频放前端本地public文件夹做测试。node测试Content-Disposition:attachment代码const httprequire(http);const fsrequire(fs);const pathrequire(path);const PORT3001;const serverhttp.createServer((req, res){//全部请求统一开启CORS跨域res.setHeader(Access-Control-Allow-Origin,*);res.setHeader(Access-Control-Allow-Methods,GET,OPTIONS);res.setHeader(Access-Control-Allow-Headers,*);// 暴露响应头fetch下载blob需要 res.setHeader(Access-Control-Expose-Headers,*);if(req.url/test.mp4){// attachment强制下载 const mp4Pathpath.join(__dirname,./test.mp4);fs.readFile(mp4Path,(err, data){if(err){res.writeHead(404,{Content-Type:text/plain;charsetutf-8});returnres.end(找不到 test.mp4请把mp4放在脚本同目录);}const fileName演示视频.mp4;const encodedNameencodeURIComponent(fileName);res.writeHead(200,{Content-Type:video/mp4, // 注意全部是【半角减号】filename* UTF‑8编码处理中文文件名Content-Disposition:attachment;filenamedemo.mp4;filename*UTF-8${encodedName}});res.end(data);});}elseif(req.url/play.mp4){// inline模式正常播放不设置attachment const mp4Pathpath.join(__dirname,./test.mp4);fs.readFile(mp4Path,(err, data){if(err){res.writeHead(404,{Content-Type:text/plain;charsetutf-8});returnres.end(找不到 test.mp4);}res.writeHead(200,{Content-Type:video/mp4// 不写Content‑Disposition默认inline在线播放});res.end(data);});}else{res.writeHead(200,{Content-Type:text/html;charsetutf-8});res.end(divstylepadding:20px;font-size:16px;pahref/test.mp4/test.mp4 → attachment直接弹出下载不会播放视频/a/ppahref/play.mp4/play.mp4 → inline浏览器直接播放视频/a/pbr/videosrc/play.mp4controlsstylewidth:700px;/video/div);}});server.listen(PORT,(){console.log(服务启动http://127.0.0.1:${PORT});console.log(请把mp4文件命名 test.mp4放到脚本同一文件夹);});

读完文章,也想定制专属网站?

尧图设计师 24 小时内与您沟通定制方案

免费获取报价