JsPDF不会在滚动视图中打印所有内容

Question

我正在尝试生成包含滚动条中所有内容的pdf文件，但它只生成屏幕上显示的内容。

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

根据他们的文档，.addHTML(处理程序已被弃用。但是，通过他们的活动演示页面，他们在“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>