JS实现下载文件

最近需要下载一些视频,数量不算多,百十个,动态加载比较多,写爬虫比较麻烦,想想不如直接做个书签JS直接点点鼠标下载了。

第一个:直接打开链接

javascript:(function() {var uri_enc = document.getElementsByClassName("xxx")[0].src;window.open(uri_enc);}) ();

但是这样文件名是默认文件名,
于是第二个:创建一个a标签,然后点击。

javascript:(function()
{var url = document.getElementsByClassName("url")[0].src;
const a = document.createElement("a");
a.href = url;
a.download = document.getElementsByClassName("name")[0].innerText.split(":",)[1];
a.name=document.getElementsByClassName("name")[0].innerText.split(":",)[1];
a.click();
a.remove();
})();

但是对于PDF、视频是无效的,浏览器会直接浏览而不是默认下载。
想想还是改进下第一个方案。
从页面提取想要的字符串做文件名
第三版:

javascript:(function() {
var elm = document.createElement('textarea');
var str= document.getElementsByClassName("name")[0].innerText.split(":",)[1];
elm.value = str;
document.body.appendChild(elm);
elm.select();
document.execCommand('copy');
document.body.removeChild(elm);
var uri_enc = document.getElementsByClassName("url")[0].src;
window.open(uri_enc);
}) ();

但是要多操作两次键盘,于是想通过获取blob来实现下载视频
第四版:

javascript:(function (){
var url=document.getElementsByClassName("url")[0].src;
var name=document.getElementsByClassName("name")[0].innerText.split(":",)[1];
fetch(url)
.then(res => res.blob())
.then(blob => {
const a = document.createElement("a");
const objectUrl = window.URL.createObjectURL(blob);
a.download = name;
a.href = objectUrl;
a.click();
window.URL.revokeObjectURL(objectUrl);
a.remove();
})
}) ();

但是实际使用效果有些差,fetch要全部缓存下来才显示下载窗口。等待时间过长了,不如用第三版多操作两下,可以达到类似多线程的效果。

posted on   因思道客  阅读(371)  评论(0编辑  收藏  举报

相关博文:
阅读排行:
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· 记一次.NET内存居高不下排查解决与启示

导航

< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5
点击右上角即可分享
微信分享提示