javascriptjspdfjszip

Is there a way to save multiple jsPDF outputs into an single ZIP using jsZIP?


I use jsPDF to generate multiple PDFs. Is there a way for me to save all the PDFs as a single ZIP through jsZIP?


Solution

  • For anyone coming here to find a more direct answer to this question, I have this example:

    var zip = new JSZip();
    
    angular.forEach ($scope.students, function (student) {
    //The createFile() function returns a jsPDF
        var doc = createFile(student);
        if (typeof doc !== 'undefined') {
            try {
                zip.file(student.name + '.pdf', doc.output('blob'));
            }
            catch {
                console.error('Something went wrong!');
            }
        }
    });
    
    zip.generateAsync({type:'blob'}).then(function(content) {
        saveAs(content, 'reports.zip');
    });
    

    Basically, zip.file() adds a new file to the zip with (name, data). You add the jsPDF document as a blob by calling doc.output('blob'). Don't forget to add '.pdf' at the end of the name.

    Then you generate a zip file by calling the zip.generateAsync() function and save it when it finishes generating.

    In this example I used jsPDF, JSZip and FileSaver.js