<body>
<div class="chart" id="chart">
<img src="../images/group10.png" alt="圖檔加載失敗" />
<img src="../images/permission.png" alt="圖檔加載失敗" />
Hello
</div>
<span id="screenImage" class="btn-screen" >截屏</span>
<a id="downImage" href="" class="btn-screen" >下載下傳</a>
<img id="screenShotImg" src="../images/favicon.jpg" alt="圖檔" class="screen" />
</body>
<script src="../js/jquery-2.1.4.js"></script>
<script src="../plug/canvas/html2canvas.js"></script>
<script src="../plug/canvas/jspdf.min.js"></script>
<script>
$(document).ready(function() {
$('#screenImage').click(function(e) {
var createBox = $('#chart');
html2canvas(createBox).then(function(canvas) {
var imgUrl = canvas.toDataURL('image/png', 1.0);
var param = new Date().getTime();
$('#screenShotImg').attr('src', imgUrl);
$('#downImage').attr('href', imgUrl);
$('#downImage').attr('download', 'screen_' + param);
var canvasWidth = canvas.width;
var totalHeight = canvas.height;
var pageHeight = canvasWidth/595.28 * 841.89;
var deviation = 0;
document.body.appendChild(canvas);
var doc = new jsPDF('','pt','a4');
if(pageHeight >= totalHeight){
doc.addImage(imgUrl, 'PNG', 0, 0, 595.28, 841.89);
}else{
while(totalHeight > 0){
doc.addImage(imgUrl, 'PNG', 0, deviation, 595.28, 595.28/canvas.width * canvas.height);
totalHeight -= pageHeight;
deviation -= 841.89;
if(totalHeight > 0){
doc.addPage();
}
doc.save(param + '.pdf');
});
</script>
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)