I was following a solution in order to implement the html2canvas function. (How to show scrollable all contents of div in pdf using html2canvas) The answer of one of the users is just working fine, when executing the respective function in jsfiddle.net (https://jsfiddle.net/dr4ewfa1/5/). However, after copying + pasting the same code in visual study, I don't receive any download files after clicking the button.
Do you have an idea, why this could be & how to solve this ? My HTML file looks like this, the JS code is exactly the same as mentioned by the user @Nimitt Shah:
$(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;
});
});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; }<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>I also executed the following statement in the console/terminal: npm install --save html2canvas
Unfortunately i still didn't get any file.
Thanks in advance.
Edit: I realized, that I'm also not able to execute the code in here. maybe it's the same reason ?