Issue while trying to compress PDF files into a Zip file using jsZip

I've made use of the cdn for jsZip, and after referring to the official documentation tried to generate PDF files and compress them into .zip format.

Code:-

var zip = new JSZip();
zip.file("Hello.pdf", "Hello World\n");
zip.file("Alphabet.pdf", "abcdef\n");
zip.generateAsync({type:"blob"})
.then(function(content) {
    saveAs(content, "example.zip");
});

But, the problem I'm facing here is that although I'm able to finally generate the .zip file. I'm not able to read the PDF file, as it keeps saying that the format is corrupted. (The same thing happens even for .xls/xlsx format, I don't face the same issue for .doc and .txt format files.)

the error message on trying to open PDF file

What am I doing wrong? What do I need to additionally do? This has got me in a fix! Any help would be appreciated.

EDIT:- @Fefux - I tried something along these lines i.e generating pdf content first and then compressing to .zip, but it's not working either!

function create_zip() {
            var dynamicSITHtml = '<div class="container"><div class="row margin-top">';
            dynamicSITHtml = dynamicSITHtml + '<table><thead><tr><th>Target Date/Time</th><th>Referred To Role</th><th>Description</th><th>Priority</th><th>Status</th></tr></thead><tbody>';
            dynamicSITHtml = dynamicSITHtml + '</tbody></table></div></div>';
            $scope.dymanicSITHtml = dynamicSITHtml;


            var pdf1 = new jsPDF('p', 'pt', 'letter');
            var ElementHandlers = {
                '#editor': function (element, renderer) {
                    return true;
                }
            };
            pdf1.fromHTML($scope.dymanicSITHtml, 10, 10, {
                'width': 1000,
                'elementHandlers': ElementHandlers
            });
            //pdf1.save($scope.operation.ReferenceNumber + '_task_summary_report.pdf');

            var zip = new JSZip();
            zip.file("Hello.pdf", pdf1.save($scope.operation.ReferenceNumber + '_task_summary_report.pdf'));
            zip.generateAsync({ type: "blob" })
            .then(function (content) {
                saveAs(content, "example.zip");
            });

Please help!!

Here's an updated code copy..... I've tried to make use of js-xlsx library - https://github.com/SheetJS/js-xlsx - to generate xls file and then zip it. Please refer the below code..

 function Create_Zip() {

        function datenum(v, date1904) {
            if (date1904) v += 1462;
            var epoch = Date.parse(v);
            return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000);
        }

        function sheet_from_array_of_arrays(data, opts) {
            var ws = {};
            var range = { s: { c: 10000000, r: 10000000 }, e: { c: 0, r: 0 } };
            for (var R = 0; R != data.length; ++R) {
                for (var C = 0; C != data[R].length; ++C) {
                    if (range.s.r > R) range.s.r = R;
                    if (range.s.c > C) range.s.c = C;
                    if (range.e.r < R) range.e.r = R;
                    if (range.e.c < C) range.e.c = C;
                    var cell = { v: data[R][C] };
                    if (cell.v === null) continue;
                    var cell_ref = XLSX.utils.encode_cell({ c: C, r: R });

                    if (typeof cell.v === 'number') cell.t = 'n';
                    else if (typeof cell.v === 'boolean') cell.t = 'b';
                    else if (cell.v instanceof Date) {
                        cell.t = 'n'; cell.z = XLSX.SSF._table[14];
                        cell.v = datenum(cell.v);
                    }
                    else cell.t = 's';

                    ws[cell_ref] = cell;
                }
            }
            if (range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range);
            return ws;
        }


        var data = [[1, 2, 3], [true, false, null, "sheetjs"], ["foo", "bar", new Date("2014-02-19T14:30Z"), "0.3"], ["baz", null, "qux"]];
        var ws_name = "SheetJS";

        function Workbook() {
            if (!(this instanceof Workbook)) return new Workbook();
            this.SheetNames = [];
            this.Sheets = {};
        }

        var wb = new Workbook(), ws = sheet_from_array_of_arrays(data);

        /* add worksheet to workbook */
        wb.SheetNames.push(ws_name);
        wb.Sheets[ws_name] = ws;
        var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'binary' });

        function s2ab(s) {
            var buf = new ArrayBuffer(s.length);
            var view = new Uint8Array(buf);
            for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
            return buf;
        }

        var jsonse = JSON.stringify([s2ab(wbout)]);
        var testblob = new Blob([jsonse], { type: "application/json" });
        console.log(testblob);


        var zip = new JSZip();

        zip.file("trial.xls", testblob);

        var downloadFile = zip.generateAsync({ type: "blob" });
        saveAs(downloadFile, 'test.zip');
}

But, the problem here is that I keep getting this error: 'The data of 'trial.xls' is in an unsupported format !' in the console :(. Is there any way I can make this work?

Solution

You have an error because you don't zip pdf file. You zip a file named Hello.pdf and the content of the file is "Hello world\n" but this is not a valid PDF content (same things for Alphabet.pdf).

You need to generate a valid PDF content and after zip it.

EDIT : working jsFiddle : https://jsfiddle.net/55gdt8ra/

$(function() {
    var doc = new jsPDF();

        doc.setFontSize(40);
        doc.text(35, 25, "Octonyan loves jsPDF");

 var zip = new JSZip();
  zip.file("Hello.pdf", doc.output());
  zip.generateAsync({ type: "blob" })
  .then(function (content) {
    saveAs(content, "example.zip");
  });
})