mcl mcl - 22 days ago 6
Javascript Question

jsPDF output file is empty

I am trying to output a DIV as a PDF File.

I used the basic description from jsPDF on GitHub

I must have missed something because the file that is downloaded does not appear to have any visible data. I'm Using OSX Mavericks with Google Chrome, similar result with Safari. The file is 3kb larger

<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.debug.js"></script>

</head>

<body>

<div id="ResultsReport">
<h3>Hello, this is a H3 tag : testing V2 of btnPDF</h3>

<p>a pararaph</p>
</div>

<button id="btnPDF" onclick="btnPDF(code);">Generate PDF</button>

<script>
var code = "UNIQ_ALL";

function btnPDF(code) {

var doc = new jsPDF()
var repPDF = document.getElementById('ResultsReport').innerHTML;
alert("REP=" + repPDF);
doc.text(repPDF);
//doc.text("<h4>This is just a test</h4>");
doc.save(code + '.pdf');
}
</script>
</body>
</html>

Answer

I don't know that jspdf library but this works fine:

var code = "UNIQ_ALL";

 function btnPDF(code) {

     var doc = new jsPDF()
     var repPDF = document.getElementById('ResultsReport').innerText;
     doc.text(repPDF, 10, 10); // <-- add 10, 10
     doc.save(code + '.pdf');
 }
<!DOCTYPE html>
<html>

<head>
  <title>Untitled</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.debug.js"></script>

</head>

<body>

  <div id="ResultsReport">
    <h3>Hello, this is a H3 tag : testing V2 of btnPDF</h3>

    <p>a pararaph</p>
  </div>

  <button id="btnPDF" onclick="btnPDF(code);">Generate PDF</button>
</body>

</html>

I also changed the innerHTML property to innerText to extract text instead of HTML.

Edit:

Using an older version of jsPDF (1.0.272) you can try the method fromHTML. I think is an early stage renderer, so with fancy HTML wouldn't work probably, but for simple stuff should be fine.

html2canvas is not necessary with fromHTML but for addHTML I think it is.

var code = "UNIQ_ALL";

function btnPDF(code) {

  var doc = new jsPDF();
  doc.fromHTML($("#ResultsReport")[0], 10, 10);
  doc.save(code + '.pdf');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>

<div id="ResultsReport">
  <h3>Hello, this is a H3 tag : testing V2 of btnPDF</h3>
  <p>a <b>bold</b> pararaph</p>
</div>

<button id="btnPDF" onclick="btnPDF(code);">Generate PDF</button>