Конвертировать HTML в холст и скачать в виде ZIP-файла - PullRequest
Новая
       13

Конвертировать HTML в холст и скачать в виде ZIP-файла

0 голосов
/ 29 января 2019

Я пытаюсь загрузить различные разделы страницы в формате JPEG.Есть два способа, которыми я собираюсь об этом;Одним из них является включение кнопки загрузки в каждый раздел, и при ее нажатии этот раздел загружается как jpeg;Другой - включить кнопку поверх страницы, и при ее нажатии все разделы будут загружены.

Загрузка раздела по коду раздела работает хорошо, но возникает проблема, когда я пытаюсь выполнить опцию загрузки всех,Это загружает файлы типа файла вместо изображений JPEG.

Когда я зарегистрировал URL, с которого я должен был загрузить, я обнаружил, что он пуст, но не находится внутри функции html2canvas.

Я использую html2canvas для преобразования html вхолст и 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");
        });
    }
...