[英]How to take a screenshot in PDF using JavaScript
我正在使用 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();
}
}
});
}
我得到了一个答案，您可以使用此代码将您的 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>
你可以用这个库来做到这一点。 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) => {
...
});
使用诸如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。 欢迎其他人使用，特别是如果您不使用PHP。
请注意，这种解决方案不如他们自己做出选择，因为质量肯定不会那么好。
一个不错的方法是使用jsPDF库： https : //github.com/MrRio/jsPDF
如何使用 getUserMedia() 截屏； JavaScript 中的 API
[英]How to take screenshot using getUserMedia(); API in javascript
如何获取HtML div内容的屏幕截图并在JavaScript中另存为PdF文件
[英]How to take screenshot of HtML div content & save as PdF file in javascript
如何使用JavaScript或jQuery拍摄Google地图的屏幕截图？
[英]How to take screenshot of a Google map using JavaScript or jQuery?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.