js证书批量生成与打包下载

前边有提到最近的一个证书生成保存下载打印的需求。

之前实现的是一个单个操作的页面，现在把实现的批量效果和进度效果的代码展示出来。

html

 <button class="btn btn-primary" ng-click="derive()" style="margin-top: 20px;">生成证书（方案1）</button>
                     <button class="btn btn-primary" ng-click="derive2()" style="margin-top: 20px;">生成证书（方案2）</button>
                     <button class="btn btn-primary" ng-click="derive3()" style="margin-top: 20px;">生成证书（方案3）</button>
 <grid-table data-control="tableControl"></grid-table>
         <!-- 进度 -->
         <div class="progress_cls" ng-if="progressShow">
             <div class="layui-progress layui-progress-big" lay-filter="notifierProgress" lay-showpercent="yes">
                 <div class="layui-progress-bar" lay-percent="0%">
                 <!-- 解决数字不出来问题 -->
                     <span class="layui-progress-text">0%</span>
                 </div>
             </div>
             <div class="progress_stitistics_cls">
                 <div>总数：<span>{{progressTotal}}</span></div>
                 <div>成功：<span>{{doneNum}}</span></div>
                 <div>失败：<span>{{failedNum}}</span></div>
             </div>
             <button class="btn btn-primary" ng-click="closeProgress()" ng-if="progressDone">确定</button>
         </div>
         <!-- 进度2 -->
         <div class="progress_cls" ng-if="progressShow2">
             <div class="layui-progress layui-progress-big" lay-filter="notifierProgress2" lay-showpercent="yes">
                 <div class="layui-progress-bar" lay-percent="0%">
                 <!-- 解决数字不出来问题 -->
                     <span class="layui-progress-text">0%</span>
                 </div>
             </div>
             <div class="progress_stitistics_cls">
                 <div>总数：<span>{{progressTotal}}</span></div>
                 <div>当前完成：<span>{{doneNum}}</span></div>
             </div>
             <button class="btn btn-primary" ng-click="closeProgress()" ng-if="progressDone2">确定</button>
         </div>
         <!-- 进度3 -->
         <div class="progress_cls" ng-if="progressShow3">
             <div class="layui-progress layui-progress-big" lay-filter="notifierProgress3" lay-showpercent="yes">
                 <div class="layui-progress-bar" lay-percent="0%">
                 <!-- 解决数字不出来问题 -->
                     <span class="layui-progress-text">0%</span>
                 </div>
             </div>
             <div class="progress_stitistics_cls">
                 <div>总数：<span>{{progressTotal}}</span></div>
                 <div>当前完成：<span>{{doneNum}}</span></div>
             </div>
             <button class="btn btn-primary" ng-click="closeProgress()" ng-if="progressDone3">确定</button>
         </div>

css

 #toPrint {
     position:absolute;
     left: 10000px;
     top: 50%;
 }

 #toPrint div {
     position:absolute;
     font-weight: bold;
 }

 #toPrint img {
     position:absolute;
 }

 #textArea {
     width: 100%;
     height: 100%;
 }

 .printCanvas {
     display:inline-block;
 }

 #toPrint3 {
     position:absolute;
     left: 10000px;
     top: 50%;
     display: inline-flex;
 }

