完整代码
链接：https://pan.baidu.com/s/1IRj0auNm5FzfwPYM-ApNmA
提取码：kmgw
实现思路及踩过的坑
1.将图片样式到downloadImg-box中，并在后面遍历；
2.依次下载，等第一张图片执行完下载后再下载下一张【因为不这么搞，当图片下载量比较大而图片又是几m的时候就凉】
3.用户中360浏览器用户基数比较大，原有的功能是通过base64下载的图片，360浏览器不可以，就将base64转为图片后再下载；
4.imgName是图片名，你可以根据实际情况去改变后面这个拼接；
5.加了一层遮罩，显示下载进度【不然下载过程中样式是真的鬼畜】
6.代码中较多引用了网上的，如有原作者看到，可以回复我，我将你链接添加进来
<html>
<meta charset="utf-8">
<head>
<link rel="stylesheet" type="text/css" href="download.css"/>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="html2canvas.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<ul class="downloadImg-box">
</ul>
<!--遮罩-->
<div class="download-mask">
<div class="loader">
<div class="mt30 loader-tip">图片正在下载中，请勿关闭浏览器</div>
<div class="mt5">
<font class="loader-num mr10">1</font>/
<font class="loader-all">0</font>
</div>
</div>
</div>
</body>
<script>
for(var i = 0;i<2;i++){
$('.downloadImg-box').append(
'<li class="downloadImg-bg" id="li'+i+'">'+
' <div class="tac downloadImg-tit">'+
' <b>合格证书</b>'+
' </div>'+
' <div class="download-box flex-row">'+
' <div class="download-user">'+
' <div class="download-picture">'+
' <img src="download-picture-1.jpg"/>'+
' </div>'+
' <div class="download-line">'+
' <div class="download-line-name">'+
' 工作单位：'+
' </div>'+
' <div class="download-line-word">'+
' 宁夏某个有限公司'+
' </div>'+
' </div>'+
' <div class="download-line">'+
' <div class="download-line-name">'+
' 身份证号：'+
' </div>'+
' <div class="download-line-word download-idCard">'+
' 640321111111111111'+
' </div>'+
' </div>'+
' <div class="download-line">'+
' <div class="download-line-name">'+
' 证书编号：'+
' </div>'+
' <div class="download-line-word">'+
' xx编号 '+
' </div>'+
' </div>'+
' </div>'+
' <div class="download-content flex-1">'+
' <div class="download-content-show">'+
' <font class="download-name">波波</font>同志于'+
' <font>2020</font>年'+
' <font>6</font>月'+
' <font>6</font>日至'+
' <font>7</font>月'+
' <font>6</font>日，参加“软件技能提升”培训班学习,共完成'+
' <font>60</font>学时学习。经考试成绩合格,特发此证。'+
' </div>'+
' <div class="download-content-seal">'+
' <div>培训单位（盖章）</div>'+
' <div class="mr40">'+
' <font>2020</font>年'+
' <font>6</font>月'+
' <font>6</font>日'+
' </div>'+
' </div>'+
' </div>'+
' </div>'+
'</li>'
);
}
downImg();
function downImg() {
var downloadNum = 1; //图片从第二张开始下载
var imgLength = $('.downloadImg-box li').length; //图片张数
doScreenShot(0);
$('.loader-all').html(imgLength);
$('.downloadImg-box').show();
function doScreenShot(num) { //点击截图，点击按钮后从第一张开始下载，下载完后重复执行这个方法
html2canvas($("#li" + num), {
onrendered : function(canvas) {
canvas.id = "mycanvas";
var mainwh = $("#li" + num).width();
var mainhg = $("#li" + num).height();
var imgName = ($("#li" + num).find('.download-name').html() + "--" + $("#li" + num).find('.download-idCard').html()); //这个是当前的姓名+身份证号拼接，并向download()传参，改变img文件名
var img = convertCanvasToImage(canvas);
img.onload = function() {
img.onload = null;
canvas = convertImageToCanvas(img, 0, 0, 2185, 1535); //设置图片大小和位置
img.src = convertCanvasToImage(canvas).src;
$(img).css({
background : "#fff"
});
//调用下载方法
if (browserIsIe()) { //假如是ie浏览器
DownLoadReportIMG(img.src, imgName);
$('.loader-num').html(num + 1);
if ((num + 1) == imgLength) {
$('.loader-tip').html('下载已完成,可前往浏览器保存地址查看下载证书');
}
} else {
download(img.src, imgName);
$('.loader-num').html(num + 1);
if ((num + 1) == imgLength) {
$('.loader-tip').html('下载已完成,可前往浏览器保存地址查看下载证书');
}
}
}
}
});
}
function convertCanvasToImage(canvas) { //绘制显示图片
var image = new Image();
image.src = canvas.toDataURL("image/png"); //获得图片地址
return image;
}
function convertImageToCanvas(image, startX, startY, width, height) { //生成canvas元素，相当于做了一个装相片的框架
var canvas = document.createElement("canvas");
canvas.width = width;
canvas.height = height;
canvas.getContext("2d").drawImage(image, startX, startY, width, height, 0, 0, 2185, 1535); //在这调整图片中内容的显示（大小,放大缩小,位置等）
return canvas;
}
function DownLoadReportIMG(imgPathURL) { //如果隐藏IFRAME不存在，则添加
if (!document.getElementById("IframeReportImg"))
$('<iframe style="display:none;" id="IframeReportImg" name="IframeReportImg" onl oad="DoSaveAsIMG();" width="0" height="0" src="about:blank"></iframe>').appendTo("body");
if (document.all.IframeReportImg.src != imgPathURL) { //加载图片
document.all.IframeReportImg.src = imgPathURL;
} else { //图片直接另存为
DoSaveAsIMG();
var num = downloadNum++;
if (num < imgLength) {
doScreenShot(num);
}
if (num == imgLength) {
$('.downloadImg-box').hide();
}
}
}
function DoSaveAsIMG() {
if (document.all.IframeReportImg.src != "about:blank")
window.frames["IframeReportImg"].document.execCommand("SaveAs");
}
function download(src, imgName) { // 另存为图片
var MIME = {
"image/jpeg" : "jpeg",
"image/png" : "png",
"image/jpg" : "jpg"
};
//检测下载
var fname = 'a' + "." + MIME[getContentType(src)];
var blob = getBlob(src);
if (navigator.msSaveBlob) {
navigator.msSaveBlob(blob, fname);
} else {
var $a = $("<a></a>").attr("href", URL.createObjectURL(blob)).attr("download", imgName + ".png");
$a[0].click();
var num = downloadNum++;
if (num < imgLength) {
doScreenShot(num);
}
if (num == imgLength) {
$('.downloadImg-box').hide();
}
}
function getBlob(base64) {
return b64toBlob(getData(base64), getContentType(base64));
}
function getContentType(base64) {
return /data:([^;]*);/i.exec(base64)[1];
}
function getData(base64) {
return base64.substr(base64.indexOf("base64,") + 7, base64.length);
}
function b64toBlob(b64Data, contentType, sliceSize) {
contentType = contentType || '';
sliceSize = sliceSize || 512;
var byteCharacters = atob(b64Data);
var byteArrays = [];
for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
var slice = byteCharacters.slice(offset, offset + sliceSize);
var byteNumbers = new Array(slice.length);
for (var i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}
var byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}
var blob = new Blob(byteArrays, {
type : contentType
});
return blob;
}
}
function browserIsIe() { //判断是否为ie浏览器
if (!!window.ActiveXObject || "ActiveXObject" in window)
return true;
else
return false;
}
}
</script>
</html>