如何使用 JavaScript 截取 PDF 格式的屏幕截图答案

【问题标题】：How to take a screenshot in PDF using JavaScript如何使用 JavaScript 截取 PDF 格式的屏幕截图
【发布时间】：2019-01-23 03:42:33
【问题描述】：

我正在使用 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();
         }


      }
    });
}

【问题讨论】：

也许这会对你有所帮助：stackoverflow.com/questions/12876000/… 祝你好运！
你能解释一下这些行的用途吗： if (navigator.userAgent.indexOf("MSIE ") > 0 || navigator.userAgent.match(/Trident.*rv\:11\./ ))

标签： javascript html pdf png html2canvas

【解决方案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>

【讨论】：

你能解释一下这些行的用途吗： if (navigator.userAgent.indexOf("MSIE ") > 0 || navigator.userAgent.match(/Trident.*rv\:11\./ ))
@NoushadM 看起来检查它是否是一个 IE 浏览器，然后以不同的方式处理它。在撰写本文时，库可能有所不同，但据我所知，html2canvas 支持 IE，而 jsPDF 具有 IE polyfill，可以根据需要加载。
对不起，伙计们很快就会试试这个。我还发现了另一个我没觉得那么整洁的ootion。很快就会试试这个

【解决方案2】：

您可以使用这个库来做到这一点。 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) => {
        ...
    });

【讨论】：

谢谢我试试看