Prasanth Klr Prasanth Klr - 3 months ago 21
HTML Question

how to download the div tag description in image format using 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');
});
});

<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>


<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>
<button id="cmd">generate PDF</button>





How to download the div tag details and save have png image. I have some code in download the double time download in pdf i want to download the one in pdf and another one in png image how to change the code please help me for example user click the button to down load the pdf and png image.

Answer

You can actually do this with the help of HTML2Canvas jquery file and HTML5 download attribute.

$(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');
  });


});

jsfiddle

Comments