javascript - 如何使用jspdf在多页pdf中保存图像

Question

我有一个要保存为 pdf 的表格(列对齐方式不同)。我使用 html2canvas 将表格转换为图像，然后使用 jspdf 将图像保存为 pdf。如果图像的大小小于或等于 pdf 的页面大小，它会很好地工作，但如果图像大小大于页面大小，那么它只保存 pdf 的第一页(只有一部分图像)并休息图像的部分未以 pdf 格式显示/保存。这是我使用的 javascript 代码。

       $("#btnVC_saveGLSummary").click(function () {
        html2canvas($("#tblSaveAsPdf1"), {
        onrendered: function (canvas) {
        var myImage = canvas.toDataURL("image/jpeg");            
        var d = new Date().toISOString().slice(0, 19).replace(/-/g, "");
        filename = 'report_' + d + '.pdf';
        var doc = new jsPDF();
        doc.addImage(myImage, 'JPEG', 12, 10);
        doc.save(filename);
          }
         });
       });

关于如何在 pdf 第二页上获取图像的剩余部分的任何想法。

Answer 1

它适用于 html2canvas 和 jspdf。

var imgData = canvas.toDataURL('image/png');
var imgWidth = 210; 
var pageHeight = 295;  
var imgHeight = canvas.height * imgWidth / canvas.width;
var heightLeft = imgHeight;
var doc = new jsPDF('p', 'mm');
var position = 10; // give some top padding to first page

doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
heightLeft -= pageHeight;

while (heightLeft >= 0) {
  position += heightLeft - imgHeight; // top padding for other pages
  doc.addPage();
  doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
  heightLeft -= pageHeight;
}
doc.save( 'file.pdf');