javascript - How to show scrollable all contents of div in pdf using html2canvas - Stack Overflow

admin 管理员组

文章数量: 1086019

I have a simple div contains number of paragraph,that having particular height and vertical scroll beyond the height.When I am downloading the pdf only the visible part of the div is showing.But I need to show all the contents.Here is the code.

html

<script src=".1.1/jquery.min.js"></script>
<script src=".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; }

I have a simple div contains number of paragraph,that having particular height and vertical scroll beyond the height.When I am downloading the pdf only the visible part of the div is showing.But I need to show all the contents.Here is the code.

html

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./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; }

• javascript
• html
• css
• html2canvas

Share Improve this question Follow asked Nov 6, 2018 at 19:01 carreankushcarreankush 65122 gold badges99 silver badges3535 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

You should set the height to auto and then once image generated set the height to your preferred height. So you can capture the whole content.

Add this document.getElementById("content").style.height="auto"; line after getting the offsetWidth and offsetHeight.

And add this document.getElementById("content").style.height="100px"; line after the html2canvas finished.

$(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;
    });

});

If it doesnt download on above snippet, you can test it here

Update 1

Add p tag on each page jsfiddle

The context.scale(horizontalRescale,verticalRescale) mand will shrink every following drawing by your specified horizontalRescale & verticalRescale percentages.

Make horizontalRescale and verticalRescale same value

var downscaleFactor= 0.70;

context.scale( downscaleFactor, downscaleFactor );

This code will shrink node to 70% of original Size.

I hope this will answer your question

本文标签： javascriptHow to show scrollable all contents of div in pdf using html2canvasStack Overflow