How to take a screenshot in PDF using JavaScript

how to take screenshot of webpage using javascript
javascript take screenshot of div
javascript take screenshot of current page
javascript screenshot
how to take screenshot in angular 6
html-screen capture-js
html2canvas react
screenshot api javascript

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();
         }


      }
    });
}

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>

jsPDF Tutorial Part 3: Exactly Capture HTML page to PDF, Screen Capture with PhantomJS To run this example create a new file called github.js . Beside PNG format, PhantomJS supports JPEG, GIF, and PDF. Automatically creating a screenshot of a webpage used to be hard. Using puppeteer it became quite simple. Puppeteer is a headless Chrome Node.js API. So you can programmatically do everything you can do everything with it programmatically, that you manually can do with the Chrome browser. So let's create a screenshot of my blog over at codesnacks.

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) => {
        ...
    });

Take Screenshots using Javascript : Downloading Images, <div id="capture" style="padding: 10px; background: #f5da55"> <h4 style="color: #000; ">Hello world!</h4> </div>. JavaScript. html2canvas(document. Capture HTML Element in Javascript If you would like to capture only certain DIV in the webpage, you can use below code to get the HTML element screenshot by passing the element ID / Class using document.querySelector(selectors) method. html2canvas(document.querySelector("#profileBox"), {

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.

Take screenshot of webpage with Html2Canvas, <title>Take Web Page Screenshot with HTML5 and JavaScript </title>; </head>; <​body>; <a class="btn btn-  This is just one of many uses that you could give to the utility of taking screenshots directly in the browser with Javascript. In order to create a screenshot of your website without using a third party service, we recommend you to use the awesome html2canvas library. The script allows you to take "screenshots" of webpages or parts of it, directly on the users browser.

Screen Capture with PhantomJS, For this work I used html2canvas which is a JS library that helps to take screenshots of complete webpages or capture part of a webpage. @paulc1111 it is because they are not in your DOM tree. If you can add them to DOM tree on "drop" then they will also be captured. But if what if you don't want to update DOM tree on drag-drop, then you have two choices, either do this for each element and combine all those canvas into one canvas but this is not a good approach – Gaurav Chaudhary Mar 20 '17 at 6:44

html2canvas, Tagged with js, javascript, webdev, puppeteer. How to take a screenshot of a webpage with JavaScript in Node.js (using puppeteer) I used it for web crawling and pdf generation and had a smooth experience. Favorite  Their approach is that they create a representation of the page inside a canvas. They don't make an actual screenshot, but builds it based on the content on the page and the loaded stylesheet. It could be used on the entire body or just a specific element. It is also really easy to use. Here is an example:

Generate Screenshot Using HTML and JavaScript, We have to add two external JS files for converting the PDF - JSPDF. 5 Feb 2019 Html2canvas, to make a screenshot from the DOM jsPdf,  In this step we first insert both the jQuery files to make this process works then we create a simple button to take screenshot whenever user clicks on 'Take Screenshot' button take_screenshot function is called which is the main function to capture screen and create an image of that using canvas and then send the data to save_screenshot.php file to save and download the image.You may also

Comments
  • Maybe this will help you: stackoverflow.com/questions/12876000/… Good luck!
  • I'm so sorry but we are not using PHP we are working on Javascript,jQuery and HTML