2016-08-17 20 views
-2

如何使用JS來解開快照

$(function() { 
 

 
    var specialElementHandlers = { 
 
     '#editor': function (element,renderer) { 
 
      return true; 
 
     } 
 
    }; 
 
$('#cmd').click(function() { 
 
     var doc = new jsPDF(); 
 
     doc.fromHTML($('#target').html(), 15, 15, { 
 
      'width': 170,'elementHandlers': specialElementHandlers 
 
     }); 
 
     doc.save('sample-file.pdf'); 
 
    }); 
 
});
<html> 
 
<head> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.0-beta.1/jquery-ui.min.js"></script> 
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.1.135/jspdf.min.js"></script> 
 
<script type="text/javascript" src="http://cdn.uriit.ru/jsPDF/libs/adler32cs.js/adler32cs.js"></script> 
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js 
 
"></script> 
 
<script type="text/javascript" src="library/BlobBuilder.js"></script> 
 

 
<script type="text/javascript" src="pdf.js"></script> 
 
</head> 
 
<body id="target"> 
 
    <div id="content"> 
 
    <h3>Hello, this is mathit app</h3> 
 
    <a class="upload">Upload to Formulas</a> 
 
    <h2>This is <b>10th Std Notes</b> <span style="color:red"></span></h2> 
 
    <p>Study about The polynomial of degree two is called quadratic polynomial and equation corresponding to a quadratic polynomial P(x) is called a quadratic equation in variable x. 
 
Thus, P(x) = ax2 + bx + c =0, R is known as the standard form of quadratic equation. 
 

 

 
There are two types of quadratic equation. 
 
(i) Complete quadratic equation : The equation ax2 + bx + c =0 where a,b,c is not equal to 0. 
 
(ii) Pure quadratic equation : An equation in the form of ax2 = 0, a is not equal to 0, b,c is equal to 0. 
 
</p> 
 

 
    </div> 
 
    <button id="cmd">generate PDF</button> 
 
</body> 
 

 
</html>

我在PDF generater一些代碼,我想如何提取使用例如用戶的JavaScript快照點擊按鈕PDF和截屏的生成並糾正我的編程代碼,請幫助我。

回答

0

正如在其他的答案解釋,您可以使用插件html2canvas

例如在給出其website

html2canvas(document.body, { 
    onrendered: function(canvas) { 
    document.body.appendChild(canvas); 
    } 
}); 

由於在計算器解釋question

你可以下載圖片如下給出:

var dt = canvas.toDataURL('image/png'); 
    /* Change MIME type to trick the browser to downlaod the file instead of displaying it */ 
    dt = dt.replace(/^data:image\/[^;]*/, 'data:application/octet-stream'); 

    /* In addition to <a>'s "download" attribute, you can define HTTP-style headers */ 
    dt = dt.replace(/^data:application\/octet-stream/, 'data:application/octet-stream;headers=Content-Disposition%3A%20attachment%3B%20filename=Canvas.png'); 

    this.href = dt; 
+0

那我thod不是這樣我想從頁面快照使用JavaScript –

+1

你想出口div到pdf對嗎? –

+0

不是pdf將div轉換爲圖像格式(如jpack或png) –