阿里巴巴矢量图标库作为国产的图标库，使用人数多、图标也很丰富。但在功能上还是有改进的地方的，如最近我在使用的过程中就遇到批量下载矢量图标的问题……
在网上找了好几篇文章，然而基本上都是千篇一律的，无疑的是通过浏览器的控制台写js去下载图标是必然的途径……
虽然阿里巴巴矢量图标库是有批量操作的功能，但只能加入到购物车再下载，而这种操作既麻烦又有一次最多下载20个图标的数量限制，要么就逐个下载更不可取。或许你可以把Font class字体文件下载到本地再去使用，但这里我们主要探讨如何一次性下载20个以上的svg图标文件。
通过js代码获取阿里巴巴矢量图标库页面中的svg标签，然后使用文件流将其下载到本地。
https://www.iconfont.cn/manage/index?manage_type=myprojects
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()至此，批量下载阿里巴巴矢量图标的解决方案到此结束。