js

  /*
      导出数据
      */
     $scope.derive = function () {
         var toSendList = [];
         var passList = [];
         for(var i=0;i<$scope.tableControl.rows.length;i++) {
             if($scope.tableControl.rows[i].select) {
                 toSendList.push($scope.tableControl.allData[i]);
                 //没有数据，原5，现先1
                 if(1 == $scope.tableControl.allData[i].applyStatus) {
                     passList.push($scope.tableControl.allData[i]);
                 }
             }
         }
         if(1 > toSendList.length) {
             layer.alert("请选择需要生成证书的记录");
             return;
         }
         if(toSendList.length != passList.length) {
             layer.alert("只能对审核通过的记录进行证书生成");
             return;
         }
         layer.confirm("是否确认生成证书？", {
             btn: ['确定', '取消']
         }, function () {
             $scope.progressTotal = toSendList.length;
             $scope.doneNum = 0;
             $scope.failedNum = 0;

             layer.closeAll();
             var maskLoad = layer.load(1, {shade: [0.8, '#393D49']});
             //打开进度
             $scope.curProgress = "0%";
             $scope.progressShow = true;
             $.each(toSendList, function(index, e){
                 var url = location.origin+"/pages/print/printBatch.html?"+encodeURIComponent(e.studentName)+"&&"+encodeURIComponent(e.applySchoolName);
                 //services.save_notifier(url).success(function (res) {
                 $.ajax({
                     url: location.origin+'/basic/school',
                     headers: {'token': $rootScope.token},
                     type: 'get',
                     dataType: 'json',
                     contentType: 'application/json;charset=UTF-8',
                     async: true,
                 }).success(function (res) {
                     if ('OK' == res.result) {
                         $scope.doneNum++;
                     } else {
                         $scope.failedNum++;
                     }
                 }).error(function (res) {
                     $scope.failedNum++;
                 }).always(function () {
                     //刷新成功和失败数量
                     if(($scope.doneNum + $scope.failedNum) < $scope.progressTotal) {
                         //更新进度
                         //$scope.curProgress = Math.round(($scope.doneNum + $scope.failedNum) / $scope.progressTotal * 100) + "%";
                         element.progress('notifierProgress', Math.round(($scope.doneNum + $scope.failedNum) / $scope.progressTotal * 100) + "%")
                     } else {
                         //完成
                         $scope.curProgress = "100%";
                         ////进度条渲染需要时间？？数据较少时执行完成还没渲染出来--改用定时器
                         var finishInterval = setInterval(function() {
                             if($(".layui-progress")[0]) {
                                 element.progress('notifierProgress', "100%");
                                 clearInterval(finishInterval);
                             }
                         }, 200);
                         $scope.progressDone = true;
                         //去掉转圈
                         $(".layui-layer-loading").hide();
                         //layer.closeAll();
                     }
                 });
             });

         });
     }

     //方案2
     $scope.derive2 = function () {
         //先单线程
         var toSendList = [];
         var passList = [];
         for(var i=0;i<$scope.tableControl.rows.length;i++) {
             if($scope.tableControl.rows[i].select) {
                 toSendList.push($scope.tableControl.allData[i]);
                 //没有数据，原5，现先1
                 if(1 == $scope.tableControl.allData[i].applyStatus) {
                     passList.push($scope.tableControl.allData[i]);
                 }
             }
         }
         if(1 > toSendList.length) {
             layer.alert("请选择需要生成证书的记录");
             return;
         }
         if(toSendList.length != passList.length) {
             layer.alert("只能对审核通过的记录进行证书生成");
             return;
         }
         layer.confirm("是否确认生成证书？", {
             btn: ['确定', '取消']
         }, function () {
             $scope.progressTotal = toSendList.length;
             $scope.doneNum = 0;
             $scope.failedNum = 0;

             layer.closeAll();
             var maskLoad = layer.load(1, {shade: [0.8, '#393D49']});
             //打开进度
             $scope.curProgress = "0%";
             $scope.progressShow2 = true;

             //弹出隐藏绘图层
             $("#printArea").remove();
             $("body").append("<div id='printArea'><div id='toPrint'></div></div>");

             //绘制证书
             suitScreen($scope);
             var imgStr = "<img src='" + $scope.printObj.notifierObj.url+"' style='width:"+$scope.printObj.notifierObj.width+"px;height:"+
             $scope.printObj.notifierObj.height+"px'><div id='textArea'></div>";
             $("#toPrint").append(imgStr);
             $("#toPrint").css("margin-top", (0-$scope.printObj.notifierObj.height-60)/2+"px");
             $("#toPrint").css("height", $scope.printObj.notifierObj.height+"px");
             $("#toPrint").css("width", $scope.printObj.notifierObj.width+"px");

             //填充文字
             $.each(toSendList, function(index, e){
                 $("#textArea").empty();
                 $scope.printObj.paramList[0].objName = e.studentName;
                 $scope.printObj.paramList[1].objName = e.applySchoolName;
                 var htmlStr = "";
                 for(i=0;i<$scope.printObj.paramList.length;i++) {
                     var nowObj = $scope.printObj.paramList[i];
                     if(nowObj.fontSize < 12) {
                         htmlStr += "<div style='font-family:"+nowObj.fontFamily+";font-size:"+nowObj.fontSize+"px;top:"+nowObj.top+"px;left:"+nowObj.left+
                         //谷歌浏览器字体小于12px时会不再变小，使用-webkit-transform兼容，并设置已左上角作为变换原点
                             "px;-webkit-transform:scale("+nowObj.fontSize/12+","+nowObj.fontSize/12+");transform-origin:0 0'>"+nowObj.objName+"</div>";
                     } else {
                         htmlStr += "<div style='font-family:"+nowObj.fontFamily+";font-size:"+nowObj.fontSize+"px;top:"+nowObj.top+"px;left:"+nowObj.left+
                             "px'>"+nowObj.objName+"</div>";
                     }
                 }
                 //$("#toPrint").css("margin-left", (0-$scope.printObj.notifierObj.width)/2+"px");
                 $("#textArea").append(htmlStr);

                 //保存
                 html2canvas(document.querySelector("#toPrint")).then(function(canvas) {
                     var type = 'png';//格式可以自定义
                     var imgData = canvas.toDataURL(type);
                     imgData = imgData.replace(_fixType(type),'image/octet-stream');
                     //文件名可以自定义
                     var filename = '录取通知书_' + e.studentName + '.' + type;
                     saveFile(imgData,filename);
                     $scope.doneNum++;
                     //刷新成功和失败数量
                     if(($scope.doneNum + $scope.failedNum) < $scope.progressTotal) {
                         //更新进度
                         //$scope.curProgress = Math.round(($scope.doneNum + $scope.failedNum) / $scope.progressTotal * 100) + "%";
                         element.progress('notifierProgress2', Math.round(($scope.doneNum + $scope.failedNum) / $scope.progressTotal * 100) + "%")
                     } else {
                         //完成
                         $scope.curProgress = "100%";
                         ////进度条渲染需要时间？？数据较少时执行完成还没渲染出来--改用定时器
                         var finishInterval = setInterval(function() {
                             if($(".layui-progress")[0]) {
                                 element.progress('notifierProgress2', "100%");
                                 clearInterval(finishInterval);
                             }
                         }, 200);
                         $scope.progressDone2 = true;
                         //去掉转圈
                         $(".layui-layer-loading").hide();
                     }
                 });
             });

         });
     }

     //方案3
     $scope.derive3 = function () {
         //先单线程
         var toSendList = [];
         var passList = [];
         for(var i=0;i<$scope.tableControl.rows.length;i++) {
             if($scope.tableControl.rows[i].select) {
                 toSendList.push($scope.tableControl.allData[i]);
                 //没有数据，原5，现先1
                 if(1 == $scope.tableControl.allData[i].applyStatus) {
                     passList.push($scope.tableControl.allData[i]);
                 }
             }
         }
         if(1 > toSendList.length) {
             layer.alert("请选择需要生成证书的记录");
             return;
         }
         if(toSendList.length != passList.length) {
             layer.alert("只能对审核通过的记录进行证书生成");
             return;
         }
         layer.confirm("是否确认生成证书？", {
             btn: ['确定', '取消']
         }, function () {
             $scope.progressTotal = toSendList.length;
             $scope.doneNum = 0;
             $scope.failedNum = 0;

             layer.closeAll();
             var maskLoad = layer.load(1, {shade: [0.8, '#393D49']});
             //打开进度
             $scope.curProgress = "0%";
             $scope.progressShow3 = true;

             //弹出隐藏绘图层
             $("#toPrint3").remove();
             $("body").append("<div id='toPrint3'></div>");

             suitScreen($scope);

             var allCanvas = $("canvas");
             var zip = new JSZip();
             //zip.file("readme.txt", "证书\n");
             var img = zip.folder("images");

             //图片加载是异步，所有用递归来做，否则前边生成的都会被最后一个覆盖
             (function loop(n) {
                 if (n>=toSendList.length) return;

                 var image = new Image();
                 image.src = $scope.printObj.notifierObj.url;
                 image.onload = function () { //为异步函数,所以将创建canvas放在onload中.

                     $("#toPrint3").empty();
                     $("#toPrint3").append("<canvas id='toPrint_' class='printCanvas'></canvas>");
                     $scope.printObj.paramList[0].objName = toSendList[n].studentName;
                     $scope.printObj.paramList[1].objName = toSendList[n].applySchoolName;

                     $("#toPrint_").css("margin-top", (0-$scope.printObj.notifierObj.height)/2+"px");
                     var canvas = document.getElementById("toPrint_");
                     canvas.width = $scope.printObj.notifierObj.width;
                     canvas.height = $scope.printObj.notifierObj.height;
                     var ctx = canvas.getContext("2d");
                     ctx.drawImage(image, 0, 0, $scope.printObj.notifierObj.width, $scope.printObj.notifierObj.height);
                     $.each($scope.printObj.paramList, function(index, e) {
                         //canvas的字体不会有12px的兼容性问题
                         ctx.font = "bold "+e.fontSize+"px "+e.fontFamily;
                         //canvas写字以字体的左下角为基准，因而要再加一个字体大小的高度
                         ctx.fillText(e.objName, e.left, e.top+e.fontSize);
                     });
                     img.file('录取通知书_' + toSendList[n].studentName + '.png', canvas.toDataURL().substring(22), {base64: true});
                     $scope.doneNum++;
                     //刷新成功和失败数量
                     if(($scope.doneNum + $scope.failedNum) < $scope.progressTotal) {
                         //更新进度
                         //$scope.curProgress = Math.round(($scope.doneNum + $scope.failedNum) / $scope.progressTotal * 100) + "%";
                         element.progress('notifierProgress3', Math.round(($scope.doneNum + $scope.failedNum) / $scope.progressTotal * 100) + "%")
                     } else {
                         //完成
                         $scope.curProgress = "100%";
                         var finishInterval = setInterval(function() {
                             if($(".layui-progress")[0]) {
                                 element.progress('notifierProgress3', "100%");
                                 clearInterval(finishInterval);
                             }
                         }, 200);
                         $scope.progressDone3 = true;
                         //去掉转圈
                         $(".layui-layer-loading").hide();

                         zip.generateAsync({type:"blob"}).then(function(content) {
                             saveAs(content, "证书.zip");
                         });
                     }

                     loop(n+1);
                 }
           })(0);

         });
     }

     $scope.closeProgress = function () {
         $scope.progressShow = false;
         $scope.progressDone = false;
         $scope.progressShow2 = false;
         $scope.progressDone2 = false;
         $scope.progressShow3 = false;
         $scope.progressDone3 = false;
         layer.closeAll();
     }

   //模板
     $scope.printObj = {
         notifierObj:{
             "url": "/res/img/notifications.png",
             "height": "631",
             "width": "942"
         },
         paramList:[{
                 "objName":"黄大明",
                 "left":"133",
                 "top":"191",
                 "fontSize": "28",
                 "fontFamily": "KaiTi"
             },{
                 "objName":"SXXX小学",
                 "left":"460",
                 "top":"272",
                 "fontSize": "28",
                 "fontFamily": "KaiTi"
             },{
                 "objName":"2018",
                 "left":"195",
                 "top":"312",
                 "fontSize": "28",
                 "fontFamily": "KaiTi"
             },{
                 "objName":"8",
                 "left":"325",
                 "top":"312",
                 "fontSize": "28",
                 "fontFamily": "KaiTi"
             },{
                 "objName":"31",
                 "left":"405",
                 "top":"312",
                 "fontSize": "28",
                 "fontFamily": "KaiTi"
             }]
     }

     function suitScreen($scope) {
         //A4横向标准
         var effectiveHeight = 1240;
         var effectiveWidth = 1754;
         if($scope.printObj.notifierObj.width/effectiveWidth > $scope.printObj.notifierObj.height/effectiveHeight) {
             //取最接近的一个属性进行自适应，并适当调小一些
             var suitTimes = $scope.printObj.notifierObj.width/effectiveWidth*1.2;
         } else {
             var suitTimes = $scope.printObj.notifierObj.height/effectiveHeight*1.2;
         }
         $scope.printObj.notifierObj.width = $scope.printObj.notifierObj.width/suitTimes;
         $scope.printObj.notifierObj.height = $scope.printObj.notifierObj.height/suitTimes;
         for(i=0;i<$scope.printObj.paramList.length;i++) {
             $scope.printObj.paramList[i].fontSize = $scope.printObj.paramList[i].fontSize/suitTimes;
             $scope.printObj.paramList[i].left = $scope.printObj.paramList[i].left/suitTimes;
             $scope.printObj.paramList[i].top = $scope.printObj.paramList[i].top/suitTimes;
         }
     }

     function _fixType(type) {
         //imgData是一串string，base64
         type = type.toLowerCase().replace(/jpg/i, 'jpeg');
         var r = type.match(/png|jpeg|bmp|gif/)[0];
         return 'image/' + r;
     }

     function saveFile(data, filename) {
         var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
         save_link.href = data;
         save_link.download = filename;

         //下载
         var event = document.createEvent('MouseEvents');
         event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
         save_link.dispatchEvent(event);
     }

     //方案3使用canvas先画好，然后批量打包保存
     function drawNotifier($scope, id, img) {
         //canvas需要先定位好，否则画好再动就清除了
         //$("#toPrint").css("margin-left", (0-$scope.printObj.notifierObj.width)/2+"px");不可见元素，同样不考虑其左右缩进
         $(id).css("margin-top", (0-$scope.printObj.notifierObj.height)/2+"px");
         var canvas = document.getElementById(id.substring(1));
         canvas.width = $scope.printObj.notifierObj.width;
         canvas.height = $scope.printObj.notifierObj.height;
         var ctx = canvas.getContext("2d");
         var img=new Image();
         img.src = $scope.printObj.notifierObj.url;
         var deferred=$.Deferred();
         var thisObj = $scope.printObj;
         //img.onload=function() {
         requestAnimationFrame(function() {
             //需要onload方法接收，否则画不出
             ctx.drawImage(img, 0, 0, thisObj.notifierObj.width, thisObj.notifierObj.height);
             //写文字，且要在画好图片之后写，否则会被图片覆盖
             $.each(thisObj.paramList, function(index, e) {
                 //canvas的字体不会有12px的兼容性问题
                 ctx.font = "bold "+e.fontSize+"px "+e.fontFamily;
                 //canvas写字以字体的左下角为基准，因而要再加一个字体大小的高度
                 ctx.fillText(e.objName, e.left, e.top+e.fontSize);
             });
             deferred.resolve(canvas.toDataURL().substring(22));
         })
         //}
         return deferred.promise();

     }

