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要全部缓存下来才显示下载窗口。等待时间过长了，不如用第三版多操作两下，可以达到类似多线程的效果。