How to take a screenshot in PDF using JavaScript
Question
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();
}
}
});
}
2 answers
solution1
2 ACCPTED 2018-08-18 07:12:52
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>
solution2
1 2018-10-25 09:02:39
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) => {
...
});
solution3
0 2018-08-16 08:42:11
Using a service such as html2canvas, you can send a POST request to a page on your server. Use that page to convert the image to a PDF, and have it output the file as a download.
Assuming you're using PHP:
<?php
header("Content-type:application/pdf");
header("Content-Disposition:attachment;filename='screen-shot.pdf'");
// The above headers will cause the file to automatically be downloaded.
// Use a library to convert the image to a PDF here.
An example library to convert an image to a PDF is mPDF, or TCPDF. Feel free to Google others, especially if you're not using PHP.
Do note that this solution is inferior to them just making the choice themselves, as the quality definitely won't be as nice.
solution4
0 2019-11-06 16:31:58
一个不错的方法是使用jsPDF库： https : //github.com/MrRio/jsPDF
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.