以上是三种实现方案，第一种需要一个接口，后两种不需要接口，直接前端生成。

说一下中间遇到的问题：

1.进度条里边的文字显示不出来：

用的是layui的进度条，很简单，就几行代码。

<div class="layui-progress layui-progress-big" lay-filter="notifierProgress" lay-showpercent="yes">
        <div class="layui-progress-bar" lay-percent="0%">
        </div>
</div>

但是进度百分比文字就是显示不出来，查看元素，官方api里是有span标签的，但是自己的一直没有，可见layui官网也是有点坑。也许一些版本或者新的版本支持吧，但是有个直接有效的解决办法就是，在内部直接写一个span标签。

　　　　　　<div class="layui-progress layui-progress-big" lay-filter="notifierProgress" lay-showpercent="yes">
                <div class="layui-progress-bar" lay-percent="0%">
                <!-- 解决数字不出来问题 -->
                    <span class="layui-progress-text">0%</span>
                </div>
            </div>

2.进度动态更新：

当前使用的是angular框架，我使用了一个变量来动态刷新，但是实际并没有效果。最终不得不使用组件的方法：

element.progress('notifierProgress', Math.round(($scope.doneNum + $scope.failedNum) / $scope.progressTotal * 100) + "%")

其中第一个参数就是前边的lay-filter

