Skip to main content
AI Assist is now on Stack Overflow. Start a chat to get instant answers from across the network. Sign up to save and share your chats.

Return to Answer

added 73 characters in body
Source Link
Vindhyachal Kumar
Vindhyachal Kumar
  • 1.8k
  • 2
  • 24
  • 35

You can check code on fiddle also.

You can check code on fiddle also.

Source Link
Vindhyachal Kumar
Vindhyachal Kumar
  • 1.8k
  • 2
  • 24
  • 35

Check this working code.

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.debug.js"></script> <script type="text/javascript"> var testDivElement = document.getElementById('someHtml'); function savePDF() { var imgData; html2canvas($("#someHtml"), { useCORS: true, onrendered: function (canvas) { imgData = canvas.toDataURL( 'image/png'); var doc = new jsPDF('p', 'pt', 'a4'); doc.addImage(imgData, 'PNG', 10, 10); doc.save('sample-file.pdf'); window.open(imgData); } }); } </script> <style> .handsomeHtml { background: red; } .crazyFrog { background: url('http://e-cdn-images.deezer.com/images/artist/01eb92fc47bb8fb09adea9f763bb1c50/500x500.jpg'); width: 500px; height: 500px; } </style> </head> <body> <div id="someHtml" class="handsomeHtml"> Hello, handsome HTML <br /> <img class="crazyFrog"></img> </div> <br /> <button id="savePDFbutton" onclick="savePDF()"> save pdf </button> </body> </html>