Question

$(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和屏幕截图的按钮并更正我的编程代码请帮帮我。

Answer 1

如其他答案所述，您可以使用插件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;

如何使用js提取快照

1 个答案: