Question

我正在使用Html2Canvas捕获屏幕截图，我想以PDF文件的格式获取输出，现在我以png图像格式获取输出，如何以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();
         }


      }
    });
}

Answer 1

我得到了一个答案，您可以使用此代码将html页面转换为pdf文件。

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

Answer 2

使用诸如html2canvas之类的服务，您可以向服务器上的页面发送POST请求。使用该页面可将图像转换为PDF，并使其输出文件以供下载。

假设您使用的是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.

将图像转换为PDF的示例库是mPDF或TCPDF。欢迎Google其他人使用，特别是如果您不使用PHP。

请注意，这种解决方案不如他们自己选择，因为质量肯定不会那么好。

Answer 3

您可以使用此库来实现。 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) => {
        ...
    });

如何使用JavaScript在PDF中截屏

3 个答案: