我有一个调用html2canvas的函数。如果画布只有1个pdf'页面'大它没有问题。如果它大于我在制作这个声明时将画布分解成较小的画布,那么我会一次向PDF添加1个画布。
它非常适用于我生成的大约5页的页面'在PDF中,但我有一个不同的页面,可能是不会生成的3倍,令人非常沮丧。
正在输出PDF,但如果有任何数据,则会显示正确的页数。 为什么它是空白的,如何输出正确的信息?我现在已经在墙上敲了一会儿,我们将非常感谢任何帮助。
function exportHTMLToPDF( selector, pdfData ){
html2canvas( $( selector ), {
onrendered: function ( canvas ) {
//Size variables
var posFromTop = 0; //The position from the top
var canvasLeft;
// width, height, and ratio (w x h) of a canvas 'page'
var pageWidth, pageHeight, pageRatio;
//Upright oritentation (portrait)
if ( pdfData.orientation == 'p' ) {
pageRatio = 0.77272727272;
} else { //Landscape orientation
pageRatio = 1.29411764706;
}
pageWidth = canvas.width;
pageHeight = pageWidth / pageRatio;
canvasLeft = canvas.height * pageWidth / pageWidth;
//Set up the pdf
var doc = jsPDF( pdfData.orientation, 'mm', [pageWidth, pageHeight] );
//Get canvas context
var ctx = canvas.getContext( '2d' );
//Set that this is the first page so doc.addPage() isn't called
var firstPage = true;
//Get the next 'page'
var imgData;
//Create a second canvas to put the imgData in
var c2 = document.createElement( 'canvas' );
c2.setAttribute( 'width', pageWidth );
c2.setAttribute( 'height', pageHeight );
//Get a second canvas context to put the image on
var ctx2 = c2.getContext( '2d' );
//How many pages the pdf document will be
var pages = canvasLeft / pageHeight;
var imageURI;
//While there are still more pages
while ( pages >= 0 ) {
//Convert the next part of the canvas to image data
imgData = ctx.getImageData( 0, posFromTop, pageWidth, pageHeight );
//Change the transparancy into white space
for ( var i = 0; i < imgData.data.length; i += 4 ) {
if ( imgData.data[i + 3] == 0 ) {//If transparent
imgData.data[i] = 255;
imgData.data[i + 1] = 255;
imgData.data[i + 2] = 255;
imgData.data[i + 3] = 255;
}
}
//Put the image on the canvas
ctx2.putImageData( imgData, 0, 0 );
//If the document needs another page, add one
firstPage ? firstPage = false : doc.addPage();
//Turn the canvas with the newest image data into DataURL and put that
//on the pdf, with compression (the 'FAST' part)
doc.addImage( c2.toDataURL( 'image/png' ), 'PNG', 0, 0, pageWidth, pageHeight, null, 'FAST' );
pages--;
posFromTop += pageHeight;
}
//Saves the pdf
doc.save( pdfData.fileName + '.pdf' );
}
} );
}
答案 0 :(得分:1)
事实证明我的选择器超出了画布的最大尺寸,因此被渲染为空白。经过一些挖掘后,最大尺寸(铬合金)面积为268,435,456像素。我试图创建的div有点超过270,000,000像素。
我的解决方案是在上半部分添加课程firstHalf
,在后半部分添加secondHalf
,然后显示替代显示。
然后我在传入jsPDF doc
时调用exportHTMLToPDF两次,以便它使用相同的一个。
以更系统的方式隐藏多个“部分”可以用数字代替。
.part1
,.part2
等等,然后使用传入的变量迭代它们。
function exportHTMLToPDF( selector, pdfData, doc ){
var currentPart = pdfData.curPart;
var lastPart = pdfData.lastPart;
html2canvas( $(selector), {
onrendered: function (canvas){
//**Get page size data**//
if( doc == null ){
doc = jsPDF( 'p', 'mm', [pageWidth, pageHeight] );
}
//**Add the current page to the doc**//
//If this is the last page, save
if( currentPart == lastPart ){
doc.save( pdfData.fileName + '.pdf' );
} else {
//Else call this function again, for the next page
$('.part' + currentPart ).hide();
$('.part' + ( currentPart + 1 ).show();
pdfData.curPart = currentPart + 1;
exportHTMLToPDF( selector, pdfData, doc );
}
}
} );
}