3.对于需要进行绘制又不想让用户看到：

很简单的方法，直接给你需要操作的元素绝对定位，然后给他一个很大很大的left（当然上下左右都可以），这样他就飘到屏幕的十万八千里外了，用户除非自己F12看，否则永远也看不到。这个方法之前在上一家公司有使用过。

4.对于canvas画图片异步加载的问题：

这个问题困扰了我很久，因为我要做批量绘制，使用同一个dom，绘制完一个然后清空再绘制下一个。早早就写完了逻辑，一运行也没有报错，燃鹅，打开文件一看，全都是最后一条数据生成的图片。已经使用了image.onload进行绘制了还出现这种问题。然后打断点调试，发现each遍历完了，才走进onload事件。我就又尝试着用定时器、用回调，都没有成功，而且这样比较容易出现问题。最终找到了一个解决办法，那就是用递归。代码如下

 //图片加载是异步，所有用递归来做，否则前边生成的都会被最后一个覆盖
             (function loop(n) {
                 if (n>=toSendList.length) return;

                 var image = new Image();
                 image.src = $scope.printObj.notifierObj.url;
                 image.onload = function () { //为异步函数,所以将创建canvas放在onload中.

                     $("#toPrint3").empty();
                     $("#toPrint3").append("<canvas id='toPrint_' class='printCanvas'></canvas>");
                     $scope.printObj.paramList[0].objName = toSendList[n].studentName;
                     $scope.printObj.paramList[1].objName = toSendList[n].applySchoolName;

                     $("#toPrint_").css("margin-top", (0-$scope.printObj.notifierObj.height)/2+"px");
                     var canvas = document.getElementById("toPrint_");
                     canvas.width = $scope.printObj.notifierObj.width;
                     canvas.height = $scope.printObj.notifierObj.height;
                     var ctx = canvas.getContext("2d");
                     ctx.drawImage(image, 0, 0, $scope.printObj.notifierObj.width, $scope.printObj.notifierObj.height);
                     $.each($scope.printObj.paramList, function(index, e) {
                         //canvas的字体不会有12px的兼容性问题
                         ctx.font = "bold "+e.fontSize+"px "+e.fontFamily;
                         //canvas写字以字体的左下角为基准，因而要再加一个字体大小的高度
                         ctx.fillText(e.objName, e.left, e.top+e.fontSize);
                     });
                     img.file('录取通知书_' + toSendList[n].studentName + '.png', canvas.toDataURL().substring(22), {base64: true});
                     $scope.doneNum++;
                     //刷新成功和失败数量
                     if(($scope.doneNum + $scope.failedNum) < $scope.progressTotal) {
                         //更新进度
                         //$scope.curProgress = Math.round(($scope.doneNum + $scope.failedNum) / $scope.progressTotal * 100) + "%";
                         element.progress('notifierProgress3', Math.round(($scope.doneNum + $scope.failedNum) / $scope.progressTotal * 100) + "%")
                     } else {
                         //完成
                         $scope.curProgress = "100%";
                         var finishInterval = setInterval(function() {
                             if($(".layui-progress")[0]) {
                                 element.progress('notifierProgress3', "100%");
                                 clearInterval(finishInterval);
                             }
                         }, 200);
                         $scope.progressDone3 = true;
                         //去掉转圈
                         $(".layui-layer-loading").hide();

                         zip.generateAsync({type:"blob"}).then(function(content) {
                             saveAs(content, "证书.zip");
                         });
                     }

                     loop(n+1);
                 }
           })(0);

还有在调试中使用的一些方法，其中：

 var deferred=$.Deferred();
         var thisObj = $scope.printObj;
         //img.onload=function() {
         requestAnimationFrame(function() {
             //需要onload方法接收，否则画不出
             ctx.drawImage(img, 0, 0, thisObj.notifierObj.width, thisObj.notifierObj.height);
             //写文字，且要在画好图片之后写，否则会被图片覆盖
             $.each(thisObj.paramList, function(index, e) {
                 //canvas的字体不会有12px的兼容性问题
                 ctx.font = "bold "+e.fontSize+"px "+e.fontFamily;
                 //canvas写字以字体的左下角为基准，因而要再加一个字体大小的高度
                 ctx.fillText(e.objName, e.left, e.top+e.fontSize);
             });
             deferred.resolve(canvas.toDataURL().substring(22));
         })
         //}
         return deferred.promise();

给方法添加回调，使用promise，这样在调用这个方法时就可以用then进行接收了。

requestAnimationFrame，一个用的好比较有意思的window方法，类似timeout和interval，但是不需要设置时间，此处可以代替onload使用。

5.canvas转base64与文件操作：

 //canvas转图片

 canvas.toDataURL().substring(22)

 //js新建文件和文件填充

 var zip = new JSZip();
 //zip.file("readme.txt", "证书\n");
 var img = zip.folder("images");

 img.file('录取通知书_' + toSendList[n].studentName + '.png', canvas.toDataURL().substring(22), {base64: true});

 //js文件打包下载

 zip.generateAsync({type:"blob"}).then(function(content) {
 saveAs(content, "证书.zip");
 });

用到的插件：FileSaver.js, jszip.min.js。用法也比较简单。

6.数据较少时，进度条无法刷新到100%的问题：

数据较少，用时较少，然后进度条渲染出来了，但是一直停在0%。没有研究源码，不知道是因为异步加载的问题还是因为css动画的样式问题还是因为渲染组件异步的问题，总之就是在执行完之后，打断点审查元素并没有生成组件，所有此时更新进度100%也没用。

解决方法：使用定时器

     var finishInterval = setInterval(function() {
           if($(".layui-progress")[0]) {
                   element.progress('notifierProgress3', "100%");
                        clearInterval(finishInterval);
            }
      }, 200);

一般遇到这种异步造成还没渲染完成就做了处理的问题，使用定时器或者timeout都是一种解决办法。