中心图片 doc.addImage jspdf

Question

我正在使用html2canvas 截取我的页面并使用 jspdf 创建图像的 pdf。现在，我的图片在 pdf 文档中是左对齐的，我希望它居中，我该如何实现呢？

function pdfmaker() {

    var element = $("#timesheet");

    document.getElementById("message").style.display = "block";
    document.getElementById("logo").style.display = "block";
    var firstName = "<?php echo $fname?>";
    var lastName = "<?php echo $lname ?>";
    var startDate = "<?php echo $startDate?>";
    var endDate = "<?php echo $endDate ?>";

    html2canvas(element, {
        useCORS: true,
        onrendered: function(canvas) {
            var imgData = canvas.toDataURL("image/png");


            var imgWidth = 297; //297
            var pageHeight = 297; //297  
            var imgHeight = canvas.height * imgWidth / canvas.width;
            var heightLeft = imgHeight;

            // var doc = new jsPDF('l', 'mm',[1350, 1350]);
            var doc = new jsPDF('l', 'mm', [420, 297]); //420,297
            var position = 5; //0

            margins = {

                top: 20,
                bottom: 10,
                left: 45,
                width: 522
            };


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

            while (heightLeft >= 5) {
                position = heightLeft - imgHeight;
                doc.addPage();
                doc.addImage(imgData, 'PNG', 5, position, imgWidth, imgHeight);
                heightLeft -= pageHeight;
            }

            doc.save(firstName + '_' + lastName + '_Summary_report_' + startDate + '_' + endDate + ".pdf");
        }
    });

    document.getElementById("message").style.display = "none";
    document.getElementById("logo").style.display = "none";

}

Answer 1

需要在addImage()方法里面定义，使用坐标参数，见：http://raw.githack.com/MrRio/jsPDF/master/docs/module-addImage.html

这是您可以做到的唯一方法。为此，我建议你使用下面的方法doc.internal.pageSize.getWidth();来计算关于图像宽度的超出值，它将居中。