Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

download html <div> into pdf using jsPDF

I am trying to download a div value into PDF using jsPDF here are the code which I have written:

<html>
  <head>
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script src="jsPDF.js"></script>
    <script>
    $(function () {
      var doc = new jsPDF();
      var specialElementHandlers = {
        '#editor': function (element, renderer) {
          return true;
        }   
      };

      $('#cmd').click(function () {
        doc.fromHTML($('#content').html(), 15, 15, {
          'width': 170,
          'elementHandlers': specialElementHandlers
        });
        doc.save('sample-file.pdf');
      });
    });
    </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</button>
  </body>
</html>

But while clicking on the button nothing is happening...I have downloaded the jsPDF from this link.

I am clueless of thing can anyone please help me.

like image 428
Joyeeta Sinharay Avatar asked Sep 06 '14 09:09

Joyeeta Sinharay


People also ask

How do I export my HTML page as PDF using JavaScript?

Generate PDF using JavaScript The following example shows how to use the jsPDF library to generate PDF file using JavaScript. Specify the content in text() method of jsPDF object. Use the addPage() method to add new page to PDF. Use the save() method to generate and download PDF file.

How can download HTML page as PDF using jQuery?

The HTML Table will be first converted into a HTML5 Canvas using html2canvas plugin and then the HTML5 Canvas will be exported to PDF file using the pdfmake plugin in jQuery. The following HTML Markup consists of an HTML Table and a Button. Explanation: The Export Button has been assigned a jQuery click event handler.


2 Answers

Pick jspdf.min.js from https://github.com/MrRio/jsPDF/tree/master/dist

Then this should work:

....
<script src="jspdf.min.js"></script>
<script>
$(function () {

  $('#cmd').click(function () {
    var doc = new jsPDF();
    doc.addHTML($('#content')[0], 15, 15, {
      'background': '#fff',
    }, function() {
      doc.save('sample-file.pdf');
    });
  });
});
</script>
....
like image 102
diegocr Avatar answered Oct 21 '22 00:10

diegocr


<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.js"></script>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.js"></script>
      <script type="text/javascript" src="http://mrrio.github.io/jsPDF/dist/jspdf.debug.js"></script>
      <script type="text/javascript" src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
  <script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(document).ready(function() {
    $('#download').click(function() {       
        html2canvas($("#canvas"), {
            onrendered: function(canvas) {         
                var imgData = canvas.toDataURL('image/png'); 
                $("#imgRes").attr("src", imgData);             
                var doc = new jsPDF('p', 'mm');
                doc.addImage(imgData, 'PNG', 10, 10);
                doc.save('sample-file.pdf');
            }
        });
    });
});
});//]]> 
</script>

and here is a HTML its working i tested it many times. and using this same code.

<img id="imgRes" height="500px" width="770px"  />
   <div id="canvas" style="background-image:url(fimage/1.jpg)"><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</div> 
<button id="download">Download Pdf</button>
like image 27
Harsimran singh Avatar answered Oct 21 '22 00:10

Harsimran singh