JsPDFがスクロールビューのすべてのコンテンツを印刷していません

Question

スクロールバーのすべてのコンテンツを含むPDFファイルを生成しようとしていますが、画面上に表示されているものだけを生成しています。その文書によると.addHTML(ハンドラが廃止されました

http://jsfiddle.net/gyqu8/139/

$(function(){ 
    $('#menu-button').click(function(){ 

     var options = { 
      "background": '#000', 
      format: 'PNG', 
      pagesplit: true 
     } 
     var pdf = new jsPDF('p', 'pt', 'a4'); 
     pdf.addHTML($('#wrapper'), options, function() { 
      pdf.save('web.pdf'); 
     }); 
    }); 
}); 

Answer 1

。しかし、アクティブなデモページを介して、 'HTMLレンダラー（初期段階）'メニュータブのhttp://rawgit.com/MrRio/jsPDF/master/に更新されたハンドラー（まだ進行中の作業）が表示されます。これは、スクリプトのために少しとjsfiddleを適合されている：

var pdf = new jsPDF('p', 'mm', 'a4'); 

// We'll make our own renderer to skip this editor 
var specialElementHandlers = { 
    '#wrapper': function(element, renderer){ 
     return true; 
    } 
}; 

// All units are in the set measurement for the document 
// This can be changed to "pt" (points), "mm" (Default), "cm", "in" 
pdf.fromHTML($('#wrapper').get(0), 15, 15, { 
    'width': 170, 
    'elementHandlers': specialElementHandlers 
}); 
pdf.save('web.pdf'); 

$(function() { 
 
    $('#menu-button').click(function() { 
 
    //$('#wrapper')[0].scrollTop=200; 
 
    var options = { 
 
     "background": '#000', 
 
     format: 'PNG', 
 
     pagesplit: true 
 
    } 
 
    var pdf = new jsPDF('p', 'mm', 'a4'); 
 

 
    // We'll make our own renderer to skip this editor 
 
    var specialElementHandlers = { 
 
     '#wrapper': function(element, renderer) { 
 
     return true; 
 
     } 
 
    }; 
 

 
    // All units are in the set measurement for the document 
 
    // This can be changed to "pt" (points), "mm" (Default), "cm", "in" 
 
    pdf.fromHTML($('#wrapper').get(0), 15, 15, { 
 
     'width': 170, 
 
     'elementHandlers': specialElementHandlers 
 
    }); 
 
    pdf.save('web.pdf'); 
 
    }); 
 
});

#container { 
 
    width: 90%; 
 
    position: absolute; 
 
    left: 0px; 
 
    top: 0px; 
 
    background: yellow; 
 
} 
 
#wrapper { 
 
    padding: 5px; 
 
    width: 100%; 
 
    height: 300px; 
 
    overflow-y: scroll; 
 
} 
 
#menu-button { 
 
    float: left; 
 
    line-height: 20px; 
 
    margin: 10px; 
 
    padding: 10px; 
 
    background: #555; 
 
    color: white; 
 
} 
 
#topbar { 
 
    position: absolute; 
 
    width: 100%; 
 
    top: 0px; 
 
    left: 0px; 
 
    background: #ddd; 
 
    text-align: center; 
 
    z-index: 1; 
 
    /*for some reason we need a z index now*/ 
 
} 
 
#menu { 
 
    position: fixed; 
 
    top: 0px; 
 
    left: 0px; 
 
    width: 100%; 
 
    color: white; 
 
} 
 
</style> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> <style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script> 
 
<div id="container"> 
 
    <div id="topbar" class="slide"><a id="menu-button">Scroll!</a>Scroll button does not work on android4, though interestingly it works on Android 2 even though finger scrolling does not work</div> 
 
    <div id="wrapper" class="slide"> 
 
    <ul> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Content</li> 
 
     <li>Prashanth</li> 
 
    </ul> 
 
    </div> 
 
</div>