admin管理员组

文章数量:1389762

$(document).ready(function() {

  var element = $("#html-content-holder"); // global variable
  var getCanvas; // global variable
  html2canvas(element, {
    onrendered: function(canvas) {

      getCanvas = canvas;
    }
  });
  var specialElementHandlers = {
    '#editor': function(element, renderer) {
      return true;
    }
  };
  $("#cmd").on('click', function() {
    var imgageData = getCanvas.toDataURL("image/png");
    // Now browser starts downloading it instead of just showing it
    var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
    $("#cmd").attr("download", "Sample_Pic.png").attr("href", newData);

    var doc = new jsPDF();
    doc.fromHTML($('#target').html(), 15, 15, {
      'width': 170,
      'elementHandlers': specialElementHandlers
    });
    doc.save('sample-file.pdf');
  });


});
.button {
    appearance: button;
    -moz-appearance: button;
    -webkit-appearance: button;
    text-decoration: none; font: menu; color: ButtonText;
    display: inline-block; padding: 2px 8px;
    font-size: 13px;
}
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="alpha1/dist/html2canvas.js"></script>
<script type="text/javascript" src="shot.js"></script>

<link rel="stylesheet" type="text/css" href="shot.css">

<script src=".9.1.js"></script>

<script src="jquery.plugin.html2canvas.js"></script>

</head>
<body>
  <div id="html-content-holder" style="background-color: #FFFFFF; width: 500px;
        padding-left: 25px; padding-top: 10px;">
    <div 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>
    </div>
  </div>

  <a id="cmd" href="#" class="button">generate PDF</a>
  <br/>
  
</body>
</html>

$(document).ready(function() {

  var element = $("#html-content-holder"); // global variable
  var getCanvas; // global variable
  html2canvas(element, {
    onrendered: function(canvas) {

      getCanvas = canvas;
    }
  });
  var specialElementHandlers = {
    '#editor': function(element, renderer) {
      return true;
    }
  };
  $("#cmd").on('click', function() {
    var imgageData = getCanvas.toDataURL("image/png");
    // Now browser starts downloading it instead of just showing it
    var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
    $("#cmd").attr("download", "Sample_Pic.png").attr("href", newData);

    var doc = new jsPDF();
    doc.fromHTML($('#target').html(), 15, 15, {
      'width': 170,
      'elementHandlers': specialElementHandlers
    });
    doc.save('sample-file.pdf');
  });


});
.button {
    appearance: button;
    -moz-appearance: button;
    -webkit-appearance: button;
    text-decoration: none; font: menu; color: ButtonText;
    display: inline-block; padding: 2px 8px;
    font-size: 13px;
}
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="alpha1/dist/html2canvas.js"></script>
<script type="text/javascript" src="shot.js"></script>

<link rel="stylesheet" type="text/css" href="shot.css">

<script src="http://code.jquery./jquery-1.9.1.js"></script>

<script src="jquery.plugin.html2canvas.js"></script>

</head>
<body>
  <div id="html-content-holder" style="background-color: #FFFFFF; width: 500px;
        padding-left: 25px; padding-top: 10px;">
    <div 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>
    </div>
  </div>

  <a id="cmd" href="#" class="button">generate PDF</a>
  <br/>
  
</body>
</html>

I have some code how to plugin the jquery(or)js link the html2canvas method in this code run the script $ symbol not define are indicate my notepad so how to link and how to download the pdf and png image.please help me its very useful for me.

  • javascript
  • jquery
  • html2canvas
Share Improve this question asked Aug 19, 2016 at 9:16 Prasanth KlrPrasanth Klr 1311 gold badge3 silver badges9 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 3

Try this,if it works for you :

<html>
        <!DOCTYPE html>
    <html>
    <head>
    <script src="//ajax.googleapis./ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script
        src="http://cdnjs.cloudflare./ajax/libs/jspdf/0.9.0rc1/jspdf.min.js"></script>
    <script src="http://html2canvas.hertzen./build/html2canvas.js"></script>
    </head>
    <body>
        <div id="content">
            <h3>Hello, this is a H3 tag</h3>
            <p>a pararaph</p>
        </div>
        <div id="editor"></div>
        <button id="cmd">generate PDF and Image</button>

        <br />
        <script type="text/javascript">
            $(document).ready(function() {
                    $('#cmd').click(function () {
                         pdf();
                            capture();
                        });         
                }); 
                function pdf()
                {
                    var doc = new jsPDF();
                    var specialElementHandlers = {
                        '#editor': function (element, renderer) {
                            return true;
                        }
                    };      
                    doc.fromHTML($('#content').html(), 15, 15, {
                        'width': 170,
                            'elementHandlers': specialElementHandlers
                    });
                    doc.save('sample-file.pdf');            
                }   

                function capture() {
                    html2canvas($('body'),{
                        onrendered: function (canvas) {                     
                               var imgString = canvas.toDataURL("image/png");
                               var a = document.createElement('a');
                               a.href = imgString;
                               a.download = "image.png";
                               document.body.appendChild(a);
                               a.click();
                               document.body.removeChild(a);              
                    }
                });
            }     
               </script>
    </body>
    </html>

本文标签： javascripthow to plugin the jquery in html2canvasStack Overflow

版权声明：本文标题：javascript - how to plugin the jquery in html2canvas - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744639281a2617020.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。