2016-08-17 6 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でいくつかのコードを持っていると私は生成されているボタンをPDFファイルやスクリーンショットをクリックする例示的なユーザのためにJavaScriptを使用してスナップショットを抽出する方法にしたいです私のプログラミングコードを修正してください。

答えて

0

としては、上で与えられたとして、あなたはプラグインhtml2canvas

例に使用できる他の回答で説明そのwebsite

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

stackoverflowの中で説明したように下記のよう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

私私はjavascriptを使用してページからスナップショットをしたいのですが –

+1

divをpdfにエクスポートしたいのですか? –

+0

pdf形式のdiv形式(jpackやpngなど) –

関連する問題