将图像添加到使用jsPDF创建的pdf，然后使用jsZIP压缩pdf的文件

Question

我正在尝试将png-base64图像添加到使用jspdf-autotable创建的表中。之后，我想压缩一堆我使用jsZip循环创建的pdf文件。

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==

下载PDF时，我就能在PDF上获取图像。使用pdf.save(filename)如下所示：-

但是问题是当我使用jsZip压缩由jsPDF创建的blobs时，图像以某种方式损坏：-

起初，我认为这是jsZip压缩的问题，但是默认情况下jsZip不会对文件执行任何压缩。这是代码：

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

Answer 1

您的代码中存在一个小问题，因为在创建pdf文件时，只需将blob作为参数，而将pdf内容传递给JsZip.file（filename，pdf.output（'blob'））;

CODE示例zip.file（'name.pdf'，jspdf.output（'blob'））;