如何在使用html2canvas和jspdf时添加上边距,当画布在多个页面上分割时
How to add top margin when using html2canvas and jspdf, when the canvas is split on multiple pages?
我使用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');
}
});
我通过调整mediaBox属性来解决这个问题。
jspdf中的putPages方法写入页面,您可以操作媒体框和页面宽度/高度来调整页面边距。我硬编码了额外的52(0.75英寸)的高度和-36(0.5英寸)的mediabox给每个页面一个空白。
这是代码更改:
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;
这可以变成一个适当的功能,而不是硬编码,但目前工作
我花了几个小时寻找驻留在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; }
相关文章:
- 使用html2canvas获取基本信息
- 使用正则表达式捕获“”并分割成阵列
- 如何将图像分割成多个部分
- 在文本区域的焦点上分割渐变
- 如何分割由JavaScript中使用正则表达式的多个部分组成的字符串
- 用逗号分割字符串,格式化后显示
- 如何从日期中分割x个字符
- 在javascript中用逗号分隔的字符串分割值
- 在浏览器窗口中创建动态灵活的分割标记
- 如何在JavaScript中每隔第n个字符分割一个字符串
- 将HTML5画布(视频)元素分割成若干块
- 如何使用 html2canvas 打印网页
- 在Iframe中选择元素分割
- 如何使用分割来分割网页,以及如何在网页的这些部分之间提供链接
- 在所选选项卡JQuery上分割文本fadeIn()
- 分割数组并将其放入对象中
- 使用Html2Canvas的文本区域屏幕截图
- 使用HTML2CANVAS将Morris图表保存为图像
- 代码在第7次分割后中断
- 如何在使用html2canvas和jspdf时添加上边距,当画布在多个页面上分割时