How to take a screenshot in PDF using 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();
         }


      }
    });
}

回答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>

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

回答3:

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.

来源：https://stackoverflow.com/questions/51872656/how-to-take-a-screenshot-in-pdf-using-javascript

标签

javascript

html

pdf

png

html2canvas