将html转换为画布并下载为zip文件

Question

我正在尝试将页面的不同部分下载为jpeg。我有两种解决方法：一种是在每个部分中都包含一个下载按钮，单击该按钮时，该部分将以jpeg的形式下载；另一种是在页面顶部包含一个按钮，单击该按钮将下载所有部分。

按节下载代码效果很好，但是当我尝试执行全部下载选项时会出现问题，它会下载文件类型的文件而不是jpeg图片。

当我登录应该从中下载的网址时，我发现它为空，但不在html2canvas函数之内。

我正在使用html2canvas将html转换为canvas，并使用JSZip将其压缩。

function urlToPromise(url) {
        return new Promise(function(resolve, reject) {
            JSZipUtils.getBinaryContent(url, function (err, data) {
                if(err) {
                    reject(err);
                } else {
                    resolve(data);
                    console.log(data);
                }
            });
        });
    }

    function getScreen(){
        var caption = $('#caption-input').val();
        var allSections = $("#content").children().unbind();
        var allSectionsArray = $.makeArray(allSections);
        console.log(allSectionsArray);
        var zip = new JSZip(); //Instantiate zip file
        var url = "";
        for(var i = 0; i < allSectionsArray.length; i++){
            console.log("Currently at " + allSectionsArray[i].id);
            var queryId = allSectionsArray[i].id.toString();    

       html2canvas(document.querySelector("#"+queryId)).then(function(canvas) {
                $("#blank").attr('href',canvas.toDataURL('image/jpeg', 1.0));
                $("#blank").attr('download',caption + ".jpeg");
                //$("#blank")[0].click();

                url = $("#blank").attr('href');
                console.log(url);        
            });
            console.log(url);
            var filename = "image " + (i+1);
            zip.file(filename, urlToPromise(url),{binary:true}); //Create new zip file with filename and content
            console.log('file ' + (i+1) + ' generated');
            console.log(filename+ "\n" + url);
        }

        //Generate zip file
        generateZipFile(zip);
    } 

    function generateZipFile(zip){
        zip.generateAsync({type:"blob"})
            .then(function callback(blob) {
            saveAs(blob, "example.zip");
            console.log("zip generated");
        });
    }