前段时间搞前端下载图片的功能，要求点击即下载，同时支持打包下载，并且支持多浏览器。
以前都是用<a>标签加download属性，但是这种方法只在极少数情况下可以下载，大多情况都是直接在浏览器展示出来的。
于是开始百度各路大神，终于找到了完美的解决办法。
经测试后，不仅可以下载图片，网络上的任何资源都可以下载，简直太完美了。
现在就分享下JS代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS文件下载</title>
<script src="./js/jquery.js"></script>
<!-- FileSaver.min.js：文件下载，见：https://www.jq22.com/jquery-info11353 -->
<script src="./js/FileSaver/FileSaver.min.js"></script>
<!-- jszip.js：打包下载，见：https://www.oschina.net/p/jszip -->
<script src="./js/jszip/jszip.js"></script>
<style>
</style>
<script>
var zip;
var zipName;
var fileFolder;
var fileList;
var fileCount;
function fileDownload(tagId){
var url = $("#"+tagId).attr("src");
var name = $("#"+tagId).attr("name");
saveFile(url, name);
//savePicture(url, name);//绘制图像
}
//保存文件，包括图片、文档、视频等
function saveFile(url, name){
var xhr = new XMLHttpRequest();
xhr.open('get', url, true);
xhr.responseType = 'blob';//二进制对象，binary
xhr.onload = function () {
var blob = xhr.response;//response 属性返回响应的正文，取决于 responseType 属性。
saveAs(blob, name);//FileSaver.js提供的方法
};
xhr.send(null);
}
//绘制图像，不是源文件，图像大小会增大
function savePicture(url, name){
var image = new Image();
image.setAttribute('crossOrigin', 'Anonymous'); // 设置 crossOrigin 属性，解决图片跨域报错
image.src = url;
image.onload = function(){
var canvas = document.createElement('canvas');
canvas.width = image.width;
canvas.height = image.height;
var ctx = canvas.getContext('2d');
ctx.drawImage(image, 0, 0, image.width, image.height);//绘制图像，得到的图像并不是源url，而是重新绘制的
var url = canvas.toDataURL('image/jpg', 1);
var a = document.createElement("a"); // 生成一个a元素
var event = new MouseEvent("click"); // 创建一个单击事件
a.download = name; // 设置图片名称
a.href = url; // 将生成的URL设置为a.href属性
a.dispatchEvent(event); // 触发a的单击事件
};
}
//打包下载：文件列表
function fileDownloadZip(){
zip = new JSZip();
zipName = "test";
fileFolder = zip.folder(zipName);
fileList = [];
fileCount = $("img").length;
for(var i=0; i<fileCount; i++){
var url = $("img").eq(i).attr("src");
var name = $("img").eq(i).attr("name");
saveFileZip(url, name);
}
}
//打包下载：向压缩包添加文件
function saveFileZip(url, name){
var xhr = new XMLHttpRequest();
xhr.open('get', url, true);
xhr.responseType = 'blob';//二进制对象，binary
xhr.onload = function () {
var blob = xhr.response;//response 属性返回响应的正文，取决于 responseType 属性。
fileList.push({name: name, content: blob});
if (fileList.length === fileCount) {
if (fileList.length) {
for (var k = 0; k < fileList.length; k++) {
// 往文件夹中，添加个文件的数据
fileFolder.file(fileList[k].name, fileList[k].content, {
binary: true //二进制
})
}
zip.generateAsync({type: 'blob'}).then(function(content){
saveAs(content, zipName+'.zip');
})
}
}
};
xhr.send(null);
}
</script>
</head>
<body style="padding:20px;">
<img id="img001" width="200" name="img001.jpg" src="https://img-blog.csdnimg.cn/a3f73553ad8f4bdeb3d83b4181d1810b.png">
<div onclick="fileDownload('img001');" style="cursor:pointer">下载</div></br>
</br>
<img id="img002" width="200" name="img002.jpg" src="https://img-blog.csdnimg.cn/8f3084944c054ef3ae1658c4c202d208.png">
<div onclick="fileDownload('img002');" style="cursor:pointer">下载</div></br>
</br>
<div onclick="fileDownloadZip();" style="cursor:pointer">打包下载</div></br>
</body>
</html>