阿里巴巴矢量图标批量下载

---

前言

阿里巴巴矢量图标库作为国产的图标库，使用人数多、图标也很丰富。但在功能上还是有改进的地方的，如最近我在使用的过程中就遇到批量下载矢量图标的问题……

在网上找了好几篇文章，然而基本上都是千篇一律的，无疑的是通过浏览器的控制台写js去下载图标是必然的途径……

虽然阿里巴巴矢量图标库是有批量操作的功能，但只能加入到购物车再下载，而这种操作既麻烦又有一次最多下载20个图标的数量限制，要么就逐个下载更不可取。或许你可以把Font class字体文件下载到本地再去使用，但这里我们主要探讨如何一次性下载20个以上的svg图标文件。

---

Iconfont图标批量下载20个以上要如何实现？

1.解决思路

通过js代码获取阿里巴巴矢量图标库页面中的svg标签，然后使用文件流将其下载到本地。

2.实现方法

1.打开阿里巴巴矢量图标库的项目

https://www.iconfont.cn/manage/index?manage_type=myprojects

2.按F12打开浏览器的开发者工具执行自动下载图标的代码

tips：可以把浏览器的下载提示关掉并指定好下载路径，否则每次下载图标还要手动确认下载

直接批量下载阿里巴巴矢量图标的js代码如下：

// 保存本地文件
function saveLocalFile(content, fileName) {
    let downLink = document.createElement('a')
    downLink.download = fileName
    downLink.style.display = 'none'
    let blob = new Blob([content])
    downLink.href = URL.createObjectURL(blob)
    document.body.appendChild(downLink)
    downLink.click()
    document.body.removeChild(downLink)
}

// 批量下载阿里巴巴矢量图标
function downloadIconfont() {
    // 获取当前项目的图标
    let iconList = document.querySelectorAll('.project-iconlist .icon-item')
    console.log('当前项目的图标数量：' + iconList.length)
    iconList.forEach(function (item, index) {
        // 添加定时器去下载，否则最多下载10个。至于间隔时间可自行把握
        setTimeout(() => {
            // 获取svg图标的内容以写入到文件中
            let svg = item.children[0].innerHTML
            // 获取图标名称作为svg文件名。这里给文件名取时间戳作为后缀，可防止覆盖下载重名的svg图标
            let fileName = item.children[1].innerText + '_' + new Date().getTime() + '.svg' 
            saveLocalFile(svg, fileName)
        }, 100 * index)
    })
}

// 执行批量下载阿里巴巴矢量图标
downloadIconfont()

导出阿里巴巴矢量图标并压缩的js代码如下：

// 将js的引用写入到阿里巴巴矢量图标库的网站上会有跨域问题。
// 如果需要下载打包的，需将这个网址的第13行代码（即整个jszip.min.js的代码）拷贝进来。
// https://github.com/Stuk/jszip/blob/master/dist/jszip.min.js

// 导出阿里巴巴矢量图标（压缩包）
async function exportIconfont() {
    // // 引入jszip.min.js 
    // let script = document.createElement('script');
    // script.src = "https://github.com/Stuk/jszip/blob/master/dist/jszip.min.js";
    // document.getElementsByTagName('head')[0].appendChild(script);

    let iconList = document.querySelectorAll('.project-iconlist .icon-item')
    console.log('当前项目的图标数量：' + iconList.length)

    let zip = new JSZip()
    const currDate = new Date()
    const dateWithOffset = new Date(currDate.getTime() - currDate.getTimezoneOffset() * 60000)
    // 修复jszip插件打包文件或文件夹的修改时间有误的BUG
    JSZip.defaults.date = dateWithOffset
    let count = 0
    await iconList.forEach(item => {
        let svg = item.children[0].innerHTML
        let fileName = item.children[1].innerText + '.svg'
        while(zip.files[fileName]){
            // 重命名同名的图标
            count++;
            fileName = item.children[1].innerText + count + '.svg'
        }
        let svgBlob = new Blob([svg])
        // 往zip压缩包的icon文件夹添加svg文件
        zip.folder('icon').file(fileName, svgBlob)
        count = 0
    })
    // 生成zip文件并下载
    zip.generateAsync({
        type: 'blob'
    }).then(function (content) {
        let projectName = document.querySelectorAll('.project-top .top-title')
        let fileName = projectName[0].textContent + '.zip'
        saveLocalFile(content, fileName)
    })
}

// 执行导出阿里巴巴矢量图标（压缩包）
exportIconfont()

---

至此，批量下载阿里巴巴矢量图标的解决方案到此结束。