一键下载网页静态资源

引子：

想扒个页面当静态页面本地看看构造，按理来说chrome cmd + s 就可以了，但是有很多情况下这个图片是异步请求获取的，或者说是canvas中的图片，我们只能在source中干瞪眼的看着有这个请求。总不能一个url一个url的复制吧，想想就蠢。

如果你只想获取方法，直接翻到最后的代码保存为书签，你想拷贝的网页加载后点击书签就自动下载了

获取网页资源：

window.performance.getEntries()
复制代码

performance属性用于监控windows行为获得的是一个数组

(15) [PerformanceNavigationTiming, PerformanceResourceTiming, PerformanceResourceTiming, PerformancePaintTiming, PerformancePaintTiming, PerformanceResourceTiming, PerformanceResourceTiming, PerformanceResourceTiming, PerformanceResourceTiming, PerformanceResourceTiming, PerformanceResourceTiming, PerformanceResourceTiming, PerformanceResourceTiming, PerformanceResourceTiming, PerformanceResourceTiming]
复制代码

这个数组里装的就是每个请求的属性了，name属性就是请求的url，initiatorType属性就是请求的类型了，图片对应的类型是"img",我主要是需要获得img，因为其他的我都能直接网页保存获取。

那现在我又了url，怎么批量下载呢？web端好像没什么批量下载的方法，至少我知道的下载方法好像就是a标签加个download，之后点击他

a = document.createElement('a');
a.href = v.name;
a.download = v.name.substr(v.name.lastIndexOf("/")+1);
复制代码

所以我就一直循环这段代码创造多个a标签dom节点然后用click()事件调用

完整代码：

javascript:(function(){
    let data = window.performance.getEntries();
    urlList = [];
    data.forEach(function(v,i,array){
        if (v.initiatorType === 'img'){
            urlList.push(v.name);
            a = document.createElement('a');
            a.href = v.name;
            a.download = v.name.substr(v.name.lastIndexOf("/")+1);
            a.click();
        }
    });
    console.log(urlList);
})();
复制代码

复制书签中保存就可用了，然后可以根据需要下载不同的类型数据

琐事：

新年到了，很反感那些说别新年新气象了，你2018年还是这个逼样的人。自己活的庸庸碌碌没事抖个机灵还要调侃人家的新年新气象。2017年我确实完成了年初定下的一些目标，到年末确实会有些成就感，但是还是不够的。目标总归要有的，希望大家定目标的时候别人能说哇，他今年要做这么厉害的事情，真棒。而不是这个屌丝今年又再吃什么牛逼

转载于:https://juejin.im/post/5a4c7035518825519409020f