如何使用 html2canvas 在 pdf 中显示可滚动的 div 的所有内容

Question

我有一个简单的 div 包含段落数，具有特定的高度和垂直滚动超出 height.When 我正在下载 pdf 只有 div 的可见部分是showing.But我需要显示所有contents.Here是代码。

html

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.min.js">
</script>
<div id="content">
      <p>This is the element you only want to capture</p>   
       <p>This is the element you only want to capture</p>  
        <p>This is the element you only want to capture</p> 
         <p>This is the element you only want to capture</p>    
          <p>This is the element you only want to capture</p>   
    </div>
    <button id="print">Download Pdf</button>
    <footer>This is the footer</footer>

javascript

(document).ready(function() {
 $('#print').click(function() {

  var w = document.getElementById("content").offsetWidth;
  var h = document.getElementById("content").offsetHeight;
  html2canvas(document.getElementById("content"), {

    dpi: 300, // Set to 300 DPI
    scale: 3, // Adjusts your resolution
    onrendered: function(canvas) {
      var img = canvas.toDataURL("image/jpeg", 1);
      var doc = new jsPDF('L', 'px', [w, h]);
      doc.addImage(img, 'JPEG', 0, 0, w, h);
      doc.addPage();
      doc.save('sample-file.pdf');
    }
  });
});

});

css

body {
  background: beige;
}

header {
  background: red;
}

footer {
  background: blue;
}

#content {
  background: yellow;
  width: 70%;
  height: 100px;
  margin: 50px auto;
  border: 1px solid orange;
  padding: 20px;
  overflow-y:auto;
}
.html2canvas-container { width: 3000px !important; height: 3000px !important; }

Answer 1

context.scale(horizontalRescale,verticalRescale) 命令将按您指定的 horizontalRescale 和 verticalRescale 百分比缩小每个后续绘图。

使horizontalRescale和verticalRescale相同值

var downscaleFactor= 0.70;

context.scale( downscaleFactor, downscaleFactor );

此代码会将节点缩小到原始大小的 70%。

我希望这会回答你的问题

Answer 2

您应该将高度设置为 auto，然后在生成图像后将高度设置为您喜欢的高度。这样您就可以捕获全部内容。

在获取 offsetWidth 和 offsetHeight 后添加此 document.getElementById("content").style.height="auto"; 行。

并在 html2canvas 完成后添加此 document.getElementById("content").style.height="100px"; 行。

$(document).ready(function() {
     $('#print').click(function() {
     var currentPosition = document.getElementById("content").scrollTop;
      var w = document.getElementById("content").offsetWidth;
      var h = document.getElementById("content").offsetHeight;
     document.getElementById("content").style.height="auto";

      html2canvas(document.getElementById("content"), {

        dpi: 300, // Set to 300 DPI
        scale: 3, // Adjusts your resolution
        onrendered: function(canvas) {
          var img = canvas.toDataURL("image/jpeg", 1);
          var doc = new jsPDF('L', 'px', [w, h]);
          doc.addImage(img, 'JPEG', 0, 0, w, h);
          doc.addPage();
          doc.save('sample-file.pdf');
        }
      });
     document.getElementById("content").style.height="100px";
     document.getElementById("content").scrollTop = currentPosition;
    });

});

如果上面的片段没有下载，你可以测试一下here

更新 1

在每个页面上添加 p 标签 jsfiddle

如何使用 html2canvas 在 pdf 中显示可滚动的 div 的所有内容

How to show scrollable all contents of div in pdf using html2canvas

html

javascript

css

html2canvas

html

javascript

css