当画布在多个页面上拆分时，如何在使用 html2canvas 和 jspdf 时添加上边距？答案

【问题标题】：How to add top margin when using html2canvas and jspdf, when the canvas is split on multiple pages?当画布在多个页面上拆分时，如何在使用 html2canvas 和 jspdf 时添加上边距？
【发布时间】：2015-07-14 15:30:47
【问题描述】：

我正在使用 HTML2Canvas 和 jsPDF 创建动态网页的 pdf，当画布的大小大于一页时，我添加另一页并重新添加图像，将其移至下一页。一切都运行良好，但是我不知道如何设置上边距，因此第二页以后的所有内容都在页面的最顶部。有没有办法为所有页面设置上边距？

            html2canvas($("#formpdfarea"), {
            onrendered: function(canvas) {
                var imgData = canvas.toDataURL(
                    'image/png');     
                var doc = new jsPDF('l', 'mm', 'letter');
                doc.addImage(imgData, 'PNG', 5, 0);

                //output is 96dpi, additional pages added if output is greater than 816 pixels (816p/96dpi = 8.5 inches)
                if(canvas.height > 816){ 
                    for(i=1; i*816<canvas.height; i++){
                        doc.addPage();
                        //-215.89mm which is -8.5inches
                        doc.addImage(imgData, 'PNG',5,-215.89*i);
                    }
                }
                doc.save('formoutput.pdf');
            }
        });

【问题讨论】：

您找到解决方案了吗？我有完全相同的问题。

标签： javascript margins jspdf html2canvas

【解决方案1】：

我通过调整 mediaBox 属性解决了这个问题。

jspdf中的putPages方法写出一个页面，可以通过操作媒体框和页面宽/高来调整页边距。我将额外的 52（0.75 英寸）高度和 -36（0.5 英寸）硬编码到媒体框，以便为每个页面留出边距。

这是代码更改：

wPt = (pageWidth = pagedim[n].width) * k;
hPt = (pageHeight = pagedim[n].height + 52) * k;
out('<</Type /Page');
out('/Parent 1 0 R');
out('/Resources 2 0 R');
out('/MediaBox [-36 0 ' + f2(wPt) + ' ' + f2(hPt) + ']');

您还必须更改页面大小以使页脚看起来也正确。

我用过：

canvas.height = 72 * 10.25; // instead of 11
canvas.width = 72 * 8.5;

这可以转化为适当的功能而不是硬编码，但现在可以使用。

【讨论】：

【解决方案2】：

我花了几个小时在 jsPDF 的库中寻找解决方案，但目前似乎没有可用的解决方案。一旦你指定了pagesplit，它似乎会忽略其他jsPDF选项，比如margin。

所以，我自己做了，手动拆分页面。其实比较简单。 :)

我为一张大桌子创建了这个。如果您尝试分解表格以外的其他内容，您仍然可以使用此概念。您真正需要做的就是更改 CSS 类以使不同部分可见。

function add_page() {
    // Youre header & footer stuff goes here
    pdf.addHTML($('#pdfPage'), 20, 26, options, function() {
        check_page();
    });
}
function check_page() {
    tr_rows = tr_rows - 28;
    if( tr_rows > 0 ) {
        $('#pdfPage').removeClass('pdf_page_' + current_pdf_page).addClass('pdf_page_' + ++current_pdf_page);
        pdf.addPage();
        add_page();
    } else {
        pdf.save( filename + '.pdf' );
    }
}
$('#pdfPage').addClass('pdf_page_1');
tr_rows = $('#pdfPage tbody tr').length;
current_pdf_page = 1;
add_page();

这是我的 CSS 类：

.pdf_page_1 tr:nth-child(n+28) { display: none; }

.pdf_page_2 tr:nth-child(-n+28) { display: none; }
.pdf_page_2 tr:nth-child(n+56) { display: none; }

.pdf_page_3 tr:nth-child(-n+56) { display: none; }
.pdf_page_3 tr:nth-child(n+84) { display: none; }

.pdf_page_4 tr:nth-child(-n+84) { display: none; }
.pdf_page_4 tr:nth-child(n+112) { display: none; }

#pdfPage tr:first-child { display: table-row !important; }

【讨论】：