I have a basic div with multiple paragraphs inside, each set to a specific height with vertical scrolling enabled. When I attempt to download the PDF file, only the visible portion of the div is being captured. However, I would like to include all the contents in the PDF. Below is the code snippet.
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; }