试着分析一下

网页结构如图所示，word文档是在Modal框里面，是用一张张图片进行展示的，并使用了虚拟列表，只有当图片出现在可视区中才会进行加载

本能的想法: 看浏览器能不能直接通过链接访问图片，可以的话就获取所有img标签中的链接，然后批量下载。 69张图片太多了，谁愿意一个个去找然后点另存为呢！

获取所有的链接

这一步非常的简单，只需要我们将进度条拖到最底端，让所有图片都加载出来，然后通过js脚本获取就可以了

let src = document.getElementsByTagName("img")
let res = [];
for(let i = 0; i < src.length; i++){
    res.push(src[i].currentSrc)
}
console.log(res)

下载图片方案

< a href=" " download >下载</ a>

使用Html5中a标签的download属性，点击a标签之后就可以下载了，参考这篇文章：

了解HTML/HTML5中的download属性

但是实际使用过程中发现，当我们创建了a标签之后，跨域资源是不能进行下载的，也是只能进行预览

<a href="https://www.ketangpai.com/images/common/logo_blue.png" download="a7995a">
    不可以跨域下载的链接，只能预览
</a>

解决方案

通过图片的url地址请求获得图片的Blob(二进制大对象)数据
通过URL.createObjectURL(fileBlob)将Blob转成同源的url图片地址
创建a标签并通过download属性下载图片

第一步，获取图片Blob

    function download(link){
        const xhr = new XMLHttpRequest();
        // link是图片的url地址
        xhr.open('GET',link)
        xhr.responseType = 'blob'
        xhr.send()
        xhr.onload = function () {
            const fileBlob = xhr.response;
            // 获取到了图片的Blob数据
            console.log(fileBlob)
        }
    }

第二步，将Blob转化为同源的url

const fileUrl = URL.createObjectURL(fileBlob)
console.log(fileUrl)

现在它们就是同源的了，可以通过a标签的download属性进行下载

其实更准确的来说，这里不是转成url地址，是添加了一个映射，blob在内存中

第三步，创建a标签

const ele = document.createElement('a')
ele.setAttribute('href',fileUrl)
ele.setAttribute('download',"")
ele.click()
ele.innerHTML = '下载'
document.body.appendChild(ele)

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    function download(link){
        const xhr = new XMLHttpRequest();
        xhr.open('GET',link)
        xhr.responseType = 'blob'
        xhr.send()
        xhr.onload = function () {
            const fileBlob = xhr.response;
            console.log(fileBlob)
            const fileUrl = URL.createObjectURL(fileBlob)
            console.log(fileUrl)
            const ele = document.createElement('a')
            ele.setAttribute('href',fileUrl)
            ele.setAttribute('download',"")
            ele.click()
            ele.innerHTML = '下载'
            document.body.appendChild(ele)
        }
    }
    download("https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bb72413461364175af5edf2a1fae4446~tplv-k3u1fbpfcp-no-mark:240:240:240:160.awebp?" )
</script>
<a href="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bb72413461364175af5edf2a1fae4446~tplv-k3u1fbpfcp-no-mark:240:240:240:160.awebp?" download="">可以跨域下载的链接</a>
<a href="https://www.ketangpai.com/images/common/logo_blue.png" download="a7995ad.svg">不可以跨域下载的链接，只能预览</a>
</body>
</html>

页面加载完毕后就会自动下载掘金的这张图片

问题

虽然有些图片可以通过上述方式进行图片下载，但是有些图片在进行ajax数据请求得到Blob时，会产生跨域的错误，无法获得Blob，这可能就需要后端的设置了

H5的新特性-使用a标签，download属性下载图片