Adding Image to pdf created using jsPDF and then zip pdfs using jsZIP

I am trying to add a png-base64 Image to a table which is created using jspdf-autotable. After which I want to zip a bunch of pdfs which I create in a loop using jsZip.

Image: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAA3XAAAN1wFCKJt4AAAFkGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDIgNzkuMTYwOTI0LCAyMDE3LzA3LzEzLTAxOjA2OjM5ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgKFdpbmRvd3MpIiB4bXA6Q3JlYXRlRGF0ZT0iMjAxOS0wNy0yM1QxMzowOTo1NC0wNDowMCIgeG1wOk1vZGlmeURhdGU9IjIwMTktMDctMjNUMTQ6MzY6MTQtMDQ6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMTktMDctMjNUMTQ6MzY6MTQtMDQ6MDAiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIiBwaG90b3Nob3A6SUNDUHJvZmlsZT0ic1JHQiBJRUM2MTk2Ni0yLjEiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Y2ExZDgwZDAtNWVmYy02YzQ4LWE5MTYtNmU4MWQ0MWY5Mjc1IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOmNhMWQ4MGQwLTVlZmMtNmM0OC1hOTE2LTZlODFkNDFmOTI3NSIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOmNhMWQ4MGQwLTVlZmMtNmM0OC1hOTE2LTZlODFkNDFmOTI3NSI+IDxwaG90b3Nob3A6VGV4dExheWVycz4gPHJkZjpCYWc+IDxyZGY6bGkgcGhvdG9zaG9wOkxheWVyTmFtZT0iRyIgcGhvdG9zaG9wOkxheWVyVGV4dD0iRyIvPiA8L3JkZjpCYWc+IDwvcGhvdG9zaG9wOlRleHRMYXllcnM+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6Y2ExZDgwZDAtNWVmYy02YzQ4LWE5MTYtNmU4MWQ0MWY5Mjc1IiBzdEV2dDp3aGVuPSIyMDE5LTA3LTIzVDEzOjA5OjU0LTA0OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgKFdpbmRvd3MpIi8+IDwvcmRmOlNlcT4gPC94bXBNTTpIaXN0b3J5PiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PrTZLmcAAALzSURBVEiJrZZLSFRhFMd/585gJIY6zfjoJUGk4KInNRNhRIvKDFyELqSgXJQE0Qtq12yEVipFahCEi6jBXVktKiqDnKgIF9LkplApda5N5lRYzJwWdxxGvdfM+q8+zrnn/M/r+84VnBBE/EW+jaCVQIVCqYAPQCEqEBHoVjXuhUdG3xBE7dyIndDf7t2GcAplB5ALuAAj43sFkkACGAeeAC3hY+bzOQn2XlqTFcuKnQapB1YCWU5BZECBn8Cgil6L54819dXwaxaB5Xz8ImgNUJSK+m+QAIYFCX31RM9PkRhT2lhW7AxoLVC8AOekbIoVrV3y2Xt6SmhAqubIEaAwk3QBMLCyrw+0eQMAboIIyAnQlU6R+wurqNtwlM0l/rQs9LqDlldnnTJZpcIpgoTF3+7bBHoPawRnNXRPyUEu7GmyDXfg83tqO7fYqRQwkyR3G6k5z7NzDnB8+3kAzPgoh0NVBK76CL3uAGCVZzU1a0/YmQmQK2JUuoEK5iiNN6cAgEfv7hP58gJgWmm+TsZsswNcolS4gTIcGltesCF9jkR7p+kc6p8JQ6HMDSzlz5cpjTt1femsYM5mi4DXAPs35H/BUBhzIukbfZM+l/nWAbD/RjmBq775+FYgaghEsB6uWQiPdGHGRwHYVboXf2GVRZa3dT4ESSDiFuhW2IHDJDU+PEdz9XW8OQU0V1+fpZ+YHHciSKjwzLViX04c0QNANjbNHvrWT9/QW7yLi1iWtyItf9r/gI6XV+jsv2znXIGYkrwgqcVyE7QaWDRn0vPHJHA7PGzWGtYm0kvAINaT+69IAAOiNBNEXQBDXd8Hl+9fnC1IOZDDX9yLGUgCw0BruMEMQcYNjuePNQkSAj6xsEwSKdtbEx6zZUqYnpxoJ8ncQ98fL/qR7QJWY2XiYv4r8wPQOuExG21XZiYCbd4AwkmFnfx56X8ReILS0tNg9sz05RxdENlS5FkvYlSKUgGUYm08gBEgosIzRO+++DjW6/Tb8hso4fuvZFeE/wAAAABJRU5ErkJggg==

I am able to get the image on PDF when I just download the PDF. using pdf.save(filename) like below:-

But the issue is when I use jsZip to zip the blobs created by jsPDF, The Images are somehow corrupted:-

At first, I thought, it is the issue with the compression of jsZip, but by default jsZip doesn't perform any compression on the files. Here is the code:

 var zip = new JSZip();
 zip.file("detail1.pdf", jsPDF_Blob_Object);
 zip
 .generateAsync({
    type: "blob"
 })
 .then(function(content) {
    saveAs(content, "Details.zip");
 });

Solution

There is a little issue in your code as while creating a pdf file just pass blob as a parameter while passing pdf content to JsZip.file(filename, pdf.output('blob'));

CODE Example

zip.file('name.pdf', jspdf.output('blob'));