How to take a screenshot in PDF using JavaScript
12,642
Solution 1
I got a answer you can use this code for converting your html page to pdf file.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
html2canvas {
width: 100px !important;
height: 200px !important;
}
body {
background-color: coral;
}
</style>
</head>
<body bgcolor="teal">
<a href="javascript:genScreenshot()"><button style="background:aqua; cursor:pointer">Get Screenshot</button> </a>
<a id="test"></a>
<div id="text">
<i class="fa fa-car"></i>
<i class="fa fa-car" style="font-size:48px;"></i>
<i class="fa fa-car" style="font-size:60px;color:red;"></i>
</div>
<br>
<div id="box1">
</div>
<p>
<table border="7" bgcolor="green">
<tbody>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</tbody>
</table>
</p>
<script>
function genScreenshot() {
html2canvas(document.body, {
onrendered: function(canvas) {
$('#box1').html("");
$('#box1').append(canvas);
if (navigator.userAgent.indexOf("MSIE ") > 0 ||
navigator.userAgent.match(/Trident.*rv\:11\./))
{
var blob = canvas.msToBlob();
window.navigator.msSaveBlob(blob,'Test file.png');
}
else {
$('#test').attr('href', canvas.toDataURL("image/png"));
doc = new jsPDF({
unit: 'px',
format: 'a4'
});
doc.addImage(canvas.toDataURL("image/png"), 'JPEG', 0, 0);
doc.save('ExportFile.pdf');
form.width(cache_width);
//$('#test').attr('download','Test file.png');
$('#test')[0].click();
}
}
});
}
</script>
</body>
</html>
Solution 2
You can do that with this library. https://github.com/tsayen/dom-to-image
import domtoimage from 'dom-to-image';
...
domtoimage.toJpeg(document.getElementById("wrapperContainer"), { bgcolor: '#2d3138', quality: 0.95 })
.then((dataURI) => {
...
}).catch((error) => {
...
});
Related videos on Youtube
Author by
The Coding Bus
Hi, I Create Videos on MIT App Inventor, I love coding and making videos. , I try to solve real-life problems with coding. If you have any problem related to the coding so just comment on any video. I try my best to solve your problems. Signature:-TheCodingBus " Learn like you'll live forever Live like you'll die tomorrow " !! Happy Coding !!
Updated on July 14, 2022Comments
-
The Coding Bus almost 2 years
I'm using Html2Canvas for capture the screenshot of my screen i want to get a output as a PDF file now i'm getting output in png image how to convert or get output in pdf
function genScreenshot() { html2canvas(document.body, { onrendered: function(canvas) { $('#box1').html(""); $('#box1').append(canvas); if (navigator.userAgent.indexOf("MSIE ") > 0 || navigator.userAgent.match(/Trident.*rv\:11\./)) { var blob = canvas.msToBlob(); window.navigator.msSaveBlob(blob,'Test file.png'); } else { $('#test').attr('href', canvas.toDataURL("image/png")); $('#test').attr('download','Test file.png'); $('#test')[0].click(); } } }); }
-
NoushadM over 2 yearscan you explain what these lines are for : if (navigator.userAgent.indexOf("MSIE ") > 0 || navigator.userAgent.match(/Trident.*rv\:11\./))
-
Thomas over 2 years@NoushadM Looks to check if it's an IE browser, and then handling it differently. At the time of writing the libraries may have been different but as far as I can tell today html2canvas supports IE and jsPDF has IE polyfills that can be loaded if needed.
-
NoushadM over 2 yearsThanks ill try it out
-
NoushadM over 2 yearssorry guys ill try this out soon .i had found another ootion as well which i didnt find so neat . will try this